> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Targeting Settings

> Learn how to configure audience targeting and contextual targeting using CDN.

## Audience Targeting

You can target ads based on user properties.

### 1. Create Targeting

First, create audience targeting in Ad Control Console.

<Card title="Create Targeting" icon="bullseye" href="/targeting/audience">
  Check how to create audience targeting in the console
</Card>

### 2. Set User ID

You must set `appKey` and `uid` before rendering ads.

```javascript theme={null}
Adrop.instance().setConfig({
  appKey: 'YOUR_APP_KEY',
  uid: 'USER_ID'
});
```

<Note>
  Complete the setup before rendering the ad placement for targeted ads to work properly.
</Note>

### 3. Set User Properties

Setting user properties enables more sophisticated targeting.

```javascript theme={null}
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();
```

<Warning>
  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.
</Warning>

### 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.

```javascript theme={null}
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.

<Card title="Create Contextual Targeting" icon="tags" href="/targeting/context">
  Check how to create contextual targeting in the console
</Card>

### 2. Set Value on Ad Placement

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

#### Data Attributes Method

```html theme={null}
<div
  data-adrop-unit="YOUR_UNIT_ID"
  data-adrop-context-id="sport">
</div>
```

#### renderAd Method

```javascript theme={null}
const container = document.getElementById('ad-container');
const adrop = Adrop.instance();

adrop.renderAd(container, {
  unit: 'YOUR_UNIT_ID',
  contextId: 'sport'
});
```

### Dynamic Context Setting

You can set context dynamically based on page or content.

```html theme={null}
<div id="news-ad" data-adrop-unit="NEWS_BANNER"></div>

<script>
  // Set context based on page category
  const category = document.body.getAttribute('data-category'); // 'sport', 'tech', etc.
  const container = document.getElementById('news-ad');

  Adrop.instance().renderAd(container, {
    unit: 'NEWS_BANNER',
    contextId: category
  });
</script>
```

***

## Related Documentation

<CardGroup cols={2}>
  <Card title="Reference > AdropConfig" icon="book" href="/sdk/web/reference#adropconfig">
    Initialization option definitions
  </Card>

  <Card title="Reference > AdropAdRequest" icon="book" href="/sdk/web/reference#adropadrequest">
    Ad request parameter definitions
  </Card>
</CardGroup>