Targeting Settings

Learn how to configure audience targeting and contextual targeting.

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

Field	Description	Format
adid	Advertising ID	String
birth	Birth date	YYYY, YYYYMM, YYYYMMDD
gender	Gender	M, F, U
locale	Locale	ISO 639 (ko_KR)
timeZone	Time zone	ISO 8601 (Asia/Seoul)

App Properties

Field	Description
appName	App package ID
appVersion	App version (1.0.0)
appBundleVersion	App build number

Device Properties (Auto-collected)

The SDK automatically collects the following device properties. You do not need to set these manually.

Field	Description
sdkv	SDK version
deviceWidth	Device screen width
deviceHeight	Device screen height
osVersion	OS version
webViewUserAgent	Browser user agent
platform	Platform (web)

Custom Properties

You can set additional properties registered in the console. Values must match the type defined in Ad Control Console. Property names must be 3–64 characters long and use only lowercase letters, numbers, and underscores (_). See Property Naming Rules.

await adrop.metrics
  .setUserProperties({
    membership: 'premium',
    last_purchase_date: '2024-01-15',
    favorite_category: '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 ID configured in the console when requesting ads.

• Context IDs are case-sensitive and must exactly match a value entered in a context targeting option’s condition in the console.
• Do not use commas (,) in Context IDs, because a comma separates multiple values both in the console and in an ad request. When requesting ads, pass the value exactly as entered in the console, without leading or trailing spaces.
• To match more than one context in a single request, pass a comma-separated value such as hiking,outdoor. The first 5 IDs are used, and exclusion takes precedence over inclusion. See Passing Multiple Context IDs.
• If you don’t pass a Context ID, or pass a value that isn’t registered in the console, no error occurs. Only campaigns with context targeting are excluded, and other ads can still be served.

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>
  );
}

---

Related Documentation

Reference > AdropConfig

Initialization option definitions

Reference > AdropAdRequest

Ad request parameter definitions