メインコンテンツへスキップ

​
概要

バックフィル広告は、ダイレクト広告がない場合に自動的に代替広告を表示し、広告収益を最大化する機能です。

​
設定方法

​
1. コンソールで有効化

アドコントロールコンソールで希望する広告ユニットのバックフィル広告を有効化してください。

バックフィル広告設定

コンソールでバックフィル広告を有効化する方法を確認

​
2. 広告確認

Adropチーム承認後、広告ユニットが収益化中の状態になると、バックフィル広告が自動的に表示されます。
登録されたアプリドメインでは追加作業なしで設定された広告枠に自動的に表示されます。

​
動作方式

  1. SDKがダイレクト広告をリクエストします。
  2. 配信可能なダイレクト広告がない場合（AD_NO_FILL）、バックフィル広告を自動的にリクエストします。
  3. バックフィル広告もない場合はAD_BACKFILL_NO_FILLイベントが発生します。

​
サポートフォーマット

現在、バックフィル広告はバナー型のみサポートしています。
広告ユニットフォーマットバックフィル広告形態
バナーバナー型
ネイティブバナー型
ネイティブユニットでもバックフィル広告はバナー型で表示されます。

​
広告サイズ

バックフィル広告は、コンテナサイズに合う素材を自動的にリクエストします。
  • 幅：初期合わせ
  • 高さ：必須（適切な高さを指定）
  • 配置：水平中央揃え対応

​
開発環境テスト

​
localhostテスト

  • アプリに接続された広告ユニットの1つでも収益化中であれば、localhostでもバックフィル広告リクエストが可能です。
  • ただし、localhostでは実際の広告は配信されず、AD_BACKFILL_NO_FILLイベントが発生します。
  • 実際のバックフィル広告を受信するには、localhostではなくアプリに登録されたドメインでリクエストする必要があります。

​
イベント処理

バックフィル広告関連イベントを処理できます。 
import { useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function BannerAd({ unitId }: { unitId: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const adrop = Adrop.instance();
    const filter = { unit: unitId };

    // 広告受信（ダイレクト広告またはバックフィル）
    const handleReceived = (unit: string, adData: any) => {
      console.log('広告受信:', adData.format);  // 'banner', 'nativeAd', 'backfill'
    };

    // ダイレクト広告なし（バックフィルリクエスト開始）
    const handleNoFill = (unit: string) => {
      console.log('ダイレクト広告なし、バックフィルリクエスト中...');
    };

    // バックフィル広告もなし
    const handleBackfillNoFill = (unit: string) => {
      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);

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, { unit: unitId });
    }

    return () => {
      adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
      adrop.off(Adrop.Events.AD_NO_FILL, handleNoFill);
      adrop.off(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill);

    };
  }, [unitId]);

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

​
主要イベント

イベント定数説明
広告受信AD_RECEIVEDダイレクト広告またはバックフィル広告受信
ダイレクト広告なしAD_NO_FILLダイレクト広告なし（バックフィルリクエスト開始）
バックフィルなしAD_BACKFILL_NO_FILLバックフィル広告もなし

​
広告タイプの区別

AD_RECEIVEDイベントのadData.formatで広告タイプを区別できます。 
adrop.on(Adrop.Events.AD_RECEIVED, (unit, adData) => {
  switch (adData.format) {
    case 'banner':
      console.log('ダイレクト広告（バナー）');
      break;
    case 'nativeAd':
      console.log('ダイレクト広告（ネイティブ）');
      break;
    case 'backfill':
      console.log('バックフィル広告');
      break;
  }
});

​
広告なし処理

ダイレクト広告とバックフィル広告の両方がない場合に広告領域を非表示にする例です。 
import { useState, useEffect, useRef } from 'react';
import Adrop from '@adrop/ads-web-sdk';

function BannerAd({ unitId }: { unitId: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [hasAd, setHasAd] = useState(true);

  useEffect(() => {
    const adrop = Adrop.instance();
    const filter = { unit: unitId };

    const handleReceived = () => {
      setHasAd(true);
    };

    const handleBackfillNoFill = () => {
      setHasAd(false);  // 広告領域を非表示
    };

    adrop.on(Adrop.Events.AD_RECEIVED, handleReceived, filter);
    adrop.on(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill, filter);

    if (containerRef.current) {
      adrop.renderAd(containerRef.current, { unit: unitId });
    }

    return () => {
      adrop.off(Adrop.Events.AD_RECEIVED, handleReceived);
      adrop.off(Adrop.Events.AD_BACKFILL_NO_FILL, handleBackfillNoFill);

    };
  }, [unitId]);

  if (!hasAd) return null;

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

​
関連ドキュメント

リファレンス > Events

イベント定数定義

リファレンス > ErrorCode

エラーコード定義