2020-11-10

GatsbyサイトにGoogle AdSenseを導入する方法

アプローチ

大抵の情報ではプラグインを使用する手順が多いが、前述のようにうまくいかなかったのでプラグイン無しで実装した。

方法1: プラグインを活用 (gatsby-plugin-google-adsense + react-adsense)
方法2: プラグイン無し →今回はこちらで

1. Google AdSenseのscriptタグを追加する

gatsby-plugin-google-adsenseを使えばヨロシクやってくれるはずだが、なぜか私のサイトでは動かない…
そのため、src/html.jsを使用して全体テンプレートにscriptタグを直接記入する。

まず, .cache/default-html.jsをsrc配下にコピーして, html.jsの雛形とする。

$ cp -p .cache/default-html.js src/html.js

そして, scriptタグを挿入する。
挿入場所はheadタグ内でもbodyタグ内でもどちらでもOK。

// src/html.js

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        {/* 省略 */}
      </head>
      <body {...props.bodyAttributes}>
        {/* 省略 */}
        {/* 以下のようにscriptタグを挿入！ */}
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      </body>
    </html>
  )
}

これでsrc/html.jsがすべてのページの雛形として使われるため、全ページにスクリプトタグが付与される。
確認として、gatsby buildを実行して、ページのソースに上記で挿入したscriptタグが見えればOK。

$ # gatsby clean を忘れずに
$ gatsby clean
$ gatsby build
$ gatsby serve

2. Google AdSense用のコンポーネントを作成する

これもreact-adsenseというプラグインを使えばヨロシクやってくれるが、今後の拡張性を考えて自前で実装する。

ポイントは2つ。

まず、adsenseスクリプトに広告の描画を指示するためにwindow.adsbygoogleに空オブジェクトをpushする必要がある。これをuseEffect()で実行する。

window.adsbygoogle = window.adsbygoogle || []
window.adsbygoogle.push({})

そして、useEffect()の実行タイミングをcurrentPathで制御する。
こうしておかないとgatsby developで再描画が起きる度にエラーが発生しリロードが必要になるため非常に不便。

export const Adsense = ( props ) => {
  const { currentPath } = props
  useEffect(() => {
    // 省略
  }, [currentPath]);
  return (
    <ins
      // 省略
    />
  )

全体をまとめると以下。

// src/components/googleAdsense/index.js

import React, { useEffect } from 'react';


export const Adsense = ( props ) => {
  const { currentPath } = props
  
  useEffect(() => {
    if (window) {
    window.adsbygoogle = window.adsbygoogle || []
    window.adsbygoogle.push({})
    }
  }, [currentPath]);

  return (
      <ins 
        className="adsbygoogle"
        style={{display:'block'}}
        data-ad-client="ca-pub-123456789" // 自サイトのコードに置き換える
        data-ad-slot="123456789" // 自サイトのスロットに置き換える
        data-ad-format='auto'  // 自由
        data-full-width-responsive='true' // 自由
      />
  )
}

3. Google AdSense用のコンポーネントを配置する

広告を表示したい場所にStep2にて作成したコンポーネントを配置する。例えば、ブログ記事のテンプレートに配置したい場合は以下のようにする。

// src/templates/blogTemplate.js

import React from "react"
import { graphql } from "gatsby"
import { Adsense } from "../components/googleAdsense/index.js"

export default Template = ({
  data,
}) => {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <Adsense/> {/* 広告を表示したい場所にAdsenseコンポーネントを配置する */}
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        <Adsense/> {/* 広告を表示したい場所にAdsenseコンポーネントを配置する */}
      </div>
    </div>
  )
}

export const pageQuery = graphql`
  // 省略
`

ここまでうまく実装できていれば、サイトに広告が表示される。開発環境では実際の広告は表示されず、黄色背景(もしくは透明)の領域が表示されるはず。

4. Markdown記事内に広告を配置する

Gatsby - MarkdownページにAdSenseを挿入する方法

参考

Fix Google AdSense loading issues with React
GatsbyサイトにGoogleAdSenseを導入する