【アドセンス】インフィード広告が使えるようになったので、はてなブログに設置しました

こんにちは、るびこです。

先日、Google AdSenseからメールがきました。

人柱です。

かなり手惑いましたが、一応設置できました。
インフィード広告とは何か、はてなブログへの設置方法などを紹介します。

[toc]

インフィード広告とは

記事一覧や商品一覧の一部として配信される広告です。
外観を記事一覧と近づけることで、広告っぽくなくできます。

広告っぽくないっていうのは、ブログのデザイン向上という観点ではありがたいです。
ただ、ユーザーとしては紛らわしいというデメリットもあります。
せっかくベータプログラムに選ばれたので、試験的に当ブログで設置してみようと思います。

nendなどでは有名でしたが、アドセンスでもインフィード広告を利用できるようになります。

まずは結果から報告しますね。
そのほうがわかりやすいと思います。

f:id:gu-none:20170401005850p:plain
記事一覧に設置しました。
はてなブログのトップページには力不足で設置することができませんでした。

詳しい人教えてください・・・。
トップページへのアクセスを記事一覧に飛ばすこともできますが、今のところしていません。
インフィード広告がよっぽど良さそうだったら考えます。

あと、申し訳程度にサイドバーにも置いてみました。多分意味ないでしょう。

f:id:gu-none:20170401010523p:plain
こんな感じになりました。
スマホサイトでは記事中に挟み込んでいます。

確かにバナー広告より見てくれは良くなりました。
スマホサイトはトップページにインフィード広告が配信されています。

せっかくスッキリしたので、タイトル下のバナー広告は外しました。
かなり収益性は良かったんですけど、増やした分減らして帳尻合わせようかと。

f:id:gu-none:20170401011131p:plain
▲広告の種類の選択画面から選べるようになります。

f:id:gu-none:20170401011201p:plain
▲デザインもサイトに合わせて選べます。

f:id:gu-none:20170401011246p:plain
▲設定画面はこんな感じです。
関連コンテンツと似てますね。

ちなみにサイズはサンプルをドラックして伸ばして指定できます。

f:id:gu-none:20170401011318p:plain
▲フォントなど、細かく指定することができます。
自分のサイトのものに近づけられます。

そして設定完了すると、HTMLコードが発行されるという手順です。

これが厄介なんですよ。
Webについて無知なのでとっても苦労しました。
といっても先人の知恵をお借りしただけなんですけどね。

池田仮名 (id:bulldra)さんのこちらの記事を参考にさせて頂きました。
bulldra.hatenablog.com
とっても分かりやすかったです。
言われたとおりにコピペすれば、インフィード広告も設置することができました。

これで記事一覧の一番上と、一番下にインフィード広告を置けます。
せっかくなので間にも差し込みたいのですが、方法は分かりません。

PCサイトと同じ方法で記事一覧の上下には設置しました。

記事の間へ差し込む方法は、id:kotokunohate さんの
kotokunohate.hatenablog.com
こちらの記事を参考にさせて頂きました。
記事中ではnendを使われてますが、アドセンスでも動きました。

Googleタグマネージャーというツールを使用するのですが、登録方法からわかりやすく解説してある記事だったので知識ゼロでもなんとかできました。
こちらの方法で、好きな位置にインフィード広告を設置できます。

ただ、この方法はPCでは応用できませんでした。
どこを書き換えればいいのか私にはさっぱり・・・。

はてなブログでインフィード広告なんて、どうやって貼ればいいんだ！？

って全く検討もつきませんでしたが、先人のお知恵をお借りしてなんとかそれっぽくはできたと思います。
引用させていただいたお二方ありがとうございました。

アドセンスのインフィード広告の実力は追って報告します。