【はてなブログ】ホーム画面にGoogle AdSenseのインフィード広告を挿入する

Google AdSenseのインフィード広告をホーム画面の記事一覧の中に織り込みたいのですが、はてなブログでは公式にその方法が提供されていません。

今回は、はてなブログでも疑似的にインフィード広告を配置する方法を紹介します。

前提として
インフィード広告を挿入するコード
- HTML
- CSS
まとめ

前提として

今回の記事は、インフィード広告についての知識やコード作成方法、はてなブログでのカスタマイズ方法をすでに知っていることを前提に書いています。知らない方は、事前にGoogle AdSenseやはてなブログのヘルプページなどで確認をお願いします。

また、インフィード広告を公式的に貼る方法は提供されていないため、今回紹介する方法はGoogle AdSenseおよびはてなブログのポリシーに遵守した方法か不明です。この方法を使用して生じた不利益に関しては、当ブログは一切責任を負いません。自己責任でお願いします。

インフィード広告を挿入するコード

事前にGoogle AdSenseで広告のコードを取得してください。取得したコードの内、以下の値を使用するため保存しておいてください。

data-ad-layout-key
data-ad-client
data-ad-slot

HTML

以下内容を書き換えたコードをフッタ等に貼り付けてください。

広告データDATA_AD_LAYOUT_KEYDATA_AD_CLIENTDATA_AD_SLOTを保存した値に変更
- この時、元データのダブルクォーテーション「"」は外してください
広告を配置する間隔AD_INTERVALを好みの値に変更
- 5の場合、5記事表示 → 広告 → 5記事表示 → 広告 → ・・・と記事表示が終わるまで繰り返します

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script>
// 広告データ
const DATA_AD_LAYOUT_KEY = '***************';
const DATA_AD_CLIENT = 'ca-pub-****************';
const DATA_AD_SLOT = '**********';
// 広告を配置する間隔
const AD_INTERVAL = 5;

(function() {
    const adScript = document.createElement('script');
    adScript.innerHTML = '(adsbygoogle = window.adsbygoogle || []).push({});';

    const adDiv = document.createElement('div');
    adDiv.innerHTML = 
        '<ins class="adsbygoogle" '
        + 'style="display:block" '
        + 'data-ad-format="fluid" '
        + 'data-ad-layout-key="' + DATA_AD_LAYOUT_KEY + '" '
        + 'data-ad-client="' + DATA_AD_CLIENT + '" '
        + 'data-ad-slot="' + DATA_AD_SLOT + '"></ins>';
    adDiv.appendChild(adScript);
    // CSS用にクラスを追加
    adDiv.classList.add('ad-infeed');

    if (document.body.classList.contains('page-index')) {
        const parentElement = document.getElementsByClassName('archive-entries')[0];
        let j = parentElement.childElementCount;
        
        for (let i = AD_INTERVAL; i < j; i = i + AD_INTERVAL + 1) {
            parentElement.insertBefore(adDiv.cloneNode(true), parentElement.children[i]);
            j++;
        }
    }
}());
</script>