2019.05.26

GatsbyJSで構築したサイトにGoogleアドセンスを導入する方法

今回はGatsbyJSで構築したサイトにGoogleアドセンスの広告を導入する方法をまとめます。

GatsbyJS

フロントエンド

[ 目次 ]

はじめに
react-adsenseのインストール
html.jsの作成
広告タグ表示
最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はGatsbyJSで構築したサイトに、Googleアドセンスを導入する方法をまとめます。広告タグは、hustcc/react-adsense を利用して表示したいと思います。
以下のサイトを参考にさせて頂きました。

GatsbyにAdsenseを導入する | onox blog

また、前提として審査が完了し、広告を表示できるような状態で進めていきます。

react-adsenseのインストール

■ npmを利用する場合

$ npm install react-adsense --save

■ yarnを利用する場合

$ yarn add react-adsense

html.jsの作成

.cache/default-html.jsからsrc/html.jsを作成します。
以下のコマンドにてhtml.jsを作成しましょう。

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

Googleアドセンスのjsを読み込むように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>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <noscript key="noscript" id="gatsby-noscript">
          This app works best with JavaScript enabled.
        </noscript>
        <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,
}

広告タグ表示

広告タグを表示させる為、react-adsenseを読み込みます。

import AdSense from 'react-adsense'

そしてタグを設定します。

<AdSense.Google
      client={process.env.GOOGLE_ADSENSE_ID}
      slot=''
/>

clientは、ca-pub-から始まるサイト運営者IDになります。
今回は環境変数GOOGLE_ADSENSE_IDとして値を設定しました。
slotは、広告ユニットIDとなりますが今回は利用しないので空にします。

サイト運営者IDの環境変数が設定されていない場合、広告タグは読み込まないようにしたいので、以下のように修正しました。

{process.env.GOOGLE_ADSENSE_ID ? <AdSense.Google
      client={process.env.GOOGLE_ADSENSE_ID}
      slot=''
/> : ''}

最後に

今回はGoogleアドセンスの導入方法をまとめました。個人ブログ・サイトでも収益を確保できるように運営ノウハウをつけていきたいですね！
皆さんもGoogleアドセンスを試してみてください。

Nakamu Blog