Vaster2にAdSense インフィード広告を導入してみた Blogger | Vaster2カスタマイズ

どうも。
12月に入ってから、本気の寒さが続いていますね。
今日13日〜14日はふたご座流星群がピークらしいですが、いつまでも外にいられない位寒いです。

さて、アドセンスの設定について、少し変更してみましたのでメモしておきます。


Blogger|Vaster2のトップページ投稿一覧に広告を挿入

AdSenseの新しい広告ユニットの1つインフィード広告について、従来のBlogger標準機能との違いと、導入についてまとめましたので、参考までに。
まず従来の機能より。

Bloggerの標準機能で投稿間に広告を表示

Bloggerのレイアウト設定で、トップページの投稿間に広告を容易に表示する事が可能な機能があります。
従来からある機能ですが、あまり使っている人がいないような…

では、設定方法です。
Bloggerの管理画面から、レイアウト>>main ブログの投稿 編集と進むと「投稿の間に広告を表示する」チェックボックスがあるので、チェックを入れます。

「インライン広告を設定する」の項目で投稿何件おきに広告を表示するか、広告の表示形式等が設定できます。

保存してトップページを読み込む投稿間に広告が表示されます。

 
非常に簡単なステップで広告を表示する事ができますが、ブログのテンプレートデザインとの相性はあまり良くない様に見えます。


Blogger|Vaster2にインフィード広告を導入

AdSenseの新しい広告が2つ追加されました。
一般公開は2017年下半期に入ってからだったと思います。

以前、新しい広告の1つである、記事内に表示する広告をやりましたが、今回はインフィード広告です。

前述のBlogger標準の投稿間に表示される広告と同様のものですが、専用レイアウトによる画像/広告タイトル/説明(スニペット)…等の組合せを選択がする事が可能で、投稿間にさり気なく表示されます。

但し、残念ながらBloggerの設定だけで使用する事は出来ず、他のブログサービスと同様にAdSenseからコードを取得して、テンプレートのHTMLに記述する必要があります。

当ブログのテンプレート「Vaster2」にもインフィード広告のコードを導入してみたので、メモしておきます。 

尚、変更については自己責任でお願いします。

AdSenseでインフィード広告コードの取得

AdSenseにログインして、設定>>広告ユニット>>新しい広告ユニットと進み「インフィード広告」を選択します。

表示される広告のフォーマットを好みで設定する事も可能です。
記事内広告の時より設定項目が多くなっています。
基本的にはデフォルトで良いと思いますが、お好みで変更してください。

設定が良ければ「保存してコードを取得」をクリックして、コードを取得します。
取得したコードはHTMLに書き込む事になります。

設定で気になることが…

今回設定していて気になった事が1つ。
グローバルオプションの設定で「選択したディスプレイ広告を表示する」について、オンにした方が良いのですが、ちょっと悩ましい事があります。

オンにすると、ネイティブ広告が適用されなかった時に従来通りディスプレイ広告が表示されます。(適用されない状況がわかりませんが。)

その場合、以下の様な統一感の無い広告表示になる場合もあります。(スマホ表示だと多い気がする。)
Blogger | Vaster2 にインフィード広告

GoogleによればオフにするとCPMが下がると言っていますので、悩ましい所ですがオンしました。

テンプレートHTMLの変更

続いて、Bloggerの管理画面よりテーマ>>HTMLの編集と進みテンプレートのHTMLを変更します。

以下の編集は、「Vaster2」になります。

今回は、トップページの投稿にインフィード広告を2つ表示させます。
投稿を3個表示した後に1回目の広告を表示。
再び投稿を3個表示して、2回目の広告を表示します。

テンプレートのバックアップを取ってから変更しましょう。

投稿のloop値に変数を指定

<b:loop values='data:posts' var='post'>を検索します。
見つかったら、loopタグに対して以下の通り繰り返し変数「index='index'」を追加。
<b:loop values='data:posts' var='post' index='index'>
  *保存すると自動で記述順序が変わりますが、大丈夫です。

インフィード広告を表示されるコードの追加

続いて<!--関連記事ここまで-->を検索します。
私の場合、その少し下に以下の青字追加してみました。

<!--関連記事ここまで-->
<b:if cond="data:blog.pageType == &quot;static_page&quot;">
 <b:include data="post" name="comment_picker">
 </b:include>
</b:if>
<b:if cond="data:blog.pageType == &quot;item&quot;">
 <b:include data="post" name="comment_picker">
 </b:include>
</b:if>
<!--IN-FEED 広告-->
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:index == 2'>
<div class='infeed'>
ここにアドセンスのコード
</div>
</b:if>
<b:if cond='data:index == 5'>
<div class='infeed'>
ここにアドセンスのコード
</div>
</b:if>
</b:if>

投稿3個おきに広告を2回表示

上記コード<b:if cond='data:index == 2'>の部分が投稿xx件おきに広告表示する設定の箇所です。
インデックスは0から始りますので、インデックスが2になった時(投稿を2回繰り返し=投稿数が3個)に1回目の広告を表示。

同様に<b:if cond='data:index == 5'>はインデックスが5になった時(投稿を5回繰り返し=投稿数が6個)で2回目の広告を表示させています。

loopタグについては、Blogger公式ヘルプに詳細有りです。

アドセンスコードをHTMLに追加

HTMLに追加した上記コード(青字部分)の、「ここにアドセンスのコード」と書かれている箇所を、先程AdSenseより取得したインフィード広告のコードに置き換えます。

保存してエラーが無ければ、HTMLの変更は完了です。

ブログホームを見てみます。

Vaster2 インフィード広告の例

オーバレイ(グリーン)の部分がインフィード広告です。

上記スクリーンショットの状態は、一部cssを調整しています。
投稿と広告のマージンやボックスの影を消す等を.post-outerの箇所で変更しています。

インフィード広告は導入すべきか?

さて、インフィード広告なる物は収益的に効果があるのでしょうか?

投稿一覧にさりげなく表示されているので、ブログのデザインを崩す事は無いと思いますが、広告を入れる事により収益が上がるとは思えません。

常連さんが、トップページから閲覧される場合等は、効果があるかもしれません。

しかし、大半の閲覧者が、キーワードを検索して投稿をダイレクトに閲覧しに来るようなブログになると、収益Upに期待は出来ないと思います。


以上



0 件のコメント:

広告

当ブログの人気投稿

ブログ アーカイブ