> ## 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. 타겟팅 생성

먼저 애드컨트롤 콘솔에서 오디언스 타겟팅을 생성하세요.

<Card title="타겟팅 생성하기" icon="bullseye" href="/ko/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)    |

### 커스텀 속성

콘솔에서 추가 등록한 속성을 설정할 수 있습니다. 값은 애드컨트롤 콘솔에서 정의한 타입에 맞게 전달해야 합니다.

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

***

## 문맥 타겟팅

페이지나 콘텐츠의 문맥에 따라 광고를 타겟팅할 수 있습니다.

### 1. 타겟팅 생성

먼저 애드컨트롤 콘솔에서 문맥 타겟팅을 생성하세요.

<Card title="문맥 타겟팅 생성하기" icon="tags" href="/ko/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 <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  // 동적으로 전달
      });
    }

  }, [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="/ko/sdk/web/reference#adropconfig">
    초기화 옵션 정의
  </Card>

  <Card title="레퍼런스 > AdropAdRequest" icon="book" href="/ko/sdk/web/reference#adropadrequest">
    광고 요청 파라미터 정의
  </Card>
</CardGroup>