目次
はじめに
この記事では Gatsby.js でサイトを運用している方を対象に、Google AdSense を導入して広告を設置し収益化するまでの手順を詳しく解説していきます。
今回の内容は、プラグインやライブラリを使わずに AdSense の導入をします
Google AdSense の申請をするところから解説してますので、既に審査を合格している方は 審査に合格した後の実装 をまで読み飛ばして下さい。
Google AdSense とは
自分のサイトに広告を表示し収益を得ることができる、サイト運営者向けのサービスです。
Google AdSense は無料で利用できますが、広告を表示し収益化するには審査が必要です。
広告を掲載できない種類のサイトもあるので、利用する前に AdSense プログラム ポリシー を一読することをおすすめします。
申請までの流れ
自分のサイトに広告を表示するには、審査に合格する必要があります。
審査 〜 実際にサイトに広告を表示するまでの大まかな流れは以下のようになります。
- Google AdSense - ウェブサイトを収益化 からサイトの情報を入力します
- 申請後、
script タグが支給されるので、head タグ内に設置します - 審査結果を待ち合格後、表示する広告の種類を選んで表示させます
- サイトが閲覧されるようになってくると収益を得ることができます
Google AdSense の申請
支給された script タグ を head タグ 内に設置し、申請するまでの手順を解説します。
<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Gatsby.js サイトの場合は、.cacheフォルダ 内の default-html.jsファイル をルートフォルダにコピーします。その際、コピーしたファイルは html.js にリネームも同時に行います。
cp .cache/default-html.js src/html.jsこれは何をやっているかと言いますと、デフォルトで吐き出される <head></head>タグ を上書きをしています。このカスタム方法は、公式でも案内しているやり方なので、詳しく知りたい方は Customizing html.js | Gatsby を読んでみてください。
ここまで終えると、ルートフォルダにある html.js は以下のようになっているかと思います。
import React from "react";
import PropTypes from "prop-types";
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"
/>
{props.headComponents}
<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> </head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
);
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
};ここまで終え、管理画面よりサイト内に Script コードを設置したボタンを押すことで、審査が開始されます。審査期間は 12 時間 ~ 2 週間程で合否のメールが届きます。
ここまでの解説が Google AdSense に申請するまでの手順になります。
参考
当サイトは申請後 12 時間程で合格のメールが届きました。その時の記事数は 8 記事です。
審査に合格した後の実装
ここからは Google AdSense の審査に合格後、広告を表示するまでの手順を解説します。
AdSense の広告には以下の種類があります。
- ディスプレイ広告
- インフィード広告
- 記事内広告
- 検索エンジン広告
当サイトでは、ディスプレイ広告 と 記事内広告 の二つを利用しています。
簡単に説明すると、ディスプレイ広告は幅・高さを指定でき、記事内広告は Google 側が自動で広告を表示します。
// ディスプレイ広告用のコンポーネントを作る例
import React, { useEffect } from "react";
const GoogleAds = (props) => {
const { currentPath } = props;
useEffect(() => {
if (window && process.env.NODE_ENV !== "development") {
window.adsbygoogle = window.adsbygoogle || [];
window.adsbygoogle.push({});
}
}, [currentPath]);
return (
<ins
className="adsbygoogle"
style={{
display: `inline-block`,
width: `300px`,
height: `212px`,
}}
data-ad-client="ca-pub-xxx" // 自身のIDを記載
data-ad-slot="0123456789" // 自身のIDを記載
></ins>
);
};
export default GoogleAds;
useEffect() を使用しないと、同じページへのリンク（目次など）がうまく遷移できずに画面が真っ白になる為、忘れずに記述しましょう。
useEffect(() => { // ローカル環境では403エラーが出る為、本番環境でのみ動作
if (window && process.env.NODE_ENV !== "development") {
window.adsbygoogle = window.adsbygoogle || [];
window.adsbygoogle.push({});
}
}, [currentPath]);ここまで終えると、templates/post.js 等の好きな箇所に <GoogleAds /> を読み込むことでサイズを指定したディスプレイ広告を表示させることができます。
記事内広告に関しては、Google AdSense の管理画面から 自動広告をオン にすることで、Google 側が自動で広告を表示してくれます。
以上が Gatsby.js サイトに Google AdSense を導入し、収益化するまでの解説になります。
収益化の選択肢
Google Adense は審査を合格できれば手軽に導入できるものの、余程 PV 数がない限りあまり収益が見込めないのが事実としてあります。 また、審査自体の合格ラインが明確に公開されていない為、記事数が多くても審査に落ちることはざらにあるようです。
そこでおすすめの広告がアフィリエイト広告です。 Google AdSense がクリック単価の収益に対し、アフィリエイト広告は成果報酬単価で収益を得ることができます。クリックした時点では収益は発生しませんが、紹介したサービスや商品を読者の方が購入した時に収益が発生する広告の仕組みになります。
Google AdSense の審査に中々合格できない方や、収益が低くて悩んでいる方はアフィリエイト広告を使ってみるのをオススメします。 当サイトでもアフィリエイト広告を使用しており、扱っている ASP は以下の 2 つになります。
いずれも無料で利用できるので、収益を伸ばしたいと思う方は是非登録してみてください。
まとめ
Gatsby.js 作成したサイトに、Google AdSense を導入するまでの手順を解説しました。
Google AdSense を導入後は、PV 数をあげるためにも検索エンジンで上位表示出来るよう、SEO 対策をすることをおすすめします。
Gatsby.js で作成したサイトの SEO 対策については、Gatsby.js SEO 対策におすすめのプラグイン という記事を以前書きましたので、気になる方はチェックしてみて下さい。
SHARE
