OctopressにGoogle AdSenseを導入する

Google AdSenseとは

広告収入を稼ぐためのアフィリエイトサービスと言えばいいのでしょうか。

詳細は、Google AdSenseについてwikipediaから転記します。

### http://ja.wikipedia.org/wiki/Google_AdSense から転記

Google AdSense（グーグルアドセンス）はGoogleの提供している検索連動型およびコンテンツ連動型広告の広告配信サービスの総称である。

AdSenseは、Googleが広告ネットワークに対して提供する配信サービスの総称であり、その形態は多岐にわたる。
コンテンツ向けAdSenseは所有するWebサイト（ブログでも可）にGoogle AdSenseの広告コードを貼り付けると広告が表示され、その広告がクリックされると報酬が得られる仕組みである。Google AdSenseのシステムが自動的にサイトの内容を解析し、そのサイトにあったコンテンツ連動型広告を配信するシステムである[1]。例えば、ゴルフ関連のサイトなら、自動的にゴルフの広告が表示されるよう設計されている(サイトの内容によっては、それと関連する適切な広告がなく、まったく分野の異なる広告が表示されることもある)。Googleでの検索履歴から広告が表示されることもある[2]。 日本では2003年12月一般向けに募集を開始[3]したことでブロガーなどに広まり急速にシェアを広げた。
その他、ウェブページ内に検索の機能を提供し、検索キーワードに関連する広告を表示する検索向けAdSense、RSSフィードの記事内にAdSense広告を自動的に表示するフィード向けAdSense[4]などがある。


ということで、Google AdSenseを使用してOctopressサイト内に広告を表示してみようと思います。

Google AdSense側の設定

所有サイトのURLを追加する(任意)

所有サイトとしてサイトのURLを登録しておくことでサイト固有の広告ブロック ルールを作成するなど、サイトに関連する操作を行うことができるようになるようです。具体的には、特定広告主URLや広告ネットワーク、特定カテゴリに関わる広告を表示させたくない場合等に非表示設定をおこなうことが可能です。

Google AdSenseへGoogleアカウントにてログインし、アカウント > サイト管理の順にページを移動します。

下の画像のようなテキスト入力フォームがあるので、広告を表示させたいサイトのトップURLを入力し、サイトを追加します。

広告ユニットを作成し、コードを取得する

Google AdSenseにおける広告は広告タイプ(テキスト広告とディスプレイ広告、テキスト広告のみ、ディスプレイ広告のみ)や広告サイズ(468x60、160x600、レスポンシブ、など)を定義した広告ユニットが広告の生成単位となり、広告コードもこの広告ユニット単位で生成されます。

サイドバー向けの広告ユニットを作成します。

[広告の設定] > [コンテンツ] > [広告ユニット]までページを進め、＋新しい広告ユニットをクリックします。


名前は、あとで広告ユニットを特定しやすいように一意の名前と説明を入力するといいでしょう。 今回はbuf-material_aside_336x280とします。

広告サイズは最初に表示されている推奨から選ぶと無難かもしれません。これら推奨の広告サイズはGoogle AdSense側で広告の掲載効果があったとされる広告サイズのようです。今回は336x280 レクタングル (大)を選択します。

また、モバイルで効果的な広告サイズにはモバイルのアイコン（mobile icon）が表示されます。

広告サイズに関しては、プレビューを選択することでポップアップで実際の大きさを確認できますので参考に出来ますね。


広告タイプは、テキスト広告とディスプレイ広告、テキスト広告のみ、ディスプレイ広告のみの3つから選択します。今回は推奨されているテキスト広告とディスプレイ広告を選択します。



保存してコードを取得を選択し、コードを取得します。

Octopress側の設定

今回は、広告をサイドバーに表示してみようと思います。

Octopressではサイドバーのコンテンツはセクションごとにsource/_includes/custom/asides/ディレクトリ以下にHTMLファイルを用意し、_config.yml内のdefault_asides:に表示させたいファイル名をリストで持つことになっています。

サイドバーに表示するHTMLの準備

source/_includes/custom/asides/google_adsense_336x280.htmlとして作成します。この時、Octopress側で1つのセクションであることを定義するために一番外枠として<section>と</section>で括るようにします。

source/_includes/custom/asides//google_adsense_336x280.html 
1
2
3
4
5
6
7
8
9
10
11

<section>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- buf-material_aside_336x280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>

_config.yml の設定

_config.ymlのdefault_asides:にgoogle_adsense_336x280.htmlを追記します。この広告はサイドバーの最上段に表示させたいので、default_asides:リストの1番上に記述します。

_config.yml
1
2
3
4
5
6

default_asides: [
    custom/asides/google_adsense_336x280.html,
    asides/recent_posts.html,
    custom/asides/category_list.html,
    custom/asides/tag_cloud.html,
]

静的ファイルの再生成とデプロイ

静的ファイルを再生成します。

1
2
3
4

rake generate

## ローカル環境で確認する場合はpreviewタスクも実行します
rake preview

GitHub Pagesへデプロイします。

1

rake deploy

確認

GitHub Pagesへアクセスした際に表示されるHTMLコードを確認し、<aside>タグ内に以下のscriptコードが組み込まれていれば設定できています。

1
2
3
4
5
6
7
8
9
10
11

<section>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- buf-material_aside_336x280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>