はてなブログの記事ページに、いい感じにアドセンス埋め込むスクリプト。これで、自動広告設定をやめた！

無いなら作ろうシリーズ　第3.1弾
昨日の延長な感じなので3.1

アドセンスの自動広告に設定したら、記事ページがとっても読みにくくなり自動広告設定を止めたという記事を見かけたので、手間なくいい感じに記事ページに広告を突っ込むコードを書いてみました。

こんなのをつくりました

まずは結論からいきます。

はてなブログの記事内の大見出し（H3見出し）の直前にアドセンスの枠を突っ込みます。

困っていること

背景に戻りましょう。

はてなブログで記事の中にアドセンスを入れるには、JavaScriptのコードを自分で記事内に埋め込む必要があります。好きな位置に好きな広告を差し込むことができます。手作業によるばらまきです。これは記事を書くときに入れるのも面倒だし、あとから直すのも面倒になります。

かといって、アドセンスの自動広告の設定をすると、記事の意図しないところに入ってきてしまい鬱陶しくなってしまう。読み手に取っても書き手にとっても良いものであればいいですが、そうでないことが多いようです。

エンジニアの端くれとしては、

• 作業が面倒でなくて、
• 記事の書き手側が程よくコントロールが可能な

アドセンス広告の自動差し込みをやりたい！ということです。

迷惑にならない広告表示位置

文章のど真ん中に広告が入ってくると、さすがに読みにくいですね。じゃ、どの辺であれば許容範囲なのでしょうねぇ。。。

見出しの前後であれば、まぁ許容できそうかなと思いました。

ということで、はてなブログでいう大見出し<h3>タグの付近に入れてみることにしました。

※アドセンスのポリシーを確認しましょう

Googleアドセンスは、しっかりとしたポリシーが公開されています。
僕自身もポリシーを読んだ上でこの施策をやっていますが、この施策がポリシーに違反していないと約束するものではありません。規約やポリシーが変わることもありますので。

プログラムは公開しますので利用していただくのは自由ですが、そこで生まれる良いことも悪いことも自己で責任を負うということでお願いします。

AdSense ポリシー: 初心者向けガイド　*1
https://support.google.com/adsense/answer/23921

AdSense 広告コードの修正　*2
https://support.google.com/adsense/answer/1354736

やっと本題

前置きが長くなりました。さて、ここからがプログラムです。

プログラム

今回は、コメント入りで100行以内のソースコードです。JavaScriptで書かれています。

<script>

  /*説明
  <script>
    //記事側でコントロールできる変数
    //この記事で、h3のどの位置にadを差し込むかの指定。出したくない記事では[]。
    //記事側で変数を定義しなかったら[2,4]に差し込む
    let adPositionOfThis=[];

    //記事の最後にadを差し込みたくないときの指定。trueで抑止。falseで差し込み
    //記事側で変数を定義しなかったらfalse扱いで差し込み実行
    let avoidInsertLastOfThis=true|false;
  <\/script>
  */

  function insertAdsense() {
    console.info('-InsertAdsense start');
    let googleAdCode = `スポンサー<br><ins class="adsbygoogle"
            style="display:block"
            data-ad-client="ca-pub-0000"
            data-ad-slot="20000"
            data-ad-format="auto"
            data-full-width-responsive="true"></ins>`;

    //List形式の画面で記事を入れる場所。上から2個目と7個目のsectionの後に入れる。
    //一番上の記事を0と数えるので、3番目の下と8番目の下と、、、に入る
    let topAdPosition = [2, 7, 12, 17];

    //記事内で個別に指定されないときに使うAd挿入場所。
    //0から始まる値で、2を指定すると3番目の<h3>と直前に差し込む。2番目のh3の枠内
    let articleAdPosition = [2,4];

    if (document.querySelector('article')) {
      let entryBody = document.querySelector('div.entry-content');
      if (!entryBody) {
        return;
      }

      let position = (typeof adPositionOfThis !== 'undefined') ? adPositionOfThis:articleAdPosition;
      let avoidInsertLast = (typeof avoidInsertLastOfThis !== 'undefined')?avoidInsertLastOfThis:false;

      console.log(position);
      let list = entryBody.querySelectorAll('h3') || [];
      for (let i = 0; i < list.length; i++) {

        if (position.includes(i)) {
          let h3 = list[i];
          console.log(h3);
          let ad = createGoogleAdsenseDiv(googleAdCode, 'insert-adsense-js-article-h3');
          h3.parentNode.insertBefore(ad, h3);

          (adsbygoogle = window.adsbygoogle || []).push({});
          console.log('insert ad %s', i);
        }
      }

      if(!avoidInsertLast){
        let ad = createGoogleAdsenseDiv(googleAdCode, 'insert-adsense-js-article-last');
        entryBody.after(ad);
        (adsbygoogle = window.adsbygoogle || []).push({});
      }
    } else {
      let list = document.querySelectorAll('div.archive-entries section') || [];
      for (let i = 0; i < list.length; i++) {
        if (topAdPosition.includes(i)) {
          let section = list[i-1];
          console.log(section);
          let ad = createGoogleAdsenseDiv(googleAdCode, 'insert-adsense-js-section');
          section.after(ad);
          (adsbygoogle = window.adsbygoogle || []).push({});
          console.log('insert ad %s', i);
        }
      }
    }

    console.info('-InsertAdsense end');

    function createGoogleAdsenseDiv(html, divClass) {
      let div = document.createElement("div");
      if (divClass) {
        div.classList.add(divClass);
      }
      div.innerHTML = html;
      return div;
    }
  }
  insertAdsense();

