広告表示のためにreact-adsenseを利用する

Google AdSenseの広告を設置してみましたが、うまく表示されていません。 Gatsbyを用いてSPAでで配信しているためだと思います。どうやら、「react-adsense」というプラグインを利用することで解決できるようなので、それを使ってみました。

結果、広告は正常に表示されました。
自動広告のほうがうまく行かないようなので、様子を見て無効化しようと思います。

発生している現象

管理画面で取得した広告のタグを設置してみているが、正常に表示されません。こんな感じです。

  <ins className={"adsbygoogle"}
       style={{display:'block'}}
       data-ad-client="xxxxxxxxxxxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxxxxxx"
       data-ad-format="auto"
            data-full-width-responsive="true"></ins>
  <script>
  {`
            (adsbygoogle = window.adsbygoogle || []).push({});
  `}
  </script>

広告が表示されない
googleが提供するjsファイルについてはhead内で一度ロードするようにしています。
HTML上には出力されていますが、動的に広告に置き換えられていない様子です。最初の画面では表示されることがあります、しかし画面遷移の場合は表示されません。 SPAで実装していることが原因と考えられます。
pluginの導入により、正しくスクリプトが動作するようになるはずです。
デザインが崩れる
文字が中央寄せになります。自動広告の設定をしているためDOMが書き換えられている様子。
記事のDOMの親として中央寄せのdivが追加されるので、これの仕業だと考えられる。自動広告をOFFにするよう設定したので、時間が経過すれば解決するはず。

プラグインを利用する

プラグインをnpmでインストールします。

npm install --save react-adsense

その後、head内に以下のjsを読み込んでいることを確認、なければ追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

広告を表示したい箇所に以下のタグを挿入。各ページやtemplateに追加します。 clientとslotの箇所は広告のタグに記載の内容を設定します。

import AdSense from 'react-adsense'

~~~

<AdSense.Google 
    client={siteConfig.adClient} 
    slot={siteConfig.adSlot} 
    style={{ display: "block" }} 
    layout="in-article" format="auto" />

結果、広告が正常に表示されるようになりました。非同期でページを取得するたびに、広告を生成するスクリプトが実行されるようになったのだと思います。

詳細は今度調べてみようと思います。