Skip to main content

​
Implementation Methods

Banner ads can be easily implemented using HTML attributes only. Ads are automatically requested when the ad placement is rendered, without any function calls.
Use the test unit ID in development: PUBLIC_TEST_UNIT_ID_320_100

​
Data Attributes Method

Just add the data-adrop-unit attribute and the SDK will automatically load the ad. 
<div
  data-adrop-unit="YOUR_UNIT_ID"
  data-adrop-context-id="YOUR_CONTEXT_ID"
  data-adrop-theme="light">
</div>

​
Data Attributes

​
data-adrop-unit
string
required
Unit ID created in Ad Control Console
​
data-adrop-context-id
string
Context ID for Contextual Targeting
​
data-adrop-theme
string
default:"light"
Theme setting (light or dark) - See Dark Mode Settings

​
Refreshing Ads

Create a new ad placement DOM and replace the existing DOM to request a new ad. 
const container = document.getElementById('ad-wrapper');
const newAd = document.createElement('div');
newAd.setAttribute('data-adrop-unit', 'YOUR_UNIT_ID');
Adrop.instance().clear(container);
container.appendChild(newAd);

​
renderAd Method

Use this when you want direct control over ad loading timing. 
<div id="ad-container"></div>

<script>
  const container = document.getElementById('ad-container');
  const adrop = Adrop.instance();

  adrop.renderAd(container, {
    unit: 'YOUR_UNIT_ID',
    contextId: 'YOUR_CONTEXT_ID',
    theme: 'light'
  });
</script>

​
renderAd Options

​
unit
string
required
Unit ID created in Ad Control Console
​
uid
string
User identifier (used to override SDK-level setting for individual placements)
​
contextId
string
Context ID for Contextual Targeting
​
theme
string
default:"light"
Theme setting (light or dark) - See Dark Mode Settings

​
Refreshing Ads

Call renderAd() again to request a new ad. 
const container = document.getElementById('ad-container');
Adrop.instance().renderAd(container, {
  unit: 'YOUR_UNIT_ID'
});

​
Removing Ads

Call clear() to remove the ad from the container. 
const container = document.getElementById('ad-container');
Adrop.instance().clear(container);

​
Ad Size

Set the container to match the size registered in the unit. 
<div
  data-adrop-unit="YOUR_UNIT_ID"
  style="width: 320px; height: 100px;">
</div>
TypeSize SettingAlignment
Direct AdsResponsive support, height requiredHorizontal/Vertical center
Backfill AdsInitial width matching, height requiredHorizontal center

​
Event Handling

You can detect ad status changes and handle the UI appropriately. 
<script>
  const adrop = Adrop.instance();

  // Ad received successfully
  function handleReceived(unit, adData) {
    console.log('Ad received:', unit);
  }

  // No direct ads available
  function handleNoFill(unit) {
    console.warn('No ad available:', unit);
  }

  // Request failed
  function handleFailed(unit) {
    console.error('Ad failed:', unit);
  }

  // Impression
  function handleImpression(unit) {
    console.log('Ad impression:', unit);
  }

  // Click
  function handleClicked(unit) {
    console.log('Ad clicked:', unit);
  }

  // No backfill ad available
  function handleBackfillNoFill(unit) {
    console.warn('No backfill ad:', unit);
  }

  // Filter for specific unit only
  const filter = { unit: 'YOUR_UNIT_ID' };

  adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
  adrop.on(Adrop.Events.AD_NO_FILL, handleNoFill, filter);
  adrop.on(Adrop.Events.AD_FAILED, handleFailed, filter);
  adrop.on(Adrop.Events.AD_IMPRESSION, handleImpression, filter);
  adrop.on(Adrop.Events.AD_CLICKED, handleClicked, filter);
  adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);
</script>

​
Supported Events

EventConstantDescription
Ad ReceivedAD_RECEIVEDAd request successful
No AdAD_NO_FILLNo direct ads available
Request FailedAD_FAILEDAd request failed
ImpressionAD_IMPRESSIONAd impression recorded
ClickAD_CLICKEDUser clicked the ad
No BackfillAD_BACKFILL_NO_FILLNo backfill ad available

​
Removing Event Listeners

Remove event listeners using off() when no longer needed. 
adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);

​
AdData

Ad data passed to event handlers. See Reference > AdData for detailed field information.

​
Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Banner Ad Example</title>
</head>
<body>
  <header>
    <!-- Header banner ad -->
    <div
      data-adrop-unit="HEADER_BANNER_UNIT_ID"
      style="width: 100%; height: 80px;">
    </div>
  </header>

  <main>
    <h1>Content</h1>
  </main>

  <footer>
    <!-- Footer banner ad -->
    <div
      data-adrop-unit="FOOTER_BANNER_UNIT_ID"
      data-adrop-theme="dark"
      style="width: 320px; height: 100px;">
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/@adrop/ads-web-sdk@latest/dist/adrop-ads.min.js"></script>
  <script>
    const adrop = Adrop.observe({
      appId: 'YOUR_APP_ID',
      debug: true
    });

    adrop.on(Adrop.Events.AD_CLICKED, function(unit) {
      console.log('Ad clicked:', unit);
    });
  </script>
</body>
</html>