GatsbyJS サイトに Google Adsense を導入する方法 (2023 年版)

1. はじめに

GatsbyJS を使用して作成した Web サイトに Google Adsense を導入する方法は，既に様々なものがインターネット上に公開されています。しかし，これらの情報の中には古くなったり，現在の環境での動作が保証されないものも散見されます。そこで本記事では，執筆時点で確認できる方法を調査・検証した結果を記述します。

2. プラグイン

まず初めにプラグインを利用した方法が考えられます。筆者が調査した範囲では 2 つのプラグイン ^{1 2} が確認できました。また，1 つ目のプラグイン ¹ は古いので 2 つ目のプラグイン ² を使用することを推奨するという情報も確認できました。しかし，2 つ目のプラグイン ² も GitHub で確認すると最終更新から 3 年以上経過しています。また，筆者の開発環境下では正常に動作しませんでした。そのため，プラグインを利用した方法は非推奨と結論づけます。

3. Gatsby Server Rendering APIs

2 つ目の方法として Gatsby Server Rendering APIs の setHeadComponents を利用した方法が考えられます。setHeadComponents は，プロジェクトフォルダ直下に配置した gatsby-ssr.jsx 内に記述することで出力される HTML の head 内に任意のコードを挿入することができます。以下に，既存記事 ³ で示されているコードに修正を加えたコードを示します。以下のコードを実際に使用する際は <YOUR CLIENT ID> の部分を各自の値に置換して使用してください。

1
import React from 'react'
2

3
exports.onRenderBody = ({ setHeadComponents }) => {
4
  setHeadComponents([
5
    <script
6
      async
7
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<YOUR CLIENT ID>"
8
      crossOrigin="anonymous"
9
    />,
10
  ])
11
}

4. Gatsby Head API

3 つ目の方法として Gatsby Head API を利用した方法が考えられます。Gatsby Head API は Gatsby Ver.4.19.0 から導入された機能であり，Web ページの document head に要素を追加することができます。この Gatsby Head API を利用したコードを以下に示します。以下のコードを実際に使用する際は <YOUR CLIENT ID> の部分を各自の値に置換して使用してください。

1
import * as React from 'react'
2

3
const head = () => {
4
  return (
5
    <>
6
      <script
7
        async
8
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<YOUR CLIENT ID>"
9
        crossorigin="anonymous"
10
      />
11
    </>
12
  )
13
}
14

15
export default head

5. おわりに

ここまで，GatsbyJS を使用して作成した Web サイトに Google Adsense を導入する方法について調査したことをまとめてきました。本ブログサイトでは，Google Adsense を導入する以前から Gatsby Head API を利用していたので，第 4 章で紹介した Gatsby Head API を利用した方法を導入しています。Gatsby Server Rendering APIs を利用した方法と Gatsby Head API を利用した方法でビルド速度や出力された Web サイトのパフォーマンスに及ぼす影響などは測定していませんが，単純に head 内にタグを挿入するだけなので大きな差はないと思われます。また，上記で示したコードは，Google Adsense の申請手続や自動広告には対応していますが，任意の位置に広告を掲載する場合は別途，コードの追加や修正が必要です。