はてなブログに AdSense インフィード広告を貼る

はてなブログにインフィード広告を貼る


さほどアクセスもないブログしか書いていませんが、せめてはてなブログの利用料くらいは広告でまかなえないかと Google AdSense を利用しています。その程度の意識ですので、つい最近まで1ページに3つまでとの制約がなくなったことも知りませんでした。

で、今回、「そんなには褒めないよ。映画評」をリニューアルした際にあらためて AdSense を見てみましたら、インフィード広告なるものがあります。はてなブログにもこれを貼れないかという話題です。



インフィード広告とは?

ネイティブ インフィード広告 - AdSense ヘルプ


今更私がインフィード広告について説明することもありませんのでリンクを貼っておきます。要は、はてなで言えば、一覧表示のコンテンツの間に表示する広告という理解でいいと思います。

具体的には、記事の一覧表示 /archive やトップページを一覧表示にした場合に記事リストの間に記事と似たレイアウトで広告を挿入することができるというもののようです。


はてなブログには貼れないんじゃないの?

インフィード広告の作り方はググっていただければたくさんヒットしますので省略です。

で、それをはてなブログに貼ろうにも公式ではその方法が提供されていません。ならば、Javascript に頼るしかありません。

ですので、この方法は、AdSense のプログラムポリシーを遵守した方法なのかははっきりしていません。ですので、もしこのスクリプトを使われる場合でも自己責任でお願いします。


AdSense インフィード広告をはてなブログに貼るスクリプト

フッタに入れてください。

<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 google_ad_client = "ca-pub-****************";
    var slot = **********;
    var key = "**************";
    // ここまで
    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>


うまくいけば、こうなるはずです。くれぐれも自己責任で。

www.movieimpressions.com