LocalhostでGoogle AdSenseを表示してテストする

Problem

GatsbyサイトでGoogle adsenseを表示する

前回の記事でGatsbyのサイトにGoogle AdSenseを追加する方法を書いたが、ひとつだけ不便な点がある。
Localhostでサイトをチェックしている段階では広告が表示されない。 これはおそらく特定のドメインでしか広告を表示しないようになっているからだと考えられる。

Solution

まずは広告のコンポーネントにdata-adtest="on"とプロパティを追加する。

<ins 
  className="adsbygoogle"
  style={{ "display": "block" , textAlign: "center"  }}
  data-ad-client="<YOUR_GOOGLE_AD_CLIENT_ID>"
  data-ad-slot="<YOUR_GOOGLE_AD_SLOT>"
  data-ad-format="auto"
  data-adtest="on" // <- this one
  data-full-width-responsive="true"
/>

次に /etc/hosts というファイルを編集してエイリアスを作成する。
まずは以下のコマンドで /etc/hosts の中身をチェックしてみる。

cat /etc/hosts

たいていの場合、すでにlocalhostのエイリアスが書いてあるはず。

127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost

普段、URL欄に「localhost」と入力してページが表示されるのは、ここでエイリアスが設定されているからである。

ここに新しいエイリアスを追加する。

sudo nano /etc/hosts
or 
sudo vim /etc/hosts

127.0.0.1 dev.<YOUR DOMAIN>.com

<YOUR DOMAIN>の部分は当然Google AdSenseで登録しているドメインと同じにする。

あとは dev.<YOUR DOMAIN>.com にアクセスすれば広告が確認できるはず。