広告を表示するようにした（GatsbyでGoogle AdSense）

広告（Google AdSense）を表示するようにしました。

このブログは現在Cloudflare Pagesにホスティング¹していて、ありがたいことにほとんどお金はかかっていないのですが、唯一ドメイン代だけは年間料金を払っています。多少はその足しになればなと思ったのと、あとは単純に広告収入というものを一度得てみたかったのでやってみることにしました。

スクリプトタグの追加

Google AdSense を利用するには審査をしてもらう必要があります。その過程でまずは自サイトを AdSense にリンクするため、以下のようなスクリプトタグを埋め込むことになります。

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

はじめはgatsby-plugin-google-adsenseというプラグインを見つけたのでこれを使うだけかなと思っていたのですが、Do NOT use this! という Issue が立っている²のを発見…これによると、

This plugin has react as a dependency: it should not be. If you use this plugin, you’ll end up with 2 different React packages in your bundle, increasing its size significantly.

とのことで、確かに dependency に React がありました。つらいですね。

じゃあどうするのかというと、Customizing html.jsします。ようは Gatsby デフォルトの html.js をコピーしてきてカスタマイズします（英訳）。

Google さんの審査

スクリプトタグを追加したら審査をしてもらいます。私はここで 1 回落ちました 。Google さんによると、

価値の低い広告枠（テンプレート ページ）について AdSense のプログラム ポリシーに記載されているとおり、ユーザーにとって価値がほとんどないページやアプリ、または広告の比率が高すぎるページやアプリには、修正が行われるまで Google 広告が表示されません。…

とのことでちょっと悲しい 😢 気持ちになりました。ただ、よく考えるとこのサイトはタグページを半自動生成していて、これがサイト内の結構な割合を占める状態になっていました。そこで、すべてのタグページにnoindexを指定し、さらに一応プライバシーポリシーページも追加して、しばらく時間をおいてから再審査したところ合格の連絡がきました。

Ad コンポーネントの作成

あとは広告を埋め込むだけです。Google AdSense には自動広告というのもあって便利だなとは思ったのですが、広告が表示される位置は自分でコントロールしたかったため、今回はディスプレイ広告（普通の広告）を埋め込むことにしました。

AdSense をぽちぽちしていくと以下のようなコードを配置するように言われます。

<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
  crossorigin="anonymous"
></script>
<!-- ad -->
<ins
  class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="1234567890"
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
<script>
  ;(adsbygoogle = window.adsbygoogle || []).push({})
</script>

これを以下のような適当なコンポーネントにしておいて好きな場所に埋め込めば完了です。

import React, { useEffect } from "react"
import { css } from "@emotion/react"

type Props = {
  path: string
}

declare global {
  interface Window {
    adsbygoogle: any
  }
}

const Ad: React.FC<Props> = ({ path }) => {
  useEffect(() => {
    try {
      const adsbygoogle = window.adsbygoogle || []
      adsbygoogle.push({})
    } catch (e) {
      console.error(e)
    }
  }, [path])
  return (
    <ins
      className="adsbygoogle"
      css={css`
        display: block;
      `}
      data-ad-client="ca-pub-1234567890123456"
      data-ad-slot="1234567890"
      data-ad-format="auto"
      data-full-width-responsive="true"
    />
  )
}

export default Ad

やったね。

おわりに

とりあえず広告は記事終わりの直下にだけ表示させようと思ってます。

（追記）半年程度表示してみて満足したのでこのブログでは非表示にしました。

参考

• Do NOT use this! #12 - gatsby-plugin-google-adsense
• How to add Adsense to a website built with GatsbyJS?
• How do you explicitly set a new property on window in TypeScript?