AstroJSでGoogleアドセンスを実装する際の修正項目

当サイトではアフィリエイト広告を利用しています

AstroJSを利用する際、Googleアドセンスを実装するには少し修正が必要でした。

本記事ではその修正内容をまとめます。

元ソース

Googleアドセンス公式の広告コードは次のようになっているかと思います。

これをそのままAstroJSでの.astroコンポーネントで利用すると想定した挙動を示してくれません。

<script
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
   crossorigin="anonymous"
></script>
<ins
   class="adsbygoogle"
   style="display:block"
   data-ad-client="ca-pub-xxxxxxxxxx"
   data-ad-slot="xxxxxxxxxx"
   data-ad-format="auto"
   data-full-width-responsive="true"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

対策

GoogleアドセンスをAstroで実装するには次のようにastroコンポーネントを記述してbodyタグ内に配置します。

ポイントとしてはscriptをis:inlineと指定することで、これによってモジュールスクリプトとして別ファイルに別れることを防いでいます。

アドセンスのOn/Offを制御したい場合、script部分の分離を防がないとOffとした際でも勝手にモジュールスクリプト部分だけ読み込まれたりしてしまいます。

<div>
  <script
    is:inline
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
    crossorigin="anonymous"
  ></script>
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-xxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
  <script is:inline>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>