XENEXE

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


heroImage

1. はじめに

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

2. プラグイン

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

3. Gatsby Server Rendering APIs

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

gatsby-ssr.jsx
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> の部分を各自の値に置換して使用してください。

src/pages/index.jsx
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 の申請手続や自動広告には対応していますが,任意の位置に広告を掲載する場合は別途,コードの追加や修正が必要です。


  1. gatsby-plugin-google-adsense | Gatsby, https://www.gatsbyjs.com/plugins/gatsby-plugin-google-adsense/. 2

  2. @isamrish/gatsby-plugin-google-adsense | Gatsby, https://www.gatsbyjs.com/plugins/@isamrish/gatsby-plugin-google-adsense/. 2 3

  3. Gatsby のサイトに Google AdSense の審査を受けるためのコードを追加する - at backyard, https://shinshin86.hateblo.jp/entry/2022/12/25/111212.