All Articles

gatsbyにgoogleのadsenseを入れる方法

必要なものを準備する

Google adSensenに登録

Google adSenseのサイト に入って色々登録をしていると以下のような画面にたどり着くので、 赤丸内の google_ad_client の内容を先ほどのタグの client の値に入れる

google_adsense

react-helmetでheaderにscriptを追加

src/components/Layout/Layout.js

import React from 'react';
import Helmet from 'react-helmet';
import styles from './Layout.module.scss';

const Layout = ({ children, title, description }) => (
  <div className={styles.layout}>
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    </Helmet>
    {children}
  </div>
);

export default Layout;

サブドメインだと審査が通らない。。。

なぜか審査が通せずいろいろ調べていると、 Google adSenseはサブドメインではなくメインドメインで審査を通さないといけないことがわかった。
× https://blog.gogomethod.be
○ https://gogomethod.be
しかたがないからroute53で一時的にメインドメインを今見ているs3に向けようと思ったが、 公式ドキュメント にもあるようにドメイン名がバケット名と一致しないとルーティングできないらしい。。。 仕方がないので以下の方法で進めた

  1. ドメイン名と同じバケットの作成 gogomethod.be
  2. codebuildのデプロイ先に追加する
version: 0.2
env:
  variables:
    AWS_REGION: "ap-northeast-1"
phases:
  install:
    commands:
      - echo pre install
      - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
      - echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
      - apt-get update
      - apt-get install yarn
      - npm install
  pre_build:
    commands:
      - echo pre build command.
      - npm run build
  build:
    commands:
      - echo run build command.
      - aws s3 sync --debug ./public/ s3://ystydy-blog/ # --acl public-read
      - aws s3 sync --debug ./public/ s3://gogomethod.be/ # <= ここを追加
  post_build:
    commands:
      - echo post build command.
  1. IAMでcodebuildに以下の権限を付与する

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::gogomethod.be"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "*"
            ],
            "Resource": [
                "arn:aws:s3:::gogomethod.be/*"
            ]
        }
    ]
    }
  2. S3>プロパティ>Static website hosting でサイトを公開
  3. ここ からホストゾーン>レコードセットの作成>タイプAのエイリアスはい>エイリアス先候補から先ほど作ったS3を選択>作成 デプロイ後に認証を通す
  4. URLから接続できることの確認 http://gogomethod.be
  5. 不要となったバケットは削除(一度申請を通せば不要)

サブドメインを追加

あとはGoogle Adsense側でサブドメインを追加すれば広告が表示されるようになります。 https://www.google.com/adsense/new/u/0/pub-******************/sites/my-sites?url=gogomethod.be

自動広告を設定

adsenseに載っているコードに {}` を入れてheadに追加すれば自動広告が出ます

import React from 'react';
import Helmet from 'react-helmet';
import styles from './Layout.module.scss';

const Layout = ({children, title, description}) => (
    <div className={styles.layout}>
        <Helmet>
            <title>{title}</title>
            <meta name="description" content={description}/>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <script>
                {`(adsbygoogle = window.adsbygoogle || []).push({
                google_ad_client: "ca-***-****************",
                enable_page_level_ads: true
                });`}
            </script>
        </Helmet>
        {children}
    </div>
);

export default Layout;

つまりポイント

react-adsenseと認証用のタグ両方を入れる

よさそうだったのでパッケージのインストールしたのだが、 上記の自動広告と併用するとタグが2つになって広告が表示されない現象が発生。 片方のタグを削除すると自動広告が出るようになった。

☁ ⚡  npm install --save react-adsense
npm WARN eslint-config-react-app@3.0.6 requires a peer of babel-eslint@9.x but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-graphql@2.1.1 requires a peer of graphql@^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN express-graphql@0.6.12 requires a peer of graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN graphql-tools@3.1.1 requires a peer of graphql@^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-backend-test@2.0.6 requires a peer of immutable@^3.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-redux@4.4.9 requires a peer of redux@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN slate@0.34.7 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN slate-edit-list@0.11.3 requires a peer of immutable@^3.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN slate-edit-list@0.11.3 requires a peer of slate@^0.32.0 but none is installed. You must install peer dependencies yourself.
npm WARN slate-edit-table@0.15.2 requires a peer of immutable@^3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN slate-edit-table@0.15.2 requires a peer of slate@^0.33.3 but none is installed. You must install peer dependencies yourself.
npm WARN slate-plain-serializer@0.5.41 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN slate-prop-types@0.4.67 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN slate-react@0.12.9 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.

+ react-adsense@0.0.6
added 1 package from 1 contributor and audited 73559 packages in 25.878s
found 151 vulnerabilities (128 low, 21 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details


   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │       New minor version of npm available! 6.7.0 → 6.8.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.8.0   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

ポストにおいて自動広告が入らない

自動広告とgatsbyは相性が悪い時もあるようで、 ポスト記事においてスマホの画面上部に出る広告以外でない状態になっていた。 おそらく記事読み込みのタイミングと広告差し込みのタイミングの問題かな。。。 仕方ないので手動広告も入れることで広告が出るように修正した。

src/components/Post/Post.js

import AdSense from 'react-adsense'

...
const Post = ({post}) => {
    ...

    return (
        <div className={styles['post']}>
            <Link className={styles['post__home-button']} to="/">All Articles</Link>

            <div>
                <AdSense.Google
                    client="ca-pub-9704592659303209"
                    // slot="test"
                    style={{display: "block"}}
                    layout="in-article" format="auto"/>
            </div>
            <div className={styles['post__content']}>
                <Content body={html} title={title}/>
            </div>
            <div>
                <AdSense.Google
                    client="ca-pub-9704592659303209"
                    // slot="test"
                    style={{display: "block"}}
                    layout="in-article" format="auto"/>
            </div>

            ...
        </div>
    );
};

export default Post;