はてなブログ記事下に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 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>