WEBサイトで配信する広告には複数の種類があり、広告によって配信方法が異なります。
そこで、Reactでそれらの広告を配信する簡単なサンプルの提示と、それらの広告の特徴と比較について書きます。

• 広告の種類
• 広告の表示方法と問題点
• 広告配信中での問題点

広告の種類

•  FlexOne
• GAM（Google Ad Manager）& GPT
• Google AdSense
• Yahoo 広告
• Outbrain

FlexOne

FlexOneとは

https://solutions.hakuhodody-one.co.jp/flexone

• 運営者が広告を FlexOne に登録し、収益最適化を FlexOne が自動で行う
• 様々な広告フォーマット（バナー、ネイティブ、動画）に対応
• クリック率や単価の高い広告を優先的に配信
• 特定のページやユーザー属性に応じて広告を出し分け

実装方法

1. インスタンス ID を生成
2. 広告リクエストを送信
3. 広告を表示

export const FlexOneAd = () => {
  const instanceId = String(Date.now());
  const baseId = "12345";
  const uniqueId = `${baseId}_${instanceId}`;

  useEffect(() => {
    window.TagProvider.requestAds({
      sectionId: {広告ID},
      dmp: false,
      sync: false,
      pageIdModifier: instanceId,
      instance: instanceId,
    });
  }, [instanceId]);

  useEffect(() => {
    window.TagProvider.displayAd(uniqueId);
  }, [uniqueId]);

  return <div id={uniqueId} />;
};

問題点その1

1ページにFlexOneの複数の広告を同時に表示するには、「同一タグ複数呼び出し」の設定を行う。広告リクエストに失敗したととき、再リクエストを送信する処理を記述。

const doEffect = useCallback(() => {
  try {
    window.TagProvider.requestAds({
      sectionId: {広告ID},
      dmp: false,
      sync: false,
    });
  } catch (e) {
    console.error('FlexOneAd failed', e);
  }
}, [{広告ID}]);

if (state === 'error') {
  const html = `
    <div id="{広告ID}">
      <script>
        try {
          TagProvider.displayAd('{広告ID}');
        } catch {}
      </script>
    </div>
  `;

  return (
    <DangerouslySetHTML
      html={html}
      allowRerender
      doEffect={doEffect}
    />
  );
}

問題点その2

広告の配置をページごとに適切にコントロールするには、「ページ内グループ化」の設定を行う。pageIdModifier をページごとにグループ化することで実現。

window.TagProvider.requestAds({
  sectionId: {広告ID},
  sync: false,
  dmp: false,
  instance: String(Date.now()),
  pageIdModifier: "123456", // グループ化
});

Google Ad Manager(GAM)

Google Ad Managerとは

• Google Ad Manager（以下 GAM）は、Google Publisher Tag（以下 GPT）と連携して広告を配信
• GAM + GPT を組み合わせることで、サイト運営者側で配信する広告を制御できる
• 広告の入札を管理して、広告を配信

実装方法

1. GPTスクリプトを読み込む
2. バナー広告スロットを作成(defineSlot)
3. インタースティシャル広告スロットを作成(defineOutOfPageSlot)
4. R-18ターゲティングがあれば適用(setTargeting)
5. 広告を一括リクエスト(enableSingleRequest)
6. 広告サービスを有効化し(enableServices)
7. 広告をページ上に描画(display)
8. コンポーネントがアンマウントされたら、広告スロットを破棄(destroySlots)

export const GPTAd = () => {

  useEffect(() => {
    window.googletag.cmd.push(() => {
    　const slot = googletag.defineSlot("/1234567/homepage", [300, 250], "gpt-ad")
      slot.addService(window.googletag.pubads());
      
      if (R18) {
　　　　window.googletag.pubads().setTargeting('page-attributes', ['R-18']);
      }

      const interstitialSlot = window.googletag.defineOutOfPageSlot(
      　"/1234567/interstitial",
      　window.googletag.enums.OutOfPageFormat.INTERSTITIAL,
      )
      interstitialSlot.addService(googletag.pubads());
      
      window.googletag.pubads().enableSingleRequest();
      window.googletag.enableServices();

      window.googletag.display(slot);
      window.googletag.display(interstitialSlot);
    });

    return () => {
      window.googletag.cmd.push(() => {
        window.googletag.destroySlots([slot, interstitialSlot]);
      });
    };
  }, []);

  return (
    <>
     <Script
       async
       strategy="afterInteractive"
       src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
     />
     <Script
       id="gpt-object"
       strategy="afterInteractive"
       dangerouslySetInnerHTML={{
         __html: `window.googletag = window.googletag || {cmd: []};`,
       }}
     />

     <div>
       {/* バナー広告用のコンテナ */}
       <div id="gpt-ad" />

       {/* インタースティシャル広告用のコンテナは自動で作成されるので記述無し */}
     </div>
    </>
  );
};

デバッグ方法

Google Publisher Console でデバッグを行う。

Google AdSense

実装方法

SPAやNext.jsのSSGで開発したとき、ページごとの切替時に広告を再読み込みする処理を入れるため、ランダムキーをセットして変更ごとに広告を読み込ませる処理を記述。

<Script
 async // スクリプトを非同期で読み込む（ページのレンダリングをブロックしない）
 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" // 広告スクリプトのURL
 crossOrigin="anonymous" // 他のドメインのスクリプトをロードする際に、ユーザーのクッキーや認証情報を送らない安全なクロスオリジンリクエスト
 strategy="beforeInteractive" // Next.jsのScriptのロード戦略（インタラクティブ前に読み込む）
/>

export const AdsenseAd = (props) => {
  const { slotId } = props;
  const randomKey = Math.random();

  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, [randomKey]);

  return (
    <aside key={randomKey}>
      <ins
        data-ad-client="12345"
        data-ad-slot={slotId}
        data-matched-content-rows-num="1,1"
        data-matched-content-columns-num="2,4"
        data-matched-content-ui-type="image_stacked,image_stacked"
        data-ad-format="autorelaxed"
      ></ins>
    </aside>
  );
};

問題点

ローカル環境や開発環境（dev）では、ドメイン制限により広告表示が不可。

GAM / AdSense / FlexOne の比較表