Skip to main content

​
Implementation Methods

Native ads allow you to display ads with custom UI that matches your app’s design.
MethodDescriptionRecommended
Default TemplateUse SDK-provided templateQuick implementation
Custom UIBuild your own UIWhen design customization is needed
Use the test unit ID in development: PUBLIC_TEST_UNIT_ID_NATIVE

​
Default Template

You can use the default template in the same way as banner ads. Images and text are automatically rendered in the SDK-provided template. 
<div data-adrop-unit="YOUR_NATIVE_UNIT_ID"></div>
The default template does not support advertiser profile sections. Use custom UI to display advertiser profiles.

​
Custom UI

​
Data Attributes Method

Add the data-adrop-render="custom" attribute and bind fields using data-adrop-native attributes on inner elements. 
<div
  data-adrop-unit="YOUR_NATIVE_UNIT_ID"
  data-adrop-render="custom"
  data-adrop-entire-click="true"
  class="native-ad">

  <!-- Advertiser Profile -->
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="Advertiser">
    <span data-adrop-native="profile.displayName"></span>
  </div>

  <!-- Ad Content -->
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="Ad">
  <p data-adrop-native="body"></p>

  <!-- Extra text items -->
  <span data-adrop-native="extra.price"></span>

  <!-- CTA Button -->
  <button data-adrop-native="callToAction"></button>
</div>

​
Data Attributes

​
data-adrop-unit
string
required
Unit ID created in Ad Control Console
​
data-adrop-render
string
required
Set to custom for custom UI
​
data-adrop-context-id
string
Context ID for contextual targeting
​
data-adrop-theme
string
default:"light"
Theme setting (light or dark)
​
data-adrop-entire-click
boolean
default:false
Enable entire area click
  • false: Only text/images are clickable, clicking advertiser profile goes to profile link
  • true: Entire container is clickable, all clicks go to ad destination

​
renderAd Method

Use this when you want direct control over ad loading timing. 
<div id="native-ad-container" class="native-ad">
  <div class="ad-profile">
    <img data-adrop-native="profile.displayLogo" alt="Advertiser">
    <span data-adrop-native="profile.displayName"></span>
  </div>
  <h3 data-adrop-native="headline"></h3>
  <img data-adrop-native="asset" alt="Ad">
  <p data-adrop-native="body"></p>
  <button data-adrop-native="callToAction"></button>
</div>

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

  adrop.renderAd(container, {
    unit: 'YOUR_NATIVE_UNIT_ID',
    contextId: 'YOUR_CONTEXT_ID',
    theme: 'light',
    trackMode: 1,        // Required for custom UI
    isEntireClick: true  // Enable entire area click
  });
</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
​
trackMode
number
required
Set to 1 for custom UI
​
isEntireClick
boolean
default:false
Enable entire area click
​
theme
string
default:"light"
Theme setting (light or dark)

​
Field Binding

Bind ad data to UI elements using the data-adrop-native attribute.
FieldDescriptionElement Type
profile.displayLogoAdvertiser logo URL<img>
profile.displayNameAdvertiser nameText
headlineAd titleText
bodyAd descriptionText
assetMain image URL<img>
callToActionCTA button textText
extra.{key}Extra text itemsText
extra.{key} is the ID of extra text items set in Ad Control Console. It may be empty if not set as required.
To display advertiser profile (profile.displayLogo, profile.displayName), you must enable Show Advertiser Profile for that ad unit in Ad Control Console.

​
Ad Size

Custom UI size can be set freely.
TypeSize SettingAlignment
Direct AdsResponsive supportHorizontal/Vertical center
Backfill AdsInitial width matching, height requiredHorizontal center
Backfill ads request creatives matching the container size. Specify an appropriate size.

​
Fetching Data Only with requestAd

If you want complete control over the UI, you can fetch only the ad data using requestAd. 
<div id="native-ad-container"></div>

<script>
  async function loadNativeAd() {
    const adrop = Adrop.instance();

    const response = await adrop.requestAd({
      unit: 'YOUR_NATIVE_UNIT_ID',
      trackMode: 1
    });

    if (response.code === 0 && response.result) {
      const ad = response.result;
      const container = document.getElementById('native-ad-container');

      container.innerHTML =
        '<div class="native-ad">' +
          '<div class="ad-header">' +
            '<img src="' + (ad.profile?.displayLogo || '') + '" alt="Logo">' +
            '<span>' + (ad.profile?.displayName || '') + '</span>' +
          '</div>' +
          '<h3>' + (ad.headline || '') + '</h3>' +
          '<img src="' + (ad.asset || '') + '" alt="Ad">' +
          '<p>' + (ad.body || '') + '</p>' +
          '<a href="' + ad.destinationURL + '" target="_blank">' + ad.callToAction + '</a>' +
        '</div>';
    }
  }

  loadNativeAd();
</script>
When using requestAd, you must implement impression/click tracking yourself. Also, backfill ads are not supported with this method. We recommend using renderAd unless there’s a special case.

​
AdropAdResponse

Return value of requestAd().
FieldTypeDescription
codenumberResponse code (0: success, 4000-4003: error)
msgstringResponse message
resultAdDataAd data (only present on success)

​
AdData

Ad data object. Event handlers also receive the same structure. See Reference > AdData for the complete interface definition.
FieldTypeDescription
formatstringAd format (banner, nativeAd, backfill)
unitstringUnit ID
headlinestringAd title
bodystringAd description
callToActionstringCTA button text
assetstringMain image URL
destinationURLstringClick destination URL
profile.displayLogostringAdvertiser logo URL
profile.displayNamestringAdvertiser name
profile.linkstringAdvertiser profile link
extraRecord<string, string>Extra text items

​
Event Handling

<script>
  const adrop = Adrop.instance();
  const filter = { unit: 'YOUR_NATIVE_UNIT_ID' };

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

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

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

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

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

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