はじめに
前回はGitHub ActionsでFTP自動デプロイを構築しました。
今回はGoogle AdSenseをAstroサイトに設置します。
WordPressと同様、スクリプトをheadに入れるだけで自動広告が機能しました。
ただしAstro特有の注意点があります。
ads.txt を設置する
AdSense管理画面で「ads.txtが見つかりません」と表示される場合は、public/ads.txt を作成します。
これはこれまで通りの話になります。
# public/ads.txt
google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0pub-XXXXXXXXXXXXXXXX はAdSense管理画面に表示される自分のパブリッシャーIDに変更してください。
public/ フォルダに置いたファイルはAstroのビルド後にサイトルートへそのまま公開されます。
WordPressで設定済みの ads.txt があれば内容をそのままコピーして使えます。
スクリプトを設置する
src/layouts/Layout.astro の <head> 内に追加します。
<!-- Google AdSense -->
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
crossorigin="anonymous"
is:inline
></script>ca-pub-XXXXXXXXXXXXXXXX を自分のパブリッシャーIDに変更してください。
is:inline が必須な理由
Astroは <script> タグをデフォルトでバンドル処理します。
バンドル処理されると外部スクリプトのURLが変わったり、属性が消えたりして広告スクリプトが正しく動作しません。
is:inline を付けることで、Astroの処理をバイパスしてHTMLにそのまま出力されます。
AdSenseに限らず、外部広告スクリプトをAstroで使う場合は is:inline が必要です。
注意点
- AdSenseの審査には数日〜数週間かかる場合があります
- 審査通過後に自動広告が表示されます
- 審査中は広告が表示されないため、スクリプトが正しく設置できているか確認しにくいです。AdSenseの管理画面でエラーが表示されていなければ問題ありません
まとめ
AstroでのAdSense設置は is:inline を忘れなければWordPressと同じ感覚で設置できます。
次回はGoogle Analytics GA4の設置と、AstroのView Transitions対応について紹介します。