Reactアプリに 開発・本番環境で切り替えて AdSense広告を表示する方法

React でAdSense 広告を掲載する方法は、以下のような手順で実現できます。

1. Google Adsense のサイトで、広告コードを取得します。
2. AdSense 広告のコンポーネントを作成します。
3. Reactのコンポーネント内に広告コンポーネントを埋め込みます。

具体的には、以下のようにして広告を掲載できます。

広告コードを取得

Google Adsense の管理ページに入り、広告ユニットを新規に作成するか、あるいは既存の広告ユニットの広告コードを取得します。

新たな広告ユニットを作成する場合は、[広告ユニットごと] のタブから掲載する広告の種別を選択し作成します。

既存の広告ユニットからコードを取得する場合は、画面下部の一覧より、掲載する広告ユニットの行のコードアイコンをクリックします。

次のコードが作成（または表示）されるため、後から使うためにメモしておきます。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告コンポーネントの作成

AdSense 広告ユニットを表示する、React コンポーネントを作ります。
localhost などの開発系では AdSense 広告は表示できないため、その場合はダミーの広告枠を表示するような作りにします。

import React, { useEffect } from 'react'

const hostname = "example.com"  //本番サイトのホスト名

function Adsense() {
  useEffect(() => {
    if (window.location.hostname == hostname) {
      window.adsbygoogle = window.adsbygoogle || [];
      window.adsbygoogle.push({});
    }
  }, []);

  return (
    <div>
      {window.location.hostname == hostname ?
      (
        <ins className="adsbygoogle"
        style={{display: "block", textAlign: "center"}}
        data-ad-layout="in-article"
        data-ad-format="fluid"
        data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
        data-ad-slot="XXXXXXXXX"></ins>
      ) :
      (
        <div style={{ padding: "10px", border: "1px solid #333" }}>
          広告
        </div>
      )}
    </div>
  )
}

export default Adsense

以下の点は、個別に修正が必要です。

1. hostname 変数に広告を掲載する本番サイトのホスト名を入れる
2. <ins> タグの内容は、取得した広告ユニットの内容に合わせて修正

TypeScriptで実装する場合は

TypeScript で実装する場合、window.adsbygoogle の部分で、オブジェクト未定義の Lint のエラーが発生するため、adsbygoogle オブジェクトの型定義をしておきます。

declare global {
  // eslint-disable-next-line no-unused-vars
  interface Window {
    adsbygoogle: any;
  }
}

広告を配置する

ここまで来たら、あとは上で作成した Adsense コンポーネントを、広告を配置したいところに組み込むだけです。

import Adsense from  './Adsense';

function Sample() {
  return (
    <> 
      <div>記事の内容...</div>
      {/* 広告 */}
      <Adsense/>
      <div>記事の内容...</div>
    </>
  )
}

ラベル表示（スポンサーリンク）を追加する

Google Adsenseの利用規約に、画像（または動画）に隣接した場所に広告を表示する場合、誤クリックを防ぐために「スポンサーリンク」または「広告」のラベル表示することがポリシーで定められています。それ以外にも、コンテンツと広告を密接させすぎるのもNGと言われています。

ポリシー違反などで、アカウントを停止されないためにも、この辺りは守っておきたいところです。

次のコードは、広告コンポーネントの HTML を一部修正し、「スポンサーリンク」のラベル表示、広告の上下にマージンを設けるサンプルです。

function Adsense() {
  
  //中略
  
  return (
    <div style={{margin: "1.5rem 0"}}>
      <div  style={{fontSize: "13px"}}>スポンサーリンク</div>
      {window.location.hostname == hostname ?
      (
        <ins className="adsbygoogle"
        style={{display: "block", textAlign: "center"}}
        data-ad-layout="in-article"
        data-ad-format="fluid"
        data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
        data-ad-slot="XXXXXXXXX"></ins>
      ) :
      (
        <div style={{ padding: "10px", border: "1px solid #333" }}>
          広告
        </div>
      )}
    </div>
  )
}

まとめ

Google Adsenseの利用規約に違反しないように、実装することが必要です。 そのため、掲載するサイトのジャンルや広告の表示箇所が Google Adsenseのポリシーやガイドラインに従っているか確認しましょう。