Skip to main content

​
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 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
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 your web app runs in a WebView and you want to display backfill ads, you need to configure the native app. See the platform-specific guides below.

Android Setup

Android WebView setup guide

iOS Setup

iOS WebView setup guide

​
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