はてなブログ

はてなブログ・トップページにアドセンスのインフィード広告を入れ収益アップする方法

これ、ずーーーっとやり方探していたんです。

トップページやカテゴリ別の記事一覧に、グーグルアドセンス の広告を入れる方法。

私はInnocentを使っているのですが、いくら試しても全然できなくて、ここ2ヶ月ほどコピペでできる方法を探していたんですね。

で、先日やっと発見しましたので、ご紹介します。

 

 出来上がり図

こんな感じになります。

1枚目の写真がトップ一覧で、2枚目がカテゴリー記事一覧です。

はてなブログのトップページにグーグルアドセンスのインフィード広告を入れたもの
はてなブログのトップページにグーグルアドセンスのインフィード広告を入れたもの

写真ではうまく見れませんが、この仕様は5記事ごとに広告が出てくるものです。

今回参考にした記事は、コチラです。

【Google】記事と記事の間に表示されるインフィード広告を設定してみた – フリーランス チャレンジ!!

私がこの記事を見つけたのは、投稿52分後でした。

かなりタイムリーに出てきて助かりました。

アドセンスでインフィード広告を作る

設定1

まずははてなぶろぐの管理画面→設定→詳細設定→トップページの記事数を5記事以上にしましょう。

私は11記事にしました。

設定2

●アドセンスの管理画面から広告→広告ユニットをクリックし、インフィード広告をクリック。

はてなブログにインフィード広告を設置する方法

●次に、自分のURLを入れて、モバイルをDesktopに変え、ページをスキャンをクリック。

●インフィード広告のイメージが表示された画面になったら、右下にある「次へ」を押す。

●最後にユニット名名前をつけ(例インフィードトップなど)、保存してコードを取得」をクリック。その他のデザイン設定などは、特にしなくて大丈夫です。

グローバルオプションの項目で、ディスプレイ広告の表示をONにするというのは、もしインフィード広告が表示されない時は、ディスプレイ広告が表示されるようになるので、収益面を見てもそのままONがいいと思います。

●コードが表示されたら、メモにコピペ

URLはトップページのアドレスをコピペでOKです

ユニット名は「kiji itiran」(記事一覧)と私はつけました。

コピペで簡単スクリプト

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

<script> (function(){

var adsScript = document.createElement(“script”);

adsScript.innerHTML = “(adsbygoogle = window.adsbygoogle || []).push({});”;

// 以下それぞれ個別のデータを設定する

var key = “AAAAAAAAAAAAAAAAA

var google_ad_client = “BBBBBBBBBBBBBBBBBBBBBB“;

var slot =”CCCCCCCCCC

// ここまで

var adsDiv = document.createElement(“div”);

adsDiv.innerHTML = ‘<ins class=”adsbygoogle” style=”display:block” data-ad-client=”‘

+ google_ad_client + ‘” data-ad-slot=”‘

+ slot + ‘” data-ad-format=”fluid” data-ad-layout-key=”‘

+ key + ‘”></ins>’;

adsDiv.appendChild(adsScript);

// css 設定用

adsDiv.classList.add(“ads-infeed”);

// 記事一覧ページの場合 //

トップページなら page-index

if(document.body.classList.contains(“page-archive”)){

var parentElement =document.getElementsByClassName(“archive-entries”)[0];

var j = parentElement.childElementCount; //

5記事おきに入れる場合 for(var i=5; i<j; i=i+6) {

parentElement.insertBefore(adsDiv.cloneNode(true), parentElement.children[i]);

j++;

}

}

}());

</script>

先ほどコピーしたアドセンスのコードの以下の部分を、上記スクリプトのA、B、Cにコピーする。

f:id:neyukix:20181017060517p:plain

最後に

これをはてなブログのデザイン→レンチマーク→フッタに貼り付け。

Innocentはレスポンシブなので、スマホの設定は何もしなくてOK。

レスポンシブじゃ無い人は、スマホの方のフッタにコピペで終了です。

お疲れ様でした。次ははてなブログでアドセンス広告を2列表示する方法を試して収益アップしませんか?こちらは5分もあればできますので。

また、アドセンスのクリック率が低いとお悩みの方は、実践!私がアドセンスのCTRを1,6%まで上げた2つの方法を試してみてください!