明日の自分のために

moon indicating dark mode
sun indicating light mode

GatsbyJSで作ったブログがGoogle AdSenseの審査に通ったので広告を組み込む

June 15, 2020

このブログも記事が10本を超えたのでGoogle AdSenseに申し込みました。結果は無事審査に合格しました。
申し込みはAdsenseのWebサイトからURLを登録したあと、ブログのトップページにコードを貼り付けて待つだけです。

headタグにコードを配置して審査結果を待つ

GatsbyJSの場合、src/html.jsを作成して<head>タグの中にadsbygoogle.jsを読み込むように以下の1行追記します。 .cache/default-html.jsをコピーしてきてsrc/html.jsに格納し、1行追加するだけです。

<script data-ad-client="ca-pub-**********" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

html.jsは以下のようになります。

src/html.js

import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script data-ad-client="ca-pub-**********" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}

ちなみに、gatsby-plugin-google-adsenseも試してみまたのですが上手く機能していないようでした。

これで申請はOKなのですが、10日間経っても何も返事がありませんでした……。
心配していたところ、AdSense 審査状況確認フォームなるものがあると知りました。 そこから問い合わせのメッセージを送ったら翌日には承認されていました。 問い合わせと関係があったかは不明ですが……。

ブログへ広告を組み込む

とりあえず無事に登録できたのでブログに広告を組み込みます。

最初は自動広告を設定していたのですが、どうもGatsbyJSだと思ったとおりに表示されません。表示する領域はあるのですが広告が出ません。GatsbyJSが用意してくれている最適化の処理と相性が良くないのでしょうか?
仮に表示されたとしても、タイトルの真下に配置されたりして読む人の妨げになるのではないか、と思うような位置に埋め込まれていました。
そのため、自動広告は諦めて手動で広告を埋め込むことにし、ブログを読む際に広告が邪魔にならないような種類と配置を考えます。

AdSenseの広告にはいくつか種類がありますが、それぞれ表示方法や単価、クリック率などに違いがあります。詳細は検索すると解説しているWebサイトがいくつもでてきますのでここでは省略します。

一通り広告のタイプを確認した結果、よく見るディスプレイ広告タイプのものをレスポンシブに表示することにしました。
ページの遷移の間に挟み込まれるものや、画面の上部にオーバーレイ表示されるアンカー広告はユーザーが必ず目にするものではありますが、邪魔になりそうなので避けました。

そして配置については、ブログ記事の最下部にのみ表示するようにしました。読んだあとにちらっと視界に入って押してもらえればよいかな、と。
また、トップページ(記事一覧を表示するページ)はアクセスもそんなにされないだろうし、記事一覧を見るのに邪魔になりそうなので広告は配置しませんでした。

まずはGoogle AdSenseの広告 > サマリー広告ユニットごとタブからディスプレイ広告ユニットを作成します。形はスクエアを選び、広告サイズはレスポンシブを選択しました。これで広告貼り付け用のコードが取得できます。

広告表示のための部品を作ります。広告ユニットコードと同じ内容を組み立てる様にします。 <ins>とそれに対応する回数のwindow.adsbygoogle.pushを行う部品を以下の通り作成しました。

src/gatsby-theme-blog/components/adsense.js

import React, { useEffect } from "react";
import { css } from "theme-ui"
const Ad = props => {
const { currentPath } = props
useEffect(() => {
window.adsbygoogle = window.adsbygoogle || []
window.adsbygoogle.push({})
}, [currentPath])
return (
<div
css={css({
ml: 0,
mr: 0,
})}>
<ins
className="adsbygoogle"
style={{ display: 'block' }}
data-ad-client="ca-pub-*************"
data-ad-slot="**********"
data-ad-format="auto"
data-full-width-responsive="true"
/>
</div>
)
}
export default Ad;

作った部品をPostの一番下に配置すればOKです。ここでは見た目のために<Styled.hr />を挟んでいます。

src/gatsby-theme-blog/components/post.js

...
const Post = ({
data: {
post,
site: {
siteMetadata: { title },
},
},
location,
previous,
next,
}) => (
<Layout location={location} title={title}>
<SEO
title={post.title}
description={post.excerpt}
imageSource={
post.socialImage
? post.socialImage?.childImageSharp?.fluid.src
: post.image?.childImageSharp?.fluid.src
}
keywords={post.keywords}
imageAlt={post.imageAlt}
/>
<main>
<PostHero post={post} />
<PostTitle>{post.title}</PostTitle>
<PostDate>{post.date}</PostDate>
<MDXRenderer>{post.body}</MDXRenderer>
</main>
<TagLabel tags={post.tags} />
<Styled.hr />
<AdSense currentPath={location} />
<PostFooter {...{ previous, next }} />
</Layout>
)

これで記事のページの下部に広告が表示されます。この下にあるはずです。
ただ、ページの読み込み速度などの条件があるのか、広告が表示されない場合もあるようです。 リロードしたら出てくることもあり、よくわかりません。
それと、URLが違うローカルでのプレビューやステージング環境だと広告は表示されません。 確認は本番環境にリリースするしかないのだろうか?