react google-adsense の 組み込み方法について

react の blog に google-adsense を組み込む際に調べたことと、やったことを記載します。

[TOC]

react での google-adsense の組み込み方法

検索したところ、スクラッチで作成している記事、ライブラリが幾つか見つかりましたので、リンクを記載します。

• スクラッチ で作成する

  • javascript - How to embed google adsense in react js - Stack Overflow

  • How to incorporate Google AdSense with React.js

• ライブラリ

  • hustcc/react-adsense: a simple React-component for Google AdSense / Baidu advertisement.

  • wonism/react-google-ads: React component for google adsense

• GTMを使う
  react とは あまり関係ないですが、GTM から google-adsense を配信してしまえば、react で google-adsense を組み込む必要はなくなります。

  • Google Tag ManagerをつかったAdsense設置方法 – ejtter.com 解析新書 Analyzing Tables

  • GTMを使ってAdsenseのタグを貼り付ける方法 | B2B マーケティング ウェイ

react-adsense を使った

自前で実装してもあまりかわらないかもですが、以下、react-adsense を使用することにしました。
hustcc/react-adsense: a simple React-component for Google AdSense / Baidu advertisement.

• react-adsense のインストール
  

  npm install --save react-adsense
  

• google-adsense の 読み込み記述を追加する
  

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

• AdSend.Google タグを追加
  

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

• エラーが出たので、Card タグで囲み、layout="in-article" を除去
  下記エラーが発生していたので、タグを最終的に以下のように記述しました。
  Card は、jamesmfriedman/rmwc: A React wrapper for Material Design (Web) Components のコンポーネントになります。div なりで横幅を確保すれば、表示されるようになるのかと思います。
  

  <Card key="adBottomDetail">
      <AdSense.Google 
          client={siteConfig.adClient} 
          slot={siteConfig.adSlot} 
          style={{ display: "block" }} 
          format="auto" />
  </Card>
  

設置後のエラー

上記タグを設置後に、サイト上で確認すると以下のエラーが発生していました。
No slot size for availableWidth=0
広告表示枠のサイズが確保できていないというエラーで、対処方法としては、JavaScriptの呼び出しタイミングを変更すると解消される旨の記載があったのですが、hustcc/react-adsense: a simple React-component for Google AdSense / Baidu advertisement. の実装としては、以下のようになっており、今回表示できていない原因は、JavaScript のタイミングではないことはわかりました。

export default class Google extends React.Component {
  componentDidMount() {
    if(window) (window.adsbygoogle = window.adsbygoogle || []).push({});
  };

参考

javascript - Google Adsense Error “TagError: adsbygoogle.push() error: No slot size for availableWidth=0 ” - Stack Overflow
Google Adsenseの広告 が表示されない原因について | T&N リサーシャ

これで広告が表示できるようになりました。
以上です。