こんにちは、ゆんつです。
ブログで収益を得る方法の1つに「Google Adsenseを利用する」という方法があります。
Google Adsenseというのは簡単に言うと「広告」のことで、ブログを見てくれた人がGoogle Adsensの広告をクリックしてくれると、いくらかの報酬がいただける仕組みになっています。
Google Adsenseの広告にはいくつかの種類があります。
その中に「インフィード広告」という広告があります。
この広告の特徴は
記事一覧のカードと似たような見た目の広告
ということです。
例えばディスプレイ広告の場合は以下のような感じで、広告とそうでない部分が明白です。
それに比べてインフィード広告は、記事一覧の見出しの中に比較的自然に表示されます。
・PC用のインフィード広告
・モバイル用のインフィード広告
記事一覧によく馴染んでいて、普通の広告に比べてクリックされやすいような気がしませんか？
今日はこのインフィード広告をCocoonに導入する方法について書きたいと思います。
表示する記事数の設定
インデックスページの記事の表示数が偶数で、かつ表示方法を2列にしている場合（表示方法が1列の場合は、この項目は読み飛ばしていただいて大丈夫です）。
インフィード広告を1つ挿入すると「記事 + インフィード広告」でインデックスページには奇数分の記事が表示されることになります。
それを2列表示すると奇数なので2で割り切れずに、当然ページの最後には以下のように1記事分の不自然な空白が生まれてしまいます。
これを防ぐために、投稿の表示数をインフィード広告を考慮したものに変更する必要があります。
つまり現在、インデックスページに10記事表示しているのであれば、インフィード広告を差し引いた
10 - 1（インフィード広告）= 9
がインフィード広告を考慮した表示記事数となります。
Cocoonのダッシュボードにログインし「設定」→「表示設定」をクリック。
表示設定画面になるので「1ページに表示する最大投稿数」を9に変更し、「設定を保存」をクリックします。
これで「9記事 + 1インフィード広告」となり、2列表示をしたときに空白が生じることを避けることができます。
インフィード広告を作成してCocoonに設定する
ここからの手順は
モバイル用のインフィード広告作成 → Cocoonに設定 → PC用のインフィード広告を作成 → Cocoonに設定
という流れになるので、Google Adsensの管理画面とCocoonのダッシュボードをそれぞれ別のタブで開いて作業したほうがスムーズかもしれません。
モバイル用インフィード広告の設定
まずモバイル用のインフィード広告から設定します。
モバイル用のインフィード広告のコードを取得する
Google Adsensの管理画面にログインします。
そして「広告」という項目をクリックすると現れる「サマリー」をクリック。
「サマリー」画面になるので、「新しい広告ユニットの作成」から「インフィード広告」をクリック。
「インフィード広告の作成」という画面になるので、「自動で広告スタイルを作成する」という項目のURL欄に自分のブログのトップページのURLをコピペし、デバイスが「モバイル」になっていることを確認して「ページをスキャン」ボタンをクリック。
ページの分析が始まります。
分析が終了すると広告プレビューが表示されるので確認し「次へ」をクリック。
「こちらがお客様の広告です」という画面になります。
ここでは、広告にユニット名をつけたり、広告の見た目についての細かなカスタマイズをすることができます。
Googleが自分のブログに馴染むようにいい感じにスタイルを設定してくれるので、こだわりがなければ広告ユニット名だけ設定しておけばOKです。
「保存してコードを取得」ボタンをクリック。
「間もなく完了します。広告を配置してください」という画面になるので「コードをコピー」をクリックしてモバイル用のインフィード広告のコードをコピーし「作業完了」ボタンをクリック。
これでモバイル用のインフィード広告のコードを取得することができました。
Cocoonの設定を行う
Cocoonのダッシュボードから「外観」→「ウィジェット」をクリック。
ウィジェットの一覧が表示されるので、「[C]広告（モバイル用）」というウィジェットを探します。
「[C]広告（モバイル用）」ウィジェットが見つかったら、右側にある小さな▼をクリックすると挿入場所を選択するセレクトボックスが表示されます。
セレクトボックスをスクロールさせていくと、インデックスリストトップ、インデックスリストミドル、インデックスリストボトムという項目があります。
記事一覧にインフィード広告を表示するためには、この3つのうちのどれかを選択する必要があります。
トップ、ミドル、ボトムの違いは広告の表示位置の違いです。
| インデックスリスト |
インフィード広告の表示場所
|
| トップ | 記事一覧の最初 |
| ミドル |
記事一覧の4番目
|
| ボトム | 記事一覧の最後 |
自分が広告を表示させたい場所を選択してください。
今回はインデックスリストミドルを選択しました
選択し終わったら「ウィジェットを追加」ボタンをクリック。
するとインデックスミドルにウィジェットが挿入され、広告タグをコピペする欄が現れます。
そこに先ほどコピーしたインフィード広告のコードを貼り付け。
広告フォーマットの部分は「広告コードをそのまま表示」のままでOKで、「広告ラベルを表示する」は自分の好みで設定し、「保存」ボタンをクリックして設定を保存します。
続けて「完了」をクリックしてウィジェットを閉じます。
以上でモバイル用のインフィード広告の設定は完了です。
モバイル環境で広告が表示されているか確認してみると、トップページ（インデックスページ）の4記事目がインフィード広告になっています。
無事、モバイル用のインフィード広告が表示されるようになりました！
やったぜ！
PC用のインフィード広告の作成
続けてPC用のインフィード広告の設定を行います。
モバイル用のインフィード広告とほぼ同じ手順の繰り返しです。
PC用のインフィード広告のコードを取得する
Google Adsensの管理画面で「サマリー」→「広告ユニットごと」→「インフィード広告」をクリック。
「インフィード広告の作成方法」画面で「自動で広告スタイルを作成する」のURL欄にブログのトップページのURLをコピペし、デフォルトでは「モバイル」になっている部分を「Desktop」に変更して「ページをスキャン」をクリック。
ページの分析が終わると広告プレビュー画面になるので「次へ」をクリック。
「こちらがお客様の広告です」という画面になるので、広告ユニット名を設定して「保存してコードを取得」をクリック。
「間もなく完了します。広告を配置してください」という画面になるので、「コードをコピー」をクリックしてPC用のインフィード広告のコードをコピーして「作業完了」ボタンをクリック。
これでPC用のインフィード広告のコードを取得することができました。
Cocoonの設定
Cocoonのダッシュボードの「外観」→「ウィジェット」をクリックし、ウィジェットの中から「[C]広告（PC用）」を探す。
▼をクリックすると挿入場所を選択するセレクトボックスが現れるので、インデックストップ、インデックスミドル、インデックスボトムのうちから好みの表示場所を選択し「ウィジェットを追加」をクリック。
[C]広告（PC用）ウィジェットが開くので「広告タグ」欄にコピーしたPC用のインフィード広告のコードを貼り付け、広告ラベルは自分の好みに設定し、「保存」ボタンをクリック。
続けて「完了」をクリックしてウィジェットを閉じます。
以上でPC用のインフィード広告の設定は完了です。
PCでブログのトップページを確認してみると4番目にインフィード広告が表示されています。
やったぜ！
これでインフィード広告に関する作業は完了です！
10分あれば設定できます
以上がCocoonでのインフィード広告の設定方法でした。
インフィード広告を独自にカスタマイズする必要がなければ、広告自体の設定はモバイル用とPC用を合わせても10分もかからずにできると思います。
導入してみて結果が思わしくなけば、ウィジェットの削除だけで広告は消せるので、まだインフィード広告を導入したことがない場合には、とりあえず導入して様子を見てみるものいいんじゃないでしょうか。
テーマにCocoonを使っているブログに、インフィード広告を導入する際の参考になれば幸いです。
それでは、またー。
コメント