Gatsby.jsサイトで超簡単にGoogle AdSenceを動作させる

2020-12-07

Gatsby.jsサイトにGoogle AdSenseを追加する方法。

gatsby_google_ad

目次

Gatsby.jsでGoogle AdSenseが使いたい

Gatsby.jsでは通常のWEBサイトと同様の方法でスクリプトを貼ってもReactが邪魔をして動作しない。

ということで設置手順を記す。

前提条件

  • 審査に通っていること
  • 自動広告を使わないこと

自動広告(勝手にスクリプトがレイアウト配置してくれる広告)を使おうとするとまた一つ工夫がいると思われる。

今回はより簡単な固定広告のみの記事となる。

スクリプトタグを読み込む方法

2021/02/21更新:プラグインを使う方法は2021/02/21時点で様々な理由で私から強く「非推奨」とさせて頂いている。

詳しく解説しないがプラグインに頼ると様々な弊害が現れるので必ずhtml.jsを配置する次の方法を使うべきであるため記事を再編集した。

念の為参考URL(公式GitHubよりReactを多重読み込みする不具合があるそう)

Do NOT use this! · Issue #12 · IsAmrish/gatsby-plugin-google-adsense

.chacheからファイルをコピー

まずは.cache/default-html.jssrc直下にそのままコピーペースト。

ファイル名をhtml.jsに変更

html.jsのheadタグへ追加

html.jsを開きheadタグへscriptタグを埋め込む。

<script data-ad-client={ここに各自のクライアント番号} async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

クライアントの番号がわからない場合はGoogle Adsenseにログイン後「広告」内の「サマリー」

右側にでてくる画面の「コードを取得」ボタンで表示される。

この方法は何?

※読み飛ばしてOK

script一つ読み込むだけなのに非常に回りくどい方法を行っているように見える。

しかし、この方法を使わずコンポーネント内でScriptを読み込むとリアクトの特性上何度も同じスクリプトを読み込むようでエラーが発生する。

.cacheからファイルを取ってくるので初めは裏技的方法(後々問題が発生しそうな予感)がするがgatsby.js公式が案内しているカスタマイズ方法なので私は安心して運用している。

Customizing html.js | Gatsby

アドセンス用のコンポーネントを書く

次のWEBサイトを参考にコードを作成させていただいた。

Google AdsenseをReactで使う方法(パッケージ未使用) - Qiita

こちらはReact向けの内容ではあるがGatsbyにも応用できる。若干コードが違うのでこだわりがある人は本家も合わせて読んでみてほしい。

/src/components/配下にGoogleAdSense.jsを新規作成。ファイル名は何でも良い。

import React, { useEffect } from 'react';

export default function AdsCard({path}) {
    useEffect(() => {
        if (window.adsbygoogle && process.env.NODE_ENV !== "development") {
            window.adsbygoogle.push({});
        }
    }, [path])

    return (
        <ins className="adsbygoogle"
            style={{ "display": "block" , textAlign: "center"  }}
            data-ad-client={process.env.GOOGLE_AD_CLIENT}
            data-ad-slot={process.env.GOOGLE_AD_SLOT}
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>
    );
}

AdsCard{path}という引数を指定しているがここは後述

data-ad-clientdata-ad-slotの部分だけ各自のID等を入れること。

clientはID、slotは各自のGoogle AdSenseにログインして各自が設定した広告のID。

styleなどはお好みで。

ここでは環境変数を使っているがわからなければハードコードで。

Gatsbyで環境変数を使う場合は私の記事を参考にしてほしい。

【やたら簡単】Gatsby.jsで環境変数

広告を読み込む

あとは広告を配置したいコンポーネントで読み込むだけ。

まずは先程のコンポーネントをインポートする。名前はお好きなように。

import Ads from '../components/GoogleAdSense'

余談:このインポート方法も基本すぎるせいか解説を省略しているサイトが多く躓いている人もいるかと思う。

このテンプレート内で次の定数を追加しておく。

const path = location ? location.pathname : "error: no path"

これはなくてもよいのだが、先程作ったコンポーネントに渡す自身のURLである。

これを指定しておくとページごとに広告が変化するので予めやっておいたほうが良い。

{/* Ads */}
<div>
      <Ads path={path}></Ads>
</div>

あとは上のようにAdsのタグを入れるだけで良い。周りのコメントとdivはおまけ(私はスタイリング用)

詳しい解説は省略するがpathさえ渡っていればページごとに広告が変化する。

以上

以上で完了。

簡単ではあるが、深く理解しようと思うと難解。

今回は設置だけが目的なのでここまで。

最後に

どうしてもReactとGatsbyのクセでコーディングが必要となってしまうが一度設置してしまえば殆ど変更することはないと思われる。

また自動広告も今回使っていないので必要であれば他のサイトも参考にしてもらえればと思う。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。