バックフィル広告は、直接広告がない場合に自動的に代替広告を表示して広告収益を最大化する機能です。
設定方法
1. コンソールで有効化
Adropコンソールで希望する広告ユニットのバックフィル広告を有効化してください。
バックフィル広告設定
コンソールでバックフィル広告を有効化する方法を確認
2. 広告確認
Adropチームの承認後、広告ユニットが収益化中状態になるとバックフィル広告が自動的に表示されます。
登録されたアプリドメインでは追加作業なしで設定された広告枠に自動的に表示されます。
動作方式
- SDKが直接広告をリクエストします。
- 配信可能な直接広告がない場合（
AD_NO_FILL）、バックフィル広告を自動的にリクエストします。
- バックフィル広告もない場合、
AD_BACKFILL_NO_FILLイベントが発生します。
対応フォーマット
現在バックフィル広告はバナー型のみ対応しています。
| 広告ユニットフォーマット | バックフィル広告形態 |
|---|
| バナー | バナー型 |
| ネイティブ | バナー型 |
ネイティブユニットでもバックフィル広告はバナー型で表示されます。
広告サイズ
バックフィル広告はコンテナサイズに合ったクリエイティブを自動的にリクエストします。
- 配置: 横方向中央揃え対応
- サイズ: 指定したサイズで固定表示
開発環境テスト
localhostテスト
- アプリに接続された広告ユニットのうち1つでも収益化中であれば、localhostでもバックフィル広告リクエストが可能です。
- 承認されていないドメインでは広告が受信されず、
AD_BACKFILL_NO_FILLイベントが発生します。
イベント処理
バックフィル広告関連イベントを処理できます。
<script>
const adrop = Adrop.instance();
const filter = { unit: 'YOUR_UNIT_ID' };
// 広告受信（直接広告またはバックフィル）
function handleReceived(unit, adData) {
console.log('広告受信:', adData.format); // 'banner', 'nativeAd', 'backfill'
}
// 直接広告なし（バックフィルリクエスト開始）
function handleNoFill(unit) {
console.log('直接広告なし、バックフィルリクエスト中...');
}
// バックフィル広告もなし
function handleBackfillNoFill(unit) {
console.warn('バックフィル広告なし:', unit);
// 広告領域を非表示にするなどの処理
}
adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
adrop.on(Adrop.Events.AD_NO_FILL, handleNoFill, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);
</script>
主要イベント
| イベント | 定数 | 説明 |
|---|
| 広告受信 | AD_RECEIVED | 直接広告またはバックフィル広告受信 |
| 直接広告なし | AD_NO_FILL | 直接広告なし（バックフィルリクエスト開始） |
| バックフィルなし | AD_BACKFILL_NO_FILL | バックフィル広告もなし |
広告タイプ判別
AD_RECEIVEDイベントのadData.formatで広告タイプを判別できます。
adrop.on(Adrop.Events.AD_RECEIVED, function(unit, adData) {
switch (adData.format) {
case 'banner':
console.log('直接広告（バナー）');
break;
case 'nativeAd':
console.log('直接広告（ネイティブ）');
break;
case 'backfill':
console.log('バックフィル広告');
break;
}
});
広告なし時の処理
直接広告とバックフィル広告の両方がない場合に広告領域を非表示にする例です。
<div id="ad-wrapper">
<div id="ad-container" data-adrop-unit="YOUR_UNIT_ID"></div>
</div>
<script>
const adrop = Adrop.instance();
const wrapper = document.getElementById('ad-wrapper');
const filter = { unit: 'YOUR_UNIT_ID' };
adrop.on(Adrop.Events.AD_RECEIVED, function() {
wrapper.style.display = 'block';
}, filter);
adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, function() {
wrapper.style.display = 'none'; // 広告領域を非表示
}, filter);
</script>
関連ドキュメント
