ジプシージャズ入門

ジプシージャズやドイツでの育児について

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

Sponsored Link

はてなブログのトップページ記事一覧にアドセンスの広告を入れる方法

こんにちは。

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

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

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

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

目次

 出来上がり図

こんな感じになります。

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

f:id:neyukix:20181017044516p:plain f:id:neyukix:20181017044511p:plain

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

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

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

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

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

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

設定1

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

私は11記事にしました。

設定2

●アドセンスの管理画面から広告の設定→コンテンツ→広告ユニットをクリックし、左上にある新しい広告ユニットをクリック。

●次の画面のインフィード広告をクリックで、次に進んでいきます。

●新しいインフィード広告というページに来たと思いますので、自分のURLを入れて、モバイルをDesktopに変え、ページをスキャンをクリック。

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

●最後にユニット名を自分がどこの広告か分かる様に名前をつけ、保存してコードを取得」をクリック。

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

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。

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