gatsby.jsのブログにGoogleアドセンス広告を貼る方法

8239 ワード
JavaScript gatsby React GoogleAdsense JavaScript テキストリンク

headにコードを埋め込む

アドセンスに申請するとheadタグ内にコードを貼るように指示される。

他にも方法はあるみたいだけれど、うまくいかなくて最終的にプラグインを選択している人が多かったので、今回はgatsby-plugin-google-adsenseというプラグインをインストールしてheadタグ内にコードを貼ってもらう。

$ yarn add gatsby-plugin-google-adsense

gatsby-config.jsに以下のコードを追加

gatsby-config.js
plugins: [
  // 省略
  {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: process.env.GOOGLE_ADSENSE_ID,
    },
  },

GoogleAdSenseに審査を申請する。

ところがコロナの関係で、、、と7月の後半くらいから５回位申請したが、すべて審査に落ちてしまっていたが、8月後半になってようやく審査に通りました。

ads.txtファイルをアップロード

やっと広告を貼れると思いきや、以下のようなメッセージが。

gatsbyプロジェクトのルート直下にstaticフォルダを作成してads.txtを設置。buildしてアップロードします。

エラーが解消されるまで待ちましょう。解消までに数日かかるみたいです。ちなみに自分は2日くらいで解消されました。

広告を貼る

やっと広告を貼れます。

アドセンス広告をreactに対応させる為にreact-adsenseプラグインをインストールします。

$ yarn add react-adsense

.cacheフォルダにあるdefault-html.jsをsrc/html.jsにコピーします。

$ cp .cache/default-html.js src/html.js

html.jsのhead内にscriptを追加

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"
        />

        {/* GoogleアドセンスのJSを読み込む */}
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>

        {props.headComponents}
      </head>

広告のコンポーネントを作成します。。

src/components/adsense.js
import React from 'react'
import AdSense from 'react-adsense'

const Ad = () => (
  <div className="ad">
    <AdSense.Google
      client={process.env.GOOGLE_ADSENSE_ID}
      slot=""
      style={{ display: 'block' }}
      responsive="true"
      format="auto"
    />
  </div>
)

export default Ad

あとは広告を表示したい場所にAdタグを貼り付けて、build後アップロードすれば完成！

貼った後すぐはアドセンスのスクリプトが403エラーになってしまっていて何も表示されなかったのですが、少し経ったら表示されるようになりました。