gan0803.dev

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

公開日: 2020年06月15日最終更新日: 2022年01月28日

このブログも記事が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が違うローカルでのプレビューやステージング環境だと広告は表示されません。 確認は本番環境にリリースするしかないのだろうか？

Tags: GatsbyJS
©︎2021 gan0803.dev