Google Adsenseの審査を申し込みました

2021-01-01

Google Adsense ads to a website.

ブログ記事を書くために、このサイトのコードを書いてたのですが、やることがなくなってきたのでGoogle Adsenseを申し込んでみました。

Google AdsenseにウェブサイトのURLを登録する

Google Adsenseにアクセスして右上のご利用開始をクリックします。

必要事項を入力します。

自分のページのURL
メールアドレス
Google Adsenseからのお知らせメールを受け取る/受け取らない

引き続き必要事項を入力します。

国または地域
利用規約

支払い情報を入力します。

住所
名前

SMS認証が必要な場合もあるようです。

表示されたAdSense コードを自分のサイトに埋め込みます。

gatsby-plugin-google-adsenseを利用する

プラグインgatsby-plugin-google-adsenseを利用します。

yarn add gatsby-plugin-google-adsense

gatsby-config.plugins.js

{
  resolve: `gatsby-plugin-google-adsense`,
  options: {
    publisherId: `ca-pub-0000000000000000`
  },
},

publisherIdは上記で表示されたAdSense コード内にあります。

しかし、私の場合はこのプラグインは動作しませんでした。確認のためhttp://localhost:8000/にアクセスしましたがAdSense コードは反映されていませんでした。

手動でコードを追加する

プラグインが動作しなかったので手動でAdSense コードを挿入しました。

src\html.jsx

import React from 'react';
import PropTypes from 'prop-types';

export default class HTML extends React.Component {
  render() {
    return (
      <html lang="ja" {...this.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-0000000000000000" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> {/* ここに追加 */}
          {this.props.headComponents}
        </head>
        <body {...this.props.bodyAttributes} className="light">
          {this.props.preBodyComponents}
          <div
            key="body"
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    );
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
};