Gatsby - AdSense広告を入れる
— Gatsby — 1 min read
やりたいこと
- サブドメインのGatsbyブログに広告を入れたい
AdSenseの審査を通る
環境
- ルートドメインがポートフォリオサイト(広告なし運用)
- サブドメインのブログに広告を貼りたい
- サイトは Cloudflare Pages へデプロイ済み
- ドメインも Cloudflare で取得していて,基本的な管理は全部ここ
サブドメインへ301リダイレクト
Cloudflare に「ページルール」と言う機能がある.
これを使って,ルートドメイン→サブドメインへ飛ばすように301リダイレクトを設定する.
ワイルドカードの必要もなく,単にトップページからトップページへのリダイレクトのみ.
※この設定をしていたとき,おそらくキャッシュ関連でちょっとゴタゴタしたが,基本は大丈夫だと思う.
ブログにコードを貼り付ける
.cache/default-html.js
からファイルをコピーし,src
直下にファイルをペースト.
そして,ファイル名をhtml.js
に変更する.
AdSense で申請しようとすると「このコード貼り付けてね」って言われるので,コードをコピーして<head>
タグ内に貼り付ける.
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...
注意点が,crossorigin
をcrossOrigin
へ一文字大文字へ変えること.
でないともしかして,crossOrigin?
みたいなエラーが出てくる.
AdSenseへ申請
だいたい6日くらいで合格通知が来ました.
合格したら,コードはそのままで,301リダイレクトだけ解除しましょう.
また,サイト設定から「サブドメインを追加」ができるのでしておきましょう.
ちなみに,リダイレクトせずに申請した場合,大体1日くらいで不合格通知がきました.
広告を貼る
<head>
へのスクリプトの追加は終わってる(前の項目)ので,作ったコンポーネントと,ブログへの広告貼り付けを紹介します.
また,本章は次のサイトを参考にしています.
Gatsby.jsサイトで超簡単にGoogle AdSenceを動作させる
コンポーネント作り
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
がすでに用意されているので,そちらに追記しました.
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 —