はてなブログの記事と記事の間にアドセンス広告を貼りたい

概要

Google Adsenseの審査が通ったので広告を設置していたのですが、Topに表示される記事と記事の間に広告を入れたかったもののデザインページにそれらしいセクションがなく、Javascriptで挿入することにしました。

コード

JQuery非依存で頑張って実装したコード

<script>
/**
 * 記事一覧の記事と記事の間にGoogle Adsense広告を表示する。
 * JQuery非依存です。
 */

// 広告を挿入する
function insertAdsbygoogle() {
    // 広告表示対象のクラス名
    var adsenseTag = "adsbygoogle";
    // 広告表示後の退避クラス名
    var adsenseViewedTag = adsenseTag + "-viewd";

    // getElementsByClassNameの結果を配列に変換
    Array.prototype.forEach.call(
        // フッターの子要素に広告を挿入する
        document.getElementsByClassName("entry-footer"),
        // 配列全ての要素へ挿入する（foreach）
        function(value, index, array) {
            // 広告用のタグを挿入する
            var ins = document.createElement("ins");
            ins.classList.add(adsenseTag);
            
            // TODOそれぞれに適切な文字列を設定してください
            ins.setAttribute("style",              "TODO");
            ins.setAttribute("data-ad-format",     "TODO");
            ins.setAttribute("data-ad-layout-key", "TODO");
            ins.setAttribute("data-ad-client",     "TODO");
            ins.setAttribute("data-ad-slot",       "TODO");
            value.appendChild(ins);
            
            // 広告を表示させる
            (adsbygoogle = window.adsbygoogle || []).push({});
            
            /**
             * 広告用のタグのクラス名を変更する。
             * adsense側のコードが最初に見つけたadsbygoogleの要素にのみ広告を表示する為、
             * 処理済みのタグはクラス名を一時的に変更する。
             */
            ins.classList.add(adsenseViewedTag);
            ins.classList.remove(adsenseTag);
        }
    );
    
    Array.prototype.forEach.call(
        document.getElementsByClassName(adsenseViewedTag),
        function(value, index, array) {
            // 変更していた広告用のクラス名を元に戻す
            value.classList.add(adsenseTag);
            value.classList.remove(adsenseViewedTag);
        }
    );
};

/**
 * ガード節 Topページでなければ実行しない。
 * bodyはページに対して一つしかないはず。
 */
if(document.querySelectorAll("body.page-index").length == 1) {
    // 広告を挿入する
    insertAdsbygoogle();
}
</script>

 残念ながらこちらのコードはまるまるコピペしても動きません。TODO文字列に適切な文字列を設定してご利用ください。ちなみに貼り付け先はフッターです。

終わりに

当初はJQueryを利用したコードでしたが、この為だけにいちいち外部ソース読み込むの手間かなと思い非依存を目指して作りましたが、どうやら既にどこかしら使われているらしく別途読み込む処理を書かずに動作するようでした。間違ってたらすみません。

ネイティブ インフィード、レスポンシブの広告を貼る為に作りましたが、他種の広告でも利用できるかは未確認です。また、当ソースコードは自由に利用して貰って大丈夫ですが、責任までは持てないので自己責任での利用をお願いします。