Skip to main content

​
Audience Targeting

You can target ads based on user properties.

​
1. Create Targeting

First, create audience targeting in Ad Control Console.

Create Targeting

Check how to create audience targeting in the console

​
2. Set User ID

You must set appKey and uid before rendering ads. 
import { Adrop } from '@adrop/ads-web-sdk';

// Set user ID after login
Adrop.instance().setConfig({
  appKey: 'YOUR_APP_KEY',
  uid: 'USER_ID'
});
Complete the setup before entering the ad placement for targeted ads to work properly.

​
3. Set User Properties

Setting user properties enables more sophisticated targeting. 
const adrop = Adrop.instance();

await adrop.metrics
  .setUserProperties({
    // Built-in properties
    adid: 'ADVERTISING_ID',
    birth: '19931225',        // YYYY, YYYYMM, YYYYMMDD
    gender: 'M',              // M, F, U
    locale: 'ko_KR',          // ISO 639
    timeZone: 'Asia/Seoul',   // ISO 8601

    // Custom properties (must be registered in console)
    membership: 'premium',
    interests: 'tech,gaming'
  })
  .setAppProperties({
    appName: 'com.example.app',
    appVersion: '1.0.0',
    appBundleVersion: 100
  })
  .commit();
You must call commit() to save properties to the server. It overwrites rather than merges with existing data, so send all properties together when updating.

​
Built-in Properties

FieldDescriptionFormat
adidAdvertising IDString
birthBirth dateYYYY, YYYYMM, YYYYMMDD
genderGenderM, F, U
localeLocaleISO 639 (ko_KR)
timeZoneTime zoneISO 8601 (Asia/Seoul)

​
App Properties

FieldDescription
appNameApp package ID
appVersionApp version (1.0.0)
appBundleVersionApp build number

​
Device Properties (Auto-collected)

The SDK automatically collects the following device properties. You do not need to set these manually.
FieldDescription
sdkvSDK version
deviceWidthDevice screen width
deviceHeightDevice screen height
osVersionOS version
webViewUserAgentBrowser user agent
platformPlatform (web)

​
Custom Properties

You can set additional properties registered in the console. Values must match the type defined in Ad Control Console. 
await adrop.metrics
  .setUserProperties({
    membership: 'premium',
    lastPurchaseDate: '2024-01-15',
    favoriteCategory: 'electronics'
  })
  .commit();

​
Contextual Targeting

You can target ads based on page or content context.

​
1. Create Targeting

First, create contextual targeting in Ad Control Console.

Create Contextual Targeting

Check how to create contextual targeting in the console

​
2. Set Value on Ad Placement

Pass the Context Value configured in the console when requesting ads.

​
Data Attributes Method

function BannerAd() {
  return (
    <div
      data-adrop-unit="YOUR_UNIT_ID"
      data-adrop-context-id="sport"
    />
  );
}

​
renderAd Method

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: 'sport'
      });
    }

    return () => {
    };
  }, []);

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

​
Dynamic Context Setting

You can set context dynamically based on page or content. 
import { useEffect, useRef } from 'react';
import { Adrop } from '@adrop/ads-web-sdk';

interface AdProps {
  unitId: string;
  category: string;  // Page category
}

function ContextualAd({ unitId, category }: AdProps) {
  const containerRef = useRef<HTMLDivElement>(null);

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

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, {
        unit: unitId,
        contextId: category  // Pass dynamically
      });
    }

    return () => {
    };
  }, [unitId, category]);

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

// Usage example
function SportPage() {
  return (
    <div>
      <h1>Sports News</h1>
      <ContextualAd unitId="NEWS_BANNER" category="sport" />
    </div>
  );
}

function TechPage() {
  return (
    <div>
      <h1>Tech News</h1>
      <ContextualAd unitId="NEWS_BANNER" category="tech" />
    </div>
  );
}

Reference > AdropConfig

Initialization option definitions

Reference > AdropAdRequest

Ad request parameter definitions