Skip to main content

​
Implementation Methods

You can implement banner ads in two ways.
MethodDescriptionRecommended
Data AttributesSimple implementation using HTML attributes onlyQuick implementation
renderAdDirect control over ad loading timingWhen fine-grained control is needed
Use the test unit ID in development: PUBLIC_TEST_UNIT_ID_320_100

​
1. Data Attributes Method

The simplest method - just add the data-adrop-unit attribute and the SDK will automatically load the ad. 
function BannerAd() {
  return (
    <div
      data-adrop-unit="YOUR_UNIT_ID"
      data-adrop-context-id="YOUR_CONTEXT_ID"
      data-adrop-theme="light"
    />
  );
}

​
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

Change the React key to remount the component and request a new ad. 
function App() {
  const [adKey, setAdKey] = useState(0);

  const reloadAd = () => {
    setAdKey(prev => prev + 1);
  };

  return (
    <>
      <div key={adKey} data-adrop-unit="YOUR_UNIT_ID" />
      <button onClick={reloadAd}>Refresh Ad</button>
    </>
  );
}

​
2. renderAd Method

Use this when you want direct control over ad loading timing. 
import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function BannerAd() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: 'YOUR_UNIT_ID',
        contextId: 'YOUR_CONTEXT_ID',
        theme: 'light'
      });
    }

  }, []);

  return <div ref={containerRef} />;
}

​
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. Can also be used on placements created with Data Attributes. 
function BannerAd() {
  const containerRef = useRef<HTMLDivElement>(null);

  const reloadAd = () => {
    const adrop = Adrop.instance();
    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: 'YOUR_UNIT_ID'
      });
    }
  };

  return (
    <>
      <div ref={containerRef} />
      <button onClick={reloadAd}>Refresh Ad</button>
    </>
  );
}
When calling renderAd() on a placement created with Data Attributes, you only need to pass items that don’t exist in data attributes or items you want to modify.

​
Removing Ads

Call clear() to remove the ad from the container. 
const adrop = Adrop.instance();
adrop.clear(containerRef.current);

​
Ad Size

Set the container to match the size registered in the unit. 
<div
  data-adrop-unit="YOUR_UNIT_ID"
  style={{ width: 320, height: 100 }}
/>
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. 
import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function BannerAd({ unitId }: { unitId: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();

    // Ad received successfully
    const handleReceived = (unit: string, adData: any) => {
      console.log('Ad received:', unit);
    };

    // No direct ads available
    const handleNoFill = (unit: string) => {
      console.warn('No ad available:', unit);
    };

    // Request failed
    const handleFailed = (unit: string) => {
      console.error('Ad failed:', unit);
    };

    // Impression
    const handleImpression = (unit: string) => {
      console.log('Ad impression:', unit);
    };

    // Click
    const handleClicked = (unit: string) => {
      console.log('Ad clicked:', unit);
    };

    // No backfill ad available
    const handleBackfillNoFill = (unit: string) => {
      console.warn('No backfill ad:', unit);
    };

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

    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);

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, { unit: unitId });
    }

    return () => {
      adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
      adrop.off(Adrop.Events.AD_NO_FILL, handleNoFill);
      adrop.off(Adrop.Events.AD_FAILED, handleFailed);
      adrop.off(Adrop.Events.AD_IMPRESSION, handleImpression);
      adrop.off(Adrop.Events.AD_CLICKED, handleClicked);
      adrop.off(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill);
    };
  }, [unitId]);

  return <div ref={containerRef} />;
}

​
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
Always remove event listeners using off() when the component unmounts.

​
AdData

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

​
Complete Example

​
BannerAd.tsx

import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

interface BannerAdProps {
  unitId: string;
  contextId?: string;
  theme?: 'light' | 'dark';
  onReceived?: (adData: any) => void;
  onFailed?: () => void;
  onClicked?: () => void;
}

function BannerAd({
  unitId,
  contextId,
  theme = 'light',
  onReceived,
  onFailed,
  onClicked
}: BannerAdProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();
    const filter = { unit: unitId };

    const handleReceived = (_: string, adData: any) => onReceived?.(adData);
    const handleFailed = () => onFailed?.();
    const handleClicked = () => onClicked?.();

    adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
    adrop.on(Adrop.Events.AD_FAILED, handleFailed, filter);
    adrop.on(Adrop.Events.AD_CLICKED, handleClicked, filter);

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: unitId,
        contextId,
        theme
      });
    }

    return () => {
      adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
      adrop.off(Adrop.Events.AD_FAILED, handleFailed);
      adrop.off(Adrop.Events.AD_CLICKED, handleClicked);
    };
  }, [unitId, contextId, theme]);

  return <div ref={containerRef} className="banner-ad-container" />;
}

export default BannerAd;

​
Usage Example

import BannerAd from './components/BannerAd';

function App() {
  return (
    <div>
      <header>
        <BannerAd
          unitId="HEADER_BANNER_UNIT_ID"
          onClicked={() => console.log('Header banner clicked')}
        />
      </header>

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

      <footer>
        <BannerAd
          unitId="FOOTER_BANNER_UNIT_ID"
          theme="dark"
        />
      </footer>
    </div>
  );
}