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>