</script>

広告が差し込まれるページ

このスクリプトが機能するページは、以下のところです。

<section>タグが並ぶページ

ブログトップページ、カテゴリページ、月別のアーカイブページなどの<section>タグが並んでいるところページです。
topAdPositionの設定に従い、<section>タグの後ろに差し込みます。

記事ページ

今回改変した部分で対応したものです。ブログの記事のページの<H3>タグ周辺に差し込んでいきます。

設定方法

上のスクリプトをまるっとコピーして、サイドバーのHTMLを1枠作って保存します。

設定後の細かい調整の方法

差し込まれるパーツのデザインはCSSで変更可能です。あと広告差し込みルールについて、多少は変更可能になっているので、ご自分のブログのスタイルに合うように良い感じに変更してください。

広告が差し込まれる頻度の調整

提示したプログラムの先頭のほうにある２つの変数を変更すると、全体的にアドセンスを差し込む頻度を変えることができます。配列を内容を変えればよいです。

    //sectionへの頻度
    let topAdPosition = [2, 7, 12, 17];
    //h3への頻度
    let articleAdPosition = [2,4];

デザインの変更

スクリプトが実行されると、次の3種類のclass付き<div>が出力されるので、良い感じに調整してください。

insert-adsense-js-article-h3

記事内の<h3>の周辺に追加される<div>のクラス名

div.insert-adsense-js-article-h3{

}

insert-adsense-js-article-last

記事の最後のに追加される<div>のクラス名

div.insert-adsense-js-article-last{

}

insert-adsense-js-section

トップページやカテゴリページの<section>の下に追加される<div>のクラス名

div.insert-adsense-js-section{

}

記事側での設定

スクリプトを置くだけだと、ブログ全体（全ての記事）に同じ設定が適用されます。中には広告を差し込みたくない記事もあると思います。逆にPVが多いのでちょっと増やしたいなというのもあるかもしれません。

そんなことのあろうかと、記事本文に<script>タグを書くことで何番目の<h3>で広告を差し込むか、最終パートに広告を差し込むかを設定可能する方法も用意してあります。

いくつか、サンプルを提示しておきます。

この記事だけ何もだしたくないとき

avoidInsertLastOfThis=trueも忘れずに。

<script>
    let adPositionOfThis=[];
    let avoidInsertLastOfThis=true;
</script>

減らしたいとき

5番目のh3と記事の最終にアドセンスを入れ込む設定です。

<script>
    let adPositionOfThis=[5];
    let avoidInsertLastOfThis=false;
</script>

たくさん出したいとき

adPositionOfThisの中身をいっぱいにします。

<script>
    let adPositionOfThis=[2,4,6,8,10];
    let avoidInsertLastOfThis=false;
</script>

記事の本文の最終行にこの4行を書き足せば、その記事だけ広告の表示を制御できます。

良く使うので、ブログの定型文として登録しておくのがいいですね

まとめ

前回は、5個おきに置くのをコーディングしてしまっていたので自由が効きにくかったのが反省点です。今回は配列で指定できるようにしたので、プログラムが分からなくても変更可能になったかと思います。

実際に使ってくれたブログを紹介

soreomo.com

hoppergoto1000.hatenablog.jp

*1:https://support.google.com/adsense/answer/23921

*2:https://support.google.com/adsense/answer/1354736