masalibの日記

システム開発、運用と猫の写真ブログです

Googleアドセンスの自動広告が表示されない・・・諦めて見出し前に広告を設置するjavascriptを追加

masalib.hatenablog.com

色々やったが、どうしても表示されなかった。諦めてjavascriptで無理やり表示するように仕込んだ

設定内容

見出しタグ(H3)に対して毎回、広告を表示するのは、広告をアピールしすぎるので 3の倍数の時に表示するように変更した 参考サイトのjavascriptだと、なぜかレスポンシブが崩れるという問題があったので作り変えた。

設定したタグ

「デザイン」→「カスタマイズ」→「記事」→「記事上」にコードを追加します 当たり前ですが、必ずバックアップをとってから作業をしましょう!!

f:id:masalib:20181219193500p:plain
はてなブログ編集のデザインのヘッダー

実際に設置したソース

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
var iNumber = 0;

addEventListener("DOMContentLoaded", function() {
    $(".entry-content > h3").each(function() {
        if (( iNumber % 3 ) == 0){
            $(this).before(`
            <!-- 広告タグ開始-->
            <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-1411576193652714"
             data-ad-slot="5404507033"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
            <!-- 広告タグ終了-->

            `);
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
        iNumber++;
    });

}, false);
</script>

広告タグ開始から終了までが変更箇所になります
レスポンシブを崩れてなかったのでこちらにしました

参考URL

http://pea-nut.hatenablog.com/entry/hatenaburogu-midasi-koukoku

http://tamasaburo.com/entry/hatenablog-adsense-in-the-article