オーディエンスターゲティング
ユーザー属性に基づいて広告をターゲティングできます。
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 () => {
};
}, []);
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 // 動的に渡す
});
}
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>
);
}
関連ドキュメント
