はてなブログ記事下にAdsenseを表示する方法（全ページ一括・関連記事よりも上に表示）

Adsense広告は記事のすぐ下が、一番クリックされやすいです。

記事を読み終えた人が、一息ついて、次の行き先を探すからです。

なので、やっぱり記事下にAdsense広告をぜひとも貼りたいところ。

f:id:toyo--104:20180520235316p:plain

はてなブログの記事下にAdsenseを表示するには、管理画面から、

デザイン⇒カスタマイズ（スパナのマーク）⇒「記事上下のカスタマイズ」の「記事下」に、Adsenseのコードを追記

すれば表示されるようになります。

便利な機能ですね。

f:id:toyo--104:20180520220354p:plain

記事上下のカスタマイズと、関連記事の記事下表示は相性悪い

ただ、同じ設定画面にある「関連記事を記事下に表示する」をチェックすると、関連記事の下にAdsenseコードが表示されます。

f:id:toyo--104:20180520220532p:plain

こんな感じです。

関連記事の下だと、クリック率も下がりますので、できれば記事下に表示したいところ。

f:id:toyo--104:20180520221052p:plain

でも、関連記事は、ブログの回遊率を高めるためにも表示しておきたいんですよね。

このコードを「記事下」に追記すればOK

さて、そこで、記事下にAdsenseを表示するためのコードを作ってみました。

まずは、以下のコードをコピーしてみてください。

<script>
addEventListener("DOMContentLoaded", function() {

  // 記事以外なら表示しない
  var regex = new RegExp("/entry/.*");
  if(location.pathname.match(regex) != null){
    var entry_con = document.getElementsByClassName('entry-content');

    for (var i = 0, len = entry_con.length; i < len; i++) {
    
      var adsScript = document.createElement('script');
        adsScript.async = true;
        adsScript.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      
      var adsInsert = document.createElement('ins');
        adsInsert.className = 'adsbygoogle';
        adsInsert.style.display = 'block';
        adsInsert.dataset.adClient = 'ca-pub-****************';
        adsInsert.dataset.adSlot= '**********';
        adsInsert.dataset.adFormat = 'auto';

      var adsGoogle = document.createElement('script');
        adsGoogle.text = '(adsbygoogle = window.adsbygoogle || []).push({});';

      entry_con[i].insertAdjacentHTML('beforeend', "<p>スポンサーリンク</p>");
      entry_con[i].appendChild(adsScript);
      entry_con[i].appendChild(adsInsert);
      entry_con[i].appendChild(adsGoogle);
    }
  }
});
</script>