Google AdSense + Gatsby
Google AdSenseは本来<script>タグを貼り付けるだけで自分のサイトに広告を表示してくれる便利サービスなのだが、SSGのGatsbyではGoogle AdSenseを表示するにはひと工夫必要になる。
前提
Google AdSenseの登録は済ませてあって、自分のIDもわかっている状態だと仮定して進める。
やり方
1. GatsbyのServer Rendering APIsを使う方法
一つ目の方法はServer Rendering APIのsetHeadComponentsを使う方法。 これを使ってGoogle AdSenseのscriptタグをSSR時に<head>の中に仕込むことができる。
ページ下部やページ遷移時に表示される自動広告ならこれだけで十分。
// gatsby-ssr.js
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<YOUR CLIENT ID>"
crossOrigin="anonymous"
></script>
])
} 2. Pluginを使う方法
Pluginを使う場合は一つ注意点がある。
「Gatsby google adsense」などで検索すると以下のPluginがヒットする。
多くの人がこっちのPluginを使っているようだけど、このPluginはあまりメンテされておらず、うまく動作しないと言っている人が多い。 実際自分が使った時も、ブラウザによって広告が表示されなかったりと不具合が多かった。
こっち↓のプラグインを使うのが正解。
設定方法はいつもと同じで、インストールしてからgatsby-config.jsに記述していく。
npm install --save @isamrish/gatsby-plugin-google-adsenseor
yarn add @isamrish/gatsby-plugin-google-adsense// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@isamrish/gatsby-plugin-google-adsense`,
options: {
googleAdClientId: "YOUR_GOOGLE_ADSENSE_TRACKING_ID",
head: false // Optional
}
}
]
};こちらも同じく、自動表示の広告だけならこの設定だけで十分。
AdSense用のコンポーネントを作る
自動広告だけなら<script>タグを挿入するだけでOKだが、Google AdSenseでは任意の場所に任意の形の広告を表示することができる。
// src/components/googleAdsense.js
import React, { useEffect } from 'react'
export const Adsense = ({ path }) => {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [path])
return (
<ins
className="adsbygoogle"
style={{ "display": "block" , textAlign: "center" }}
data-ad-client="<YOUR_GOOGLE_AD_CLIENT_ID>"
data-ad-slot="<YOUR_GOOGLE_AD_SLOT>"
data-ad-format="auto"
data-full-width-responsive="true"
/>
)
}data-ad-clientとdata-ad-slotにはそれぞれGoogle adsenseから指定されているIDを入力する。 useEffectの中でやっていることが結構大事で、これがないと広告がうまく表示されない。
必ず必要なわけではないが、pathを渡すことでページが変わるごとにuseEffectが実行され、新しい広告が表示されるので設定しておいて損はない。
あとはimportして任意の場所で使えばOK。
// sample.js
import React from 'react'
import { Adsense } from './googleAdsense'
export const SampleCompo = (props) => {
const path = props.location?.pathname || ''
return (
<div>
<Adsense path={path} />
</div>
)
}
