💰

【Gatsby + Netlify】Google AdSenseを追加する方法

やっぱりブログをやるなら広告も設置した方が俄然面白くなりますよね!ってことでGoogle Adsenseを追加した時の方法をメモります。 せめてドメイン代は稼ぎたいところ。

主な流れ

  1. react-adsenseのインストール
  2. Google AdSenseでサイトURLを追加しよう
  3. <head>タグ内にコードを貼り付けよう
  4. ad.jsの作成
  5. AdSenseを設置する
  6. AdSenseの審査が完了するまで待つ

1. react-adsenseのインストール

Adsenseを設置するために以下のプラグインが必要なのでインストールしましょう。

npm install --save react-adsense

2. Google AdSenseでサイトURLを追加しよう

サイトURLを追加して、発行されたコードをコピーしておきましょう。 how-to-add-adsense01

3. <head>タグ内にコードを貼り付けよう

3-1. html.jsの作成

<head>タグ内に貼り付けるためには、chache > default-html.jsファイルをコピーしてsrc > html.jsにAdSenseコードを貼り付ける必要があります。 下記コマンドでhtml.jsを作成しましょう。

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

3-2. html.jsにコードを貼り付けよう

AdSenseで発行されたコードのペーストではうまくデプロイできないため、下記をコピペしてgoogle_ad_clientの書き換えて<head>内に貼り付けましょう。

html.js
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>
<script>
    {`
        (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-発行された番号",
        enable_page_level_ads: true
        });
    `}
</script>

3-3. デプロイしhead内に確認できればOKです

下記のようにしっかり反映されているか確認してみましょう。 how-to-add-adsense02

4. ad.jsの作成

広告をコンポーネントとして表示させるために、ad.jsを作成します。

ad.js
import React from &quot;react&quot;;
import AdSense from &apos;react-adsense&apos;

const Ad = () =&gt; {
    return (
        <div>
            <AdSense.Google client="ca-pub-xxxxxxxxx" slot="xxxxxxxxx" format="rectangle"/>
        </div>
    );
  };
export default Ad;

5. AdSenseを設置する

post.js
import Ad from &quot;../components/ad&quot;;

class BlogPostTemplate extends React.Component {
  render() {
    return (
      <Layout location="{this.props.location}" title="{siteTitle}">
        <Content>
          <ContentMain>
            <PostDate>{date}</PostDate>
            <PostTitle>{title}</PostTitle>
            <PostContent dangerouslySetInnerHTML="{{" __html:="" post.html="" }}=""/>
            <Ad/>          </ContentMain>
        </Content>
      </Layout>
    );
  }
}

という風に広告を表示したい箇所に設置しておきましょう。 (上記コードは分かりやすくするために不要な部分を削ったサンプルです)

6. AdSenseの審査が完了するまで待つ

私のブログは記事数がまだ少ないのでなかなか審査が通らないかもしれませんが、下記のように審査待ち状態です。(広告表示までが完了している状態でなくて申し訳ありません。) how-to-add-adsense03

審査が完了次第、この記事も更新したいと思います。 ひとまずAdSenseを表示させるための作業はここまでです。

Good Job!

CEO & Enginner.(PHP/React Native+Expo/Python/Gatsby+Netlify) 起業6年目。WEBとかアプリ開発しております。趣味は読書、米国株投資、ピアノ。ほぼ毎日スマブラやってるただのピチュー使いおじさん。ジョーカー練習中。