一億総脱サラ

やりたい事全部やるブログ

【はてなブログ】インフィード広告掲載の手順【Googleアドセンス】

最新のグーグルアドセンスは最初3つの広告ユニットがあります。
ディスプレイ広告・インフィード広告・記事内広告の3種類です。残念ながらリンク広告は廃止されてます。

はてなブログだと、インフィード広告を貼るのに少しだけやる事があります。



はてなブログでインフィード広告を掲載する手順

はてなブログでインフィード広告を貼ろうとしても、そのままでは貼れません。
少しだけ手を加えると掲載できるようになります。

収益化への第一歩

収益化目指している方の第一歩はGoogleアドセンスではないでしょうか?

なかなかアドセンス合格しない!

という方にはコチラ↓少しでも参考になれたら嬉しいです。
www.pierre7.work

アドセンスの変更点

アドセンスもかなり様変わりしてまして、

最近合格した方はリンク広告がありません^^;←私もです

下調べではリンク広告の収益率が高いとか書いてありましたが、残念ですね。

昔からのアドセンスユーザーもリンク広告が廃止されるそうですよ。もうされたかも?

はてなの営利目的解禁にあたり、ちょっとアドセンス関連を記事にしてみました。

少しでも収益上げる為の方法です。

20190903034117
おそらく、多くの方はディスプレイ広告、記事内広告を使っているのではないでしょうか?
(関連コンテンツ解放されてないのはスルーしてくださいw)

インフィード広告とは?

私のブログトップですが、青線に囲まれてるのがインフィード広告です。
20190903034804

どうですか?

かなり違和感なく溶け込んでますよね?

日々アップされた記事を見て頂くだけでは、トップは見て貰えないんですが、

アクセス解析を見てみると何故かトップの観覧数が多いので貼ってみました。


貼り付けの手順

はてなブログではインフィード広告を直で貼れません!

誰でも簡単にできる方法ご紹介します。

  • インフィード広告をクリック

20190903034117

  • 自動で広告スタイルを作成するを選択
  • ブログURLを貼り付ける
  • Desktopを選択

20190903040400

  • ページをスキャンをクリック

数秒後、こんな感じで表示されます
20190903040734

  • そのまま右下の『次へ』をクリック

すると
20190903041006
おそらく、自分のブログテーマに合わせて表示してくれてると思います。
微調整は後から出来るので、とりあえずグローバルオプションはイジらないでいいと思います。

  • 右側ページの広告ユニット名に任意の名前をつける

20190903041522

  • 右下の保存してコードを取得をポチッ

他の広告と同じように↓のようなコードがでたと思います

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="aaaaaaaaaaaa"
     data-ad-client="ca-pub-bbbbbbbbbbbbbb"
     data-ad-slot="cccccccccccc"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードをメモ帳でもなんでもいいので保存しておいてください

さあ、ここからが本番です
慎重にお願いしますよ^^

広告コードの
aaaaaaaaaa
bbbbbbbbb
ccccccccccc
の部分の文字列を下のコードのa,b,cに入れてください。

<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-bbbbbbbbbbbbb" data-ad-layout-key="aaaaaaaaaaaa" data-ad-slot="ccccccccccccccc"></ins></center>');
</script>
<style>.infeed_slot{width:100%;height:210px;margin-top: -18px;padding-bottom: 22px;}</style>

それぞれ"~~~~"の部分が大切ですよ
広告は上からa,b,c順ですが、下コードには左からb,a,c順ですので注意してね!

もう少し見やすくしたかったのだけど、知識不足ですいません^^,


ここまで出来たら、あと少し!

念のため、出来上がったコードをどこかに保存しておいてください。

  • デザイン→カスタマイズから

20190903051814

  • フッタを選択

20190903051822

  • 先ほどのコードをHTMLに貼り付け

注意:フッタに広告や、その他のHTMLを貼り付けてる場合は保存しておく事をお勧めします。

これで完成!!

スグ反映される事もありますが、30分くらいはお待ちください。

反映されない場合は・・・何か間違ってます^^;

コードの置き換えを見直してください。

表示されたけど、イメージと違うな~って方は

コードの最期の部分
width:100%
height:210px
margin-top: -18px
padding-bottom: 22px
をイジってみてください!
ここまで出来た方なら、これの意味わかりますよね?

インフィード広告の配列や数量などは・・・

只今勉強中なので変更の仕方知りませんw



※どうしも解らない場合はコメントください。
他の方にも解るように公開致します。
但し、答えれない場合がほとんどだと思いますw


それでは皆さん
収益化に向けて頑張りましょう^^/