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

# ターゲティング設定

> オーディエンスターゲティングとコンテキストターゲティングを設定する方法をご案内します。

## オーディエンスターゲティング

ユーザー属性に基づいて広告をターゲティングできます。

### 1. ターゲティング作成

まずAd Controlコンソールでオーディエンスターゲティングを作成してください。

<Card title="ターゲティング作成" icon="bullseye" href="/ja/targeting/audience">
  コンソールでオーディエンスターゲティング作成方法を確認
</Card>

### 2. ユーザーID設定

広告レンダリング前に`appKey`と`uid`を設定する必要があります。

```tsx theme={null}
import { Adrop } from '@adrop/ads-web-sdk';

// ログイン後にユーザーIDを設定
Adrop.instance().setConfig({
  appKey: 'YOUR_APP_KEY',
  uid: 'USER_ID'
});
```

<Note>
  ターゲティング広告が正常に動作するには、広告枠表示前に設定を完了してください。
</Note>

### 3. ユーザープロパティ設定

ユーザー属性を設定すると、より精密なターゲティングが可能です。

```tsx theme={null}
const adrop = Adrop.instance();

await adrop.metrics
  .setUserProperties({
    // 基本提供属性
    adid: 'ADVERTISING_ID',
    birth: '19931225',        // YYYY, YYYYMM, YYYYMMDD
    gender: 'M',              // M, F, U
    locale: 'ko_KR',          // ISO 639
    timeZone: 'Asia/Seoul',   // ISO 8601

    // カスタム属性（コンソールで登録必要）
    membership: 'premium',
    interests: 'tech,gaming'
  })
  .setAppProperties({
    appName: 'com.example.app',
    appVersion: '1.0.0',
    appBundleVersion: 100
  })
  .commit();
```

<Warning>
  `commit()`を呼び出さないと属性がサーバーに保存されません。既存データとマージされず上書きされるため、更新時にはすべての属性を一緒に送信してください。
</Warning>

### 基本提供属性

| フィールド      | 説明     | 形式                     |
| ---------- | ------ | ---------------------- |
| `adid`     | 広告ID   | 文字列                    |
| `birth`    | 生年月日   | YYYY, YYYYMM, YYYYMMDD |
| `gender`   | 性別     | M, F, U                |
| `locale`   | ロケール   | ISO 639 (ko\_KR)       |
| `timeZone` | タイムゾーン | ISO 8601 (Asia/Seoul)  |

### アプリ属性

| フィールド              | 説明              |
| ------------------ | --------------- |
| `appName`          | アプリパッケージID      |
| `appVersion`       | アプリバージョン（1.0.0） |
| `appBundleVersion` | アプリビルド番号        |

### デバイス属性（自動収集）

SDKが自動的に収集するデバイス属性です。

| フィールド              | 説明             |
| ------------------ | -------------- |
| `sdkv`             | SDKバージョン       |
| `deviceWidth`      | デバイス画面幅        |
| `deviceHeight`     | デバイス画面高さ       |
| `osVersion`        | OSバージョン        |
| `webViewUserAgent` | ブラウザユーザーエージェント |
| `platform`         | プラットフォーム (web) |

### カスタム属性

コンソールで追加登録した属性を設定できます。値はAd Controlコンソールで定義されたタイプに合わせて渡す必要があります。

```tsx theme={null}
await adrop.metrics
  .setUserProperties({
    membership: 'premium',
    lastPurchaseDate: '2024-01-15',
    favoriteCategory: 'electronics'
  })
  .commit();
```

***

## コンテキストターゲティング

ページやコンテンツのコンテキストに応じて広告をターゲティングできます。

### 1. ターゲティング作成

まずAd Controlコンソールでコンテキストターゲティングを作成してください。

<Card title="コンテキストターゲティング作成" icon="tags" href="/ja/targeting/context">
  コンソールでコンテキストターゲティング作成方法を確認
</Card>

### 2. 広告枠に値を設定

コンソールで設定したContext Valueを広告リクエスト時に渡します。

#### Data Attributes方式

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

#### renderAd方式

```tsx theme={null}
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} />;
}
```

### 動的コンテキスト設定

ページやコンテンツに応じて動的にコンテキストを設定できます。

```tsx theme={null}
import { useEffect, useRef } from 'react';
import { Adrop } from '@adrop/ads-web-sdk';

interface AdProps {
  unitId: string;
  category: string;  // ページカテゴリー
}

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  // 動的に渡す
      });
    }

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

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

// 使用例
function SportPage() {
  return (
    <div>
      <h1>スポーツニュース</h1>
      <ContextualAd unitId="NEWS_BANNER" category="sport" />
    </div>
  );
}

function TechPage() {
  return (
    <div>
      <h1>テックニュース</h1>
      <ContextualAd unitId="NEWS_BANNER" category="tech" />
    </div>
  );
}
```

***

## 関連ドキュメント

<CardGroup cols={2}>
  <Card title="リファレンス > AdropConfig" icon="book" href="/ja/sdk/web/reference#adropconfig">
    初期化オプション定義
  </Card>

  <Card title="リファレンス > AdropAdRequest" icon="book" href="/ja/sdk/web/reference#adropadrequest">
    広告リクエストパラメータ定義
  </Card>
</CardGroup>