GatsbyJSにAdSenseを導入する。

ブログをやる以上ドメイン代金くらいは稼ぎたい。そこでGoogle　AdSenseをGatsbyに導入する。

やったこと

• react-adsenseの導入
• html.jsの作成
• コンポーネントを作成
• アップロードして確認

react-adsenseの導入

GatsbyでGoogleAdSenseを導入するときはreact-adsenseが便利です。

npm install --save react-adsense

html.jsの作成

GatsbyJSでは<script>タグをヘッダーに入れる場合はhtml.jsを作成し入れる必要がある。 /.cache/default-html.jsを/src/html.jsにコピーする。

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

コンポーネントを作成

再利用することを見越してコンポーネントを作成する。 /components/Ad/index.js

import React from "react";
import AdSense from 'react-adsense'

const Ad = () => (
  <div>
      <AdSense.Google
        client="ca-pub-数字"
        slot="数字"
        format="rectangle"
        />
    </div>
  )
export default Ad;

確認