golangの日記

Go言語を中心にプログラミングについてのブログ

はてなブログで Googleアドセンスを記事の直下に貼る

はてなブログ

default-gray.png


タイトルにある直下とは、記事下のソーシャルボタンの直前のことです。
はてなブログを無料版で使っているとソーシャルボタンの下に はてなの広告が挿入されますが、その上に表示してやろうという話です。

以下 JavaScript を使ったその手順





1: 広告コードの一番上の部分をヘッダに貼り付ける

ブログに複数のgoogleアドセンス広告を貼る場合でもヘッダーに一つ貼っておけばよい。スマホも同じ

  • 設定 -> 詳細設定 -> headに要素を追加
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


2: それ以下の部分をJavaScriptでフッタに埋め込む

[Client ID] と [Slot ID] は、それぞれ広告コード内の data-ad-client と data-ad-slot の値で、 ins.dataset. 以降に キャメルケース でセットします。
その他の data-ad-xxx がある場合も同じ要領でセットします。

  • デザイン -> カスタマイズ -> フッタ
    <script>
        let ins = document.createElement("ins");
        ins.className = "adsbygoogle";
        ins.style = "display:block";
        ins.dataset.adClient = "[Client ID]";
        ins.dataset.adSlot = "[Slot ID]";
        ins.dataset.adFormat = "auto";
        ins.dataset.fullWidthResponsive = "true";
        let entry = document.getElementsByClassName("entry-content")[0];
        if (entry) {
            entry.appendChild(ins);
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    </script>


スクリプトの意味としては、広告コードにある <ins ...> の部分をJavaScriptで動的に生成して、 記事の終わりに追加しようということです。 .entry-content が記事本文なのでその中の一番最後に appendChild してます。


無料版では、アドセンスの審査に通らないとの記事を見たので、試してみたところ3回目で通りました(2019年)。 ※ 現在は課金して はてなpro を使ってます