((7回目の出直し🌻))

好きなことを自分のペースで、のんびり更新

はてなブログの記事の間にアドセンスいい感じに埋め込み、自動広告設定をやめる

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

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

こんなのをつくりました

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

記事内の大見出し(H3見出し)の直前にアドセンスの枠を突っ込みます。
f:id:kanaxx43:20200618012035p:plain

困っていること

背景に戻りましょう。

はてなブログで記事の中にアドセンスを入れるには、アドセンスのコードを自分で記事内に埋め込むことで実現できます。いわゆる手作業によるばらまきというやつですね。これは作るのも面倒だし、直すのも面倒なやつです。

かといって、アドセンスの自動広告の設定をすると、記事の意図しないところに入ってきてしまい鬱陶しくなってしまう。(読み手ファーストではなくて、ブロガーファーストな独りよがりになってしまう)

エンジニアの端くれとしては、面倒でなくて、記事の書き手で程よくコントロールが可能なアドセンス広告の自動差し込みをやりたい!

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

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

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

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

f:id:kanaxx43:20200618003933p:plain

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

Googleアドセンスは、しっかりとしたポリシーが公開されています。
僕自身もポリシーを読んだ上でこの施策をやっていますが、この施策がポリシー違反でないとは言えません。ソースは公開しますので利用していただくのは自由ですが、発生するいいことも悪いことも自己責任でお願いします。

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

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

コード

今回は、コメント入りで100行以内のコードです。 トップページの<section>間にアドセンス入れ込むやつも含んでいるので、このスクリプトだけでトップページ差し込み記事内差し込みの両方が使えます。

<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>

このスクリプトをサイドバーのHTMLとしておきます。

この二つの変数は、スクリプトを置くときに自分用に変更しておいたほうがいいかもしれません。

    let topAdPosition = [2, 7, 12, 17];
    let articleAdPosition = [2,4];

細かい調整

デザインと広告差し込みルールについて、変更可能になっているので、良い感じに変更してください。

デザインの変更

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

insert-adsense-js-article-h3

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

insert-adsense-js-article-last

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

insert-adsense-js-section

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

記事側での設定

スクリプトを置くだけだと、全記事に同じ設定が適用されます。広告が差し込みたくない記事もあると思います。 そんなことのあろうかと、記事本文に<script>タグを書くことで何番目の<h3>で広告を差し込むか、最終パートに広告を差し込むかを設定可能にしてあります。

この記事だけ何もだしたくないとき
<script>
    let adPositionOfThis=[];
    let avoidInsertLastOfThis=true;
</script>

5番目のh3にだけ出すとき
<script>
    let adPositionOfThis=[5];
    let avoidInsertLastOfThis=false;
</script>

たくさん出したいとき
<script>
    let adPositionOfThis=[2,4,6,8,10];
    let avoidInsertLastOfThis=false;
</script>

これを参考に、記事本文に書き込めばその記事だけ制御できます。
良く使うので、定型文として登録しておくのがいいですね

まとめ

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