Getting Started

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

yarn add @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)

string

required

App ID issued from Ad Control Console

string

User identifier (used for targeting)

string

API authentication key (required for updating user properties)

boolean

default:false

Enable debug logging

'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 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

Banner Ads

Implement banner ads

Native Ads

Implement native ads

Targeting

Audience/Contextual targeting

Reference

Classes, interfaces, constants

Examples

React, CDN example code

SDK Guide

AI

Android

iOS

React Native

Flutter

Web

REST API

Overview

Supported Ad Formats

Requirements

Installation

Initialization

Initialization Options (AdropConfig)

Instance Access

Dynamic Configuration Updates

WebView Setup (For Backfill Ads)

Android Setup

iOS Setup

Table of Contents

Banner Ads

Native Ads

Targeting

Reference

Examples

​Overview

​Supported Ad Formats

​Requirements

​Installation

​Initialization

​Initialization Options (AdropConfig)

​Instance Access

​Dynamic Configuration Updates

​WebView Setup (For Backfill Ads)

Android Setup

iOS Setup

​Table of Contents

Banner Ads

Native Ads

Targeting

Reference

Examples

Overview

Supported Ad Formats

Requirements

Installation

Initialization

Initialization Options (AdropConfig)

Instance Access

Dynamic Configuration Updates

WebView Setup (For Backfill Ads)

Table of Contents