[Astro] 広告連携（Google AdSense）

概要

前回の記事コメントシステム（Utterances）でコメントシステムを扱いました。今回の記事ではブログ収益化のためのGoogle AdSense広告連携方法を説明します。

広告連携は大きく2つの部分に分かれます。1つ目はポストレイアウトの固定位置（上部、下部、左右）に広告を配置すること、2つ目はマークダウンコンテンツの途中に広告を挿入することです。後者のためにカスタムrehypeプラグインを開発しました。

AdSenseスクリプトロード

Head.astroでGoogle AdSenseスクリプトをロードします。このスクリプトはすべてのページでロードされる必要があり、そうでないと広告が正常に表示されません。

<!-- src/components/Head.astro -->
<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
  crossorigin="anonymous"
></script>

async属性を使用してページロードをブロックしないようにします。

広告コンポーネント

広告の配置位置ごとに個別のコンポーネントを作って管理します。このように分離すると各位置の広告を独立して修正したり無効化したりできます。

src/components/ads/
├── TopAds.astro      # ポスト上部
├── BottomAds.astro   # ポスト下部
├── LeftAds.astro     # 左サイド
├── RightAds.astro    # 右サイド
└── InFeedAds.astro   # コンテンツ内（フィード）

各コンポーネントはAdSense広告コードを含み、PostLayout.astroで適切な位置に配置します。

<!-- src/layouts/PostLayout.astro -->
<TopAds />

<div class="container container-contents">
  <div class="row">
    <LeftAds />
    <article class="col-lg-8 col-md-10 mx-auto" data-pagefind-body>
      <slot />  <!-- マークダウンコンテンツ -->
      <InFeedAds />
    </article>
    <RightAds />
  </div>

  <BottomAds />
</div>

ads.txt設定

広告詐欺防止のためにpublic/ads.txtとpublic/app-ads.txtファイルを配置します。このファイルはGoogle AdSenseが提供する認証情報を含み、「このサイトでこの広告ネットワークだけが広告を掲載できる」ということを検証する役割を果たします。

public/ディレクトリに配置するとビルド時にdist/ディレクトリにそのままコピーされ、https://deku.posstree.com/ads.txtでアクセスできます。

カスタムrehype-in-feed-adsプラグイン

レイアウトに固定配置する広告以外に、マークダウンコンテンツの途中にも広告を挿入したい場合があります。このためにrehype-in-feed-adsプラグインを開発しました。

使い方

マークダウンファイルで広告を入れたい位置にコメントを書くだけです。

## セクション1

内容...

<!-- ad -->

## セクション2

内容...

ビルド時にコメントが自動的にAdSense広告ブロックに置換されます。

プラグイン実装

プラグインはHAST（HTML構文ツリー）を再帰的に巡回しながらコメントノードを見つけて広告HTMLに置換します。

// src/plugins/rehype-in-feed-ads.mjs
const AD_HTML = `<div class="in-feed-ads ads-container">
  <div class="ads-block ads-left">
    <ins class="adsbygoogle" ... data-ad-slot="2718813593"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
  <div class="ads-block ads-center">
    <ins class="adsbygoogle" ... data-ad-slot="6492035359"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>`;

function replaceInChildren(children) {
  const result = [];
  for (const child of children) {
    if (
      child.type === 'raw' &&
      child.value &&
      child.value.trim() === '<!-- ad -->'
    ) {
      result.push(createAdNode());
    } else if (child.type === 'comment' && child.value.trim() === 'ad') {
      result.push(createAdNode());
    } else {
      if (child.children) {
        child.children = replaceInChildren(child.children);
      }
      result.push(child);
    }
  }
  return result;
}

export default function rehypeInFeedAds() {
  return (tree) => {
    if (!tree.children) return;
    tree.children = replaceInChildren(tree.children);
  };
}