Getting Started

Learn how to integrate Adrop Web SDK into your React project.

Overview

Integrate Adrop Web SDK into your React project to display banner ads and native ads.

Supported Ad Formats

• Banner Ads
• Native Ads (with custom UI support)

Requirements

• React 16.8 or higher
• Node.js 14 or higher

---

Installation

Install the SDK using NPM or Yarn.

npm

npm install @adrop/ads-web-sdk

---

Initialization

Initialize the SDK at your app’s entry point (main.tsx or index.tsx). The SDK works as a singleton, so you only need to initialize it once.

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// Initialize SDK before rendering the app
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // true only in development
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Initialization Options (AdropConfig)

appId · string · required

App ID issued from Ad Control Console

uid · string

User identifier (used for targeting)

appKey · string

API authentication key (required for updating user properties)

debug · boolean · default: false

Enable debug logging

backfillMode · 'responsive' | 'fixed' · default: "responsive"

Publisher-wide backfill rendering mode. Per-slot overrides take precedence. See the Backfill Rendering Mode guide for details. (SDK 1.2.3+)

Set debug: false in production environments.

Instance Access

After initialization, you can access the SDK from anywhere using Adrop.instance().

import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // Use SDK
  };

  return <button onClick={handleClick}>Load Ad</button>;
}

Dynamic Configuration Updates

You can change settings at runtime, such as setting a user ID after login.

// Using setConfig
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});

For targeted ads to work properly, set uid before entering the ad placement.

---

WebView Setup (For Backfill Ads)

If you serve this site inside your app’s in-app WebView, we recommend also adopting the Adrop SDK for the wrapping platform (Android · iOS · Flutter · React Native) and calling Adrop.registerWebView(). Google states that this registration makes app signals available to ad tags inside the WebView, helping to improve monetization. Additionally, default WebView settings are not optimized for ads — follow each platform guide’s WebView configuration (JavaScript, DOM storage, third-party cookies, media autoplay). No extra setup is needed for browser (mobile or desktop) traffic.

Android Setup

Register a WebView on Android

iOS Setup

Register a WKWebView on iOS

Flutter Setup

Register a WebView in Flutter

React Native Setup

Register a WebView in React Native

---

Table of Contents

Banner Ads

Implement banner ads

Native Ads

Implement native ads

Targeting

Audience/Contextual targeting

Reference

Classes, interfaces, constants

Examples

React, CDN example code