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

​
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