お金プログラム ~だれでもノマド~

ノマド的な稼ぎ方、投資、IT系(プログラミング)に関するブログです。

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

 

★注意点★

adsInsert.dataset.adClient = 'ca-pub-****************';
adsInsert.dataset.adSlot= '**********';

の部分は、ご自分のコードに書き換えて下さい。

 

Adsenseのコードに、

data-ad-client」「data-ad-slot」と2つ記載があると思います。

これを転記すれば大丈夫です。

 

コピーしたコードは、設定⇒「記事上下のカスタマイズ」⇒「記事下」に、ペーストして、保存してください。

 

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

 

記事下に、Adsense広告が表示されたでしょ?

どうでしょう?

 

各ページの記事下かつ、関連記事の上に、Adsense広告が表示されたでしょうか?

 

以下の画面みたいになれば成功です!!

 

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

 

こんな感じで、今後もお役立ち情報を書いていこうと思います。

今回は、以下のリンクも参考にさせていただきました。

 

www.imuza.com

 

english-apple-diy.hatenablog.com

 

また、最後にですが、今回の方法が、Adsenseの運営ポリシーに違反していないか特に確認してません。万一、アカウント停止になっても責任取れませんので、そこだけご注意くださいね。(個人的には大丈夫だと思ってます)