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


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


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

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


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({});
  };
componentDidMount なので、Mount 後に実行されているのかと思います。
レイアウトとして、横幅が確保できていないと考え、Card タグで、囲ったところ上手く広告が表示されるようになりました。

参考

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

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

コメント