広告を表示するようにした（GatsbyでGoogle AdSense）
広告（Google AdSense）を表示するようにしました。
このブログは現在Cloudflare Pagesにホスティング1していて、ありがたいことにほとんどお金はかかっていないのですが、唯一ドメイン代だけは年間料金を払っています。多少はその足しになればなと思ったのと、あとは単純に広告収入というものを一度得てみたかったのでやってみることにしました。
スクリプトタグの追加
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 が立っている2のを発見…これによると、
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やったね。
おわりに
とりあえず広告は記事終わりの直下にだけ表示させようと思ってます。