Skip to content
るいラボ
原神ツール

Gatsby - AdSense広告を入れる

Gatsby1 min read

やりたいこと

  • サブドメインのGatsbyブログに広告を入れたい

AdSenseの審査を通る

環境

  • ルートドメインがポートフォリオサイト(広告なし運用)
  • サブドメインのブログに広告を貼りたい
  • サイトは Cloudflare Pages へデプロイ済み
  • ドメインも Cloudflare で取得していて,基本的な管理は全部ここ

サブドメインへ301リダイレクト

Cloudflare に「ページルール」と言う機能がある.
これを使って,ルートドメイン→サブドメインへ飛ばすように301リダイレクトを設定する.

dev-gatsby-adsense-1

ワイルドカードの必要もなく,単にトップページからトップページへのリダイレクトのみ.

※この設定をしていたとき,おそらくキャッシュ関連でちょっとゴタゴタしたが,基本は大丈夫だと思う.

ブログにコードを貼り付ける

.cache/default-html.jsからファイルをコピーし,src直下にファイルをペースト.
そして,ファイル名をhtml.jsに変更する.

AdSense で申請しようとすると「このコード貼り付けてね」って言われるので,コードをコピーして<head>タグ内に貼り付ける.

html.jsへコード追加
1...
2<head>
3...
4<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossOrigin="anonymous"></script>
5</head>
6...

注意点が,crossorigincrossOriginへ一文字大文字へ変えること.
でないともしかして,crossOrigin?みたいなエラーが出てくる.

AdSenseへ申請

だいたい6日くらいで合格通知が来ました.
合格したら,コードはそのままで,301リダイレクトだけ解除しましょう.
また,サイト設定から「サブドメインを追加」ができるのでしておきましょう.

ちなみに,リダイレクトせずに申請した場合,大体1日くらいで不合格通知がきました.

広告を貼る

<head>へのスクリプトの追加は終わってる(前の項目)ので,作ったコンポーネントと,ブログへの広告貼り付けを紹介します.
また,本章は次のサイトを参考にしています.
Gatsby.jsサイトで超簡単にGoogle AdSenceを動作させる

コンポーネント作り

@components/adsense.js
1import React, { useEffect } from 'react';
2
3export default function AdsCard({path}) {
4 useEffect(() => {
5 if (window.adsbygoogle && process.env.NODE_ENV !== "development") {
6 window.adsbygoogle.push({});
7 }
8 }, [path])
9
10 //ディスプレイ広告
11 return (
12 <ins className="adsbygoogle"
13 style={{ "display": "block" }}
14 data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
15 data-ad-slot="YYYYYYYYYY"
16 data-ad-format="auto"
17 data-full-width-responsive="true"></ins>
18 );
19}

広告の貼り付け

このサイトで使用しているスターターの場合,post-footer.tsxがすでに用意されているので,そちらに追記しました.

@components/post-footer.tsx
1...
2import Ads from '@components/adsense'
3...
4const PostFooter = ({ post }: PostFooterProps) => {
5 const path = (typeof window !== "undefined") ? location.pathname : "error: no path"
6 return (
7 ...
8 <Ads path={path}></Ads>
9 ...
10 )
11}

ハイライト部分が追記した箇所です.

参考サイトと違うのはconst path = (typeof window !== "undefined") ? location.pathname : "error: no path"の部分
単純なlocationだと,ビルドエラーが出てしまうので,(typeof window !== "undefined")へ置き換えました.

Gatsby