Someday Somewhere

A little something to say in my everyday life

Google AdSenseのインフィード広告を入れてみた

今までに数回、Google AdSenseからのメールで紹介されていたインフィード広告。 「サイトに馴染むデザインで、読み手にも違和感を与えないインフィード広告を入れてみませんか~」みたいな。

インフィード広告を作成する

今までは「ふ~ん」って感じだったのですが、今回使ってみることにしました。 参考にさせて頂いたサイトさん(↓)。 Google AdSenseにログイン後、インフィード広告の設定を一つ一つ画像入りで丁寧に説明してくれています。 (なので、一つ一つの具体的な手順はここには書きません。)

www.weblog-life.net

affiliate-couple.hatenablog.com

インフィード広告を作成し「保存してコードを取得」すると、スクリプトコードが表示されます。 この「コード スニペット」をメモ帳等にコピペしておきます。

【スポンサーリンク】
 

 

スクリプトコードをはてなブログに設置する

貼り付けるコードを作成する

先ほどメモ帳等にコピペしたコードスニペットを見ると、下記のような箇所を見つけることができると思います。

data-ad-layout-key="-xx+xx-xx-xx+xx"
data-ad-client="ca-pub-0yyyyyyyyyyyyyyy"
data-ad-slot="zzzzzzzzzz"

このx・y・zの部分を下記コードのx・y・zの場所に書き込みます。

<script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"></script>
<script>
Ads.Infeed.init('<center><ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-0yyyyyyyyyyyyyyy" data-ad-layout-key="-xx+xx-xx-xx+xx" data-ad-slot="zzzzzzzzzz"></ins></center>');
</script>
<style>.infeed_slot{width:100%;height:○○○px;margin-top: -○○px;padding-bottom: ○○px;}</style>

また、青字の〇〇とある箇所に数字を書き込みます。 ここは使っているブログデザインによって異なります。

ちなみに当ブログでは以下のようにしてあります。

<style>.infeed_slot{width:100%;height:210px;margin-top: -18px;padding-bottom: 22px;}</style>

コードを貼り付ける

はてなブログの管理画面から「デザイン」→「カスタマイズ」→「フッタ」と進み、フッタのHTMLを書き込む場所に、上で作成したコードを貼り付けます。

まとめ

一番始めのインフィード広告を作成する段階で、広告のデザイン、コンテナの幅、広告に表示される画像サイズなども決めることができます。 また、一度コードを設置してしまえば、後で設定内容を変えてもコードを再度貼りなおす必要はなく、変更した内容が更新されるようです。

当ブログのトップページは記事一覧になっており、表示される記事数は10個にしてあります。 そこに4つほどのインフィード広告が現れています。 ただ、次のページも同じように4つの広告が現れるかというとそうでもないようで・・・。 どんなものか暫く様子を見ようと思います。