오디언스 타겟팅
사용자 속성을 기반으로 광고를 타겟팅할 수 있습니다.
1. 타겟팅 생성
먼저 애드컨트롤 콘솔에서 오디언스 타겟팅을 생성하세요.
타겟팅 생성하기
콘솔에서 오디언스 타겟팅 생성 방법 확인
2. 사용자 ID 설정
광고 렌더링 전에 appKey와 uid를 설정해야 합니다.
import Adrop from '@adrop/ads-web-sdk';
// 로그인 후 사용자 ID 설정
Adrop.instance().setConfig({
appKey: 'YOUR_APP_KEY',
uid: 'USER_ID'
});
타겟팅 광고가 정상 동작하려면 광고 지면 진입 전에 설정을 완료하세요.
3. 사용자 프로퍼티 설정
사용자 속성을 설정하면 더 정교한 타겟팅이 가능합니다.
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();
commit()을 호출해야 속성이 서버에 저장됩니다. 기존 데이터와 병합되지 않고 덮어씌워지므로, 업데이트 시 모든 속성을 함께 전송하세요.
기본 제공 속성
| 필드 | 설명 | 형식 |
|---|
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 | 앱 빌드 번호 |
커스텀 속성
콘솔에서 추가 등록한 속성을 설정할 수 있습니다. 값은 애드컨트롤 콘솔에서 정의한 타입에 맞게 전달해야 합니다.
await adrop.metrics
.setUserProperties({
membership: 'premium',
lastPurchaseDate: '2024-01-15',
favoriteCategory: 'electronics'
})
.commit();
문맥 타겟팅
페이지나 콘텐츠의 문맥에 따라 광고를 타겟팅할 수 있습니다.
1. 타겟팅 생성
먼저 애드컨트롤 콘솔에서 문맥 타겟팅을 생성하세요.
문맥 타겟팅 생성하기
콘솔에서 문맥 타겟팅 생성 방법 확인
2. 광고 지면에 값 설정
콘솔에서 설정한 Context Value를 광고 요청 시 전달합니다.
Data Attributes 방식
function BannerAd() {
return (
<div
data-adrop-unit="YOUR_UNIT_ID"
data-adrop-context-id="sport"
/>
);
}
renderAd 방식
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} />;
}
동적 문맥 설정
페이지나 콘텐츠에 따라 동적으로 문맥을 설정할 수 있습니다.
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>
);
}
관련 문서
