WordPressからAstroへ移行した話（7）The Moneytizer広告の移行

はじめに

前回はGA4のView Transitions対応を紹介しました。
今回はWordPressのCocoonテーマで使っていたThe Moneytizerの広告をAstroへ移行します。

WordPressとAstroの対応関係

Cocoonテーマでは「ヘッド用コード」と「フッター用コード」の設置場所に分けていた内容を、それぞれAstroの対応する箇所に配置します。

WordPress（Cocoon）	Astro
ヘッド用コード	`src/layouts/Layout.astro` の `<head>`
フッター用コード	`src/components/Footer.astro`

CMPスクリプトをheadに設置する

src/layouts/Layout.astro の <head> の先頭（<meta charset> より前）に配置します。
CMP（同意管理プラットフォーム）は他のスクリプトより先に読み込まれる必要があるため、位置が重要です。

The Moneytizer管理画面から取得したInMobi Choice（CMP）のコードを貼り付けます。

<!-- InMobi Choice. Consent Manager Tag v3.0 (for TCF 2.3) -->
<script type="text/javascript" async=true is:inline>
  /* The Moneytizerから取得したCMPコード */
</script>

is:inline を追加することを忘れないでください。

src/components/Footer.astro の <footer> タグの前に追加します。

<div class="app-layout py-4">
  <div id="XXXXXX-N">
    <script src="//ads.themoneytizer.com/s/gen.js?type=N" is:inline></script>
    <script src="//ads.themoneytizer.com/s/requestform.js?siteId=XXXXXX&formatId=N" is:inline></script>
  </div>
</div>

<footer ...>
  <!-- 元々のfooterの内容 -->
</footer>

siteId と formatId はThe Moneytizer管理画面で確認できる自分の数値に変更してください。

is:inline が必要な理由

AstroはデフォルトでJavaScriptをバンドル処理します。
外部広告スクリプト（src="//ads.themoneytizer.com/..." など）はAstroがバンドルしようとしても処理できないため、エラーになったり無効になったりします。

is:inline を付けることでAstroのバンドル処理をバイパスし、HTMLにそのまま出力されます。 The Moneytizer以外の外部広告スクリプト全般に同じことが言えます。

CMPは必ず先頭に

CMPスクリプトがGAやAdSenseより後に読み込まれると、ユーザーの同意を取得する前に広告が配信されてしまいます。
GDPR対応の観点から、CMPは必ず他のスクリプトより前に配置してください。

まとめ

The MoneytizerのAstroへの移行は、配置場所の対応関係を把握して is:inline を付ければWordPressとほぼ同じ手順で完了します。

これでWordPress→Astro移行シリーズ全7回が完結です。
セットアップから記事移行、デプロイ、各種外部サービスの設置まで一通りカバーできました。

同じ移行を検討している方の参考になれば幸いです。