Interactive Ad SDK

A modern, framework-agnostic interactive advertisement web component. It allows you to display beautiful banner ads while enabling users to engage by liking, disliking, viewing, and commenting.

Features

• Framework Agnostic: Built with native Web Components, meaning it works in React, Vue, Angular, or Vanilla JS.
• Zero Setup: Connects automatically to the Ad Network's database out of the box. No backend configuration needed from the webmaster.
• Modern Aesthetics: Premium, responsive default styling using Shadow DOM encapsulation.
• Engaging UI: Includes an engagement bar and comment section out-of-the-box.

Installation

npm install @pagepact/interactive-ad-sdk

Usage

Simply import the SDK into your project's main entry file (e.g. main.js, App.jsx, or _app.js). This registers the <interactive-ad> tag.

import '@pagepact/interactive-ad-sdk';

Then, you can use the <interactive-ad> HTML tag anywhere in your application!

<interactive-ad 
  ad-id="campaign-summer-sale" 
  title="Summer Cloud Hosting Sale" 
  description="Get 50% off all our premium cloud servers for a limited time."
  image-url="https://example.com/banner.jpg"
  link-url="https://example.com/sale"
></interactive-ad>

Attributes

• ad-id (Required): A unique string identifier for this advertisement.
• variant: The standard IAB ad size layout. Can be rectangle (300x250, default), leaderboard (728x90), or skyscraper (160x600).

Wrapping 3rd-Party Ads (like Google AdSense)

Instead of passing static attributes, you drop your ad creative (like a Google Ads <ins> and <script> tag, or an <img> tag) directly inside the <interactive-ad> tag.

<interactive-ad variant="rectangle" ad-id="my-campaign-123">
   <!-- Your Ad Network Code goes here -->
   <ins class="adsbygoogle"
        style="display:inline-block;width:300px;height:250px"
        data-ad-client="ca-pub-12345"
        data-ad-slot="67890"></ins>
   <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
</interactive-ad>

License

MIT