Gatsby.jsサイトで超簡単にGoogle AdSenceを動作させる
Gatsby.jsサイトにGoogle AdSenseを追加する方法。
Gatsby.jsでGoogle AdSenseが使いたい
Gatsby.jsでは通常のWEBサイトと同様の方法でスクリプトを貼ってもReactが邪魔をして動作しない。
ということで設置手順を記す。
前提条件
- 審査に通っていること
- 自動広告を使わないこと
2022/05/10更新：自動広告について
以前は自動広告をgatsby.jsに差し込むと表示がめちゃくちゃになっていて使い物にならなかた(はず)
しかしどうやら内部でアップデートがあったようで久々にテストしてみたところ問題なくgatsby.jsで自動広告を使用することができた。
今回の記事は固定広告用の記事であり、自分で狙った箇所に広告を差し込む方法となるが、まずは自動広告もためしてみることをおすすめする。
スクリプトタグを読み込む方法
2021/02/21更新：プラグインを使う方法は2021/02/21時点で様々な理由で私から強く「非推奨」とさせて頂いている。
詳しく解説しないがプラグインに頼ると様々な弊害が現れるので必ずhtml.jsを配置する次の方法を使うべきであるため記事を再編集した。
念の為参考URL(公式GitHubよりReactを多重読み込みする不具合があるそう)
Do NOT use this! · Issue #12 · IsAmrish/gatsby-plugin-google-adsense
.chacheからファイルをコピー
まずは.cache/default-html.jsをsrc直下にそのままコピーペースト。
ファイル名をhtml.jsに変更
html.jsのheadタグへ追加
html.jsを開きheadタグへscriptタグを埋め込む。
<script data-ad-client={ここに各自のクライアント番号} async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>クライアントの番号がわからない場合はGoogle Adsenseにログイン後「広告」内の「サマリー」
右側にでてくる画面の「コードを取得」ボタンで表示される。
この方法は何？
※読み飛ばしてOK
script一つ読み込むだけなのに非常に回りくどい方法を行っているように見える。
しかし、この方法を使わずコンポーネント内でScriptを読み込むとリアクトの特性上何度も同じスクリプトを読み込むようでエラーが発生する。
.cacheからファイルを取ってくるので初めは裏技的方法(後々問題が発生しそうな予感)がするがgatsby.js公式が案内しているカスタマイズ方法なので私は安心して運用している。
アドセンス用のコンポーネントを書く
次のWEBサイトを参考にコードを作成させていただいた。
Google AdsenseをReactで使う方法(パッケージ未使用) - Qiita
こちらはReact向けの内容ではあるがGatsbyにも応用できる。若干コードが違うのでこだわりがある人は本家も合わせて読んでみてほしい。
/src/components/配下にGoogleAdSense.jsを新規作成。ファイル名は何でも良い。
import React, { useEffect } from 'react';
export default function AdsCard({path}) {
useEffect(() => {
if (window.adsbygoogle && process.env.NODE_ENV !== "development") {
window.adsbygoogle.push({});
}
}, [path])
return (
<ins className="adsbygoogle"
style={{ "display": "block" , textAlign: "center" }}
data-ad-client={process.env.GOOGLE_AD_CLIENT}
data-ad-slot={process.env.GOOGLE_AD_SLOT}
data-ad-format="auto"
data-full-width-responsive="true"></ins>
);
}AdsCardに{path}という引数を指定しているがここは後述
data-ad-clientとdata-ad-slotの部分だけ各自のID等を入れること。
clientはID、slotは各自のGoogle AdSenseにログインして各自が設定した広告のID。
styleなどはお好みで。
ここでは環境変数を使っているがわからなければハードコードで。
Gatsbyで環境変数を使う場合は私の記事を参考にしてほしい。
広告を読み込む
あとは広告を配置したいコンポーネントで読み込むだけ。
まずは先程のコンポーネントをインポートする。名前はお好きなように。
import Ads from '../components/GoogleAdSense'余談：このインポート方法も基本すぎるせいか解説を省略しているサイトが多く躓いている人もいるかと思う。
このテンプレート内で次の定数を追加しておく。
const path = location ? location.pathname : "error: no path"これはなくてもよいのだが、先程作ったコンポーネントに渡す自身のURLである。
これを指定しておくとページごとに広告が変化するので予めやっておいたほうが良い。
{/* Ads */}
<div>
<Ads path={path}></Ads>
</div>あとは上のようにAdsのタグを入れるだけで良い。周りのコメントとdivはおまけ(私はスタイリング用)
詳しい解説は省略するがpathさえ渡っていればページごとに広告が変化する。
以上
以上で完了。
簡単ではあるが、深く理解しようと思うと難解。
今回は設置だけが目的なのでここまで。
最後に
どうしてもReactとGatsbyのクセでコーディングが必要となってしまうが一度設置してしまえば殆ど変更することはないと思われる。
また自動広告も今回使っていないので必要であれば他のサイトも参考にしてもらえればと思う。
