GatsbyブログにGoogle AdSenseを導入しました。
10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順
Google Adsenseの導入方法について、ベストプラクティスを以下の記事に書いております。
【更新版】Gatsby+NetlifyサイトへGoogle AdSenseを貼るベストプラクティス。(2020年2月8日時点)
以下は、オリジナルの記事です。
こんにちは、筋肉めがねです。
Gatsbyは無料、そしてホスティングサービスとして使用しているNetlifyも無料、ほとんど無料のサービスの恩恵を受けているこのサイトですが、ドメイン代だけは料金が発生しております。年間9.67EURです。それぐらいのコストはペイして損益分岐点ぐらいまでは収支を持っていきたいよね、という事でGoogle AdSenseに助けていただこうと思います。
以下、目次です。
Google AdSenseに申請する前の準備
AdSenseへ申請するための必要な条件の確認
Google AdSenseへ申請するために必要な条件について、いろんな方がブログを書いておりますし、また公式サイトでも大きく3つ条件が書かれております。
- 一から作った独自のコンテンツを所有している事。
- コンテンツがAdSenseプログラムポリシーに準拠している事。
- 申請者が18歳以上である事。
一から作った独自のコンテンツを所有している事
このブログではGatsby starter siteの1つである、gatsby-v2-starter-lumenをテンプレートとして使用しておりますが、内容は、全て独自のものでございます。もちろん、他の方のブログやチュートリアルを参考にしながら開発のプロセスを進めているので似通る部分は多少なりともあるでしょうね。
コンテンツがAdSenseプログラムポリシーに準拠している事
サイトの内容がAdSenseプログラムポリシーに準拠している事、という点について、まあ友人やら同僚やらに共有しても良い内容であれば、特に問題ないでしょう。 AdSenseプログラムポリシー
申請者が18歳以上である事
うん、大丈夫。
本サイトの場合は、AdSenseへ申請するための必要な条件は満たしているようでした。
記事を数本準備しておく
いくつかの記事を読むと、Google AdSenseに申請する前の段階で目安は30本記事を書いておく必要がある、とか、400記事書いてから申請した、とか様々です。
このブログの場合、 AdSenseに申請する前にアップしていた記事の本数は9本ありました。 そして、参考情報ではございますが、AdSenseに申請後、以下の10本目の記事をアップした、という経緯があります。
何が正解かは分からないので参考程度に。
プライバシーポリシーのページを準備する
幾つかのブログに、Google AdSenseに申請する前にプライバシーポリシーを準備しておく必要がある、と、そして公式ページにもプライバシーポリシーの必要性が書かれているので、先ずはそのページを準備しました。
以下、ページ追加の手順です。
ページ追加の手順
まず、/src/pages/pages直下に新しいフォルダーを作成し、そのフォルダー内にindex.mdファイルを準備します。 index.mdファイルには、以下を書きます。
---
title: "プライバシーポリシー"
layout: page
path: "/privacy"
---
...続いて、gatsby-config.jsファイルに必要なデータを追加します。
...
module.exports = {
siteMetadata: {
url,
siteUrl: 'https://kinnikumegane.com',
...
copyright: '© 2019, Kinniku Megane',
disqusShortname: '',
menu: [
{
label: 'Articles',
path: '/',
},
{
label: 'About me',
path: '/about/',
},
{
label: 'Privacy policy',
path: '/privacy/'
}
],
...プライバシーポリシーの内容を書く
公式のサイトでも、サイト内のプライバシーポリシーにて書くべき情報が紹介されています。そちらを参考にしながら、また他の方のブログを参考にしながら、プライバシーポリシーを準備しました。
公式ページ:プライバシーポリシーに書くべき内容
本サイトのプライバシーポリシー
これでAdSenseに申請する準備は整いました。
Google AdSenseへ申請する
webで申請
公式のページにて、ガイド通りに進めていけば問題ありません。一通り個人情報を入力し進めていくと、verification codeをSMSで受け取りますので、それをwebに入力すると、publisherIDというものが表示されます。
Gatsbyで設定
“gatsby-plugin-google-adsense”を使います。ターミナルでインストールして、gatsby-config.jsファイルに設定します。
npm install --save gatsby-plugin-google-adsense...
resolve: 'gatsby-plugin-google-adsense',
options: {
publisherId: `xxxxx`,
},
},
...以上で、Google AdSenseの申請は終わりました。
ちなみに、この段階でGoogle AdSenseの自分のページを確認すると、we are currently reviewing your siteという表示が出ております。
Google AdSenseへ申請後、そして承認前に行った事
申請をした後は、基本的には承認メールをもらうまで粛々と他の作業を進めて入れば良いのですが、僕の場合、少し長めの記事を1本アップする事にしました。と言いますのも、どこかのブログで、申請後も定期的にブログをアップしておく事で、ブログが定期的に更新されている、という信頼性を高める事ができる、と読んだからです。
という事で、Google AdSenseへ申請後、約2時間後に以下の記事をアップしました。
2週間でGatsbyJSを学びブログを立ち上げたプロセス
Google AdSenseから承認メールをもらった後に行った事
ads.txtの設定
申請をした後、17時間後にGoogleより以下のメールをもらいました。
そして、承認された後のGoogle AdSenseのページは以下のようになっております。
California Consumer Privacy Actは一旦置いておいて、Earnings at riskと表示されているのでこちらに対応します。
ads.txtファイルの作成、アップロードの詳細は以下のページに書いております。
detailed explanation of ads.txt file
ざっくり書くと、ads.txtファイルをダウンロードし、Gatsbyブログのroot直下にstaticフォルダーを作成し、そこにads.txtファイルを入れ、gatsby build、そしてgitでサーバーにアップするのみです。
ads.txtファイルをアップしてからエラーが解消されるまで数日かかりますので、気長に待ちましょう。
広告を貼る
ようやくサイトに広告を貼る準備が整いました。
以下、広告を貼る手順です。今回はtop pageのサイドバーに広告を貼ります。
まず、react-adsenseをインストールします。
npm install react-adsense --save続いて、html.jsを準備します。
root直下で、
cp .cache/default-html.js src/html.jsそして、src下に作られたhtml.jsに1行、reach-adsenseを動かすためのscriptを追加します。
...
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{/* following is script for using reach-adsense*/}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
... さらに、広告それ自体のコンポーネントを作成します。
import React from 'react';
import AdSense from 'react-adsense';
const Adsense = () => (
<div>
<AdSense.Google
client='xxx'
slot=''
style={{ display: 'block' }}
format='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>
</div>
);
export default Adsense;最後に、広告を表示したい箇所へAdsenseタグを挿入すれば完了でございます。
return (
<div className="sidebar">
<div className="sidebar__inner">
<div className="sidebar__author">{authorBlock}</div>
<div>
<Menu data={menu} />
<Links data={author} />
<p className="sidebar__copyright">{copyright}</p>
<Adsense />
</div>
</div>
</div>
...これでサーバーへpushすれば、無事に広告が表示されました。
まとめ
広告を貼る手順については、特に以下の記事が参考になりました。
WordPressブログのフロントエンドをGatsbyJS + Netlifyで構築する
勿論すぐにとは言いませんが、読者の方に価値のある情報を届けながら、いづれはドメイン代が稼げるようになりたいものです。
それでは、本日は以上です。