UXエンジニアになりたい人のブログ

転職活動はじめてすぐやめた

【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法

2017/1/26追記
さらに楽をしたい方は以下の記事をご覧ください

uxlayman.hatenablog.com





uxlayman.hatenablog.com
上記記事は当ブログの密かな人気記事なのですが、どうも最近問題が発見されたようです。



www.toma-g.net
okanewofuyaso.hateblo.jp

要は

記事上下の広告を移動するスクリプト使う
→(2重、もしくは多重カウントされて)アクティブビュー視認可能率が下がる
→(みんなが見ない場所に貼られた広告だと判断されて)広告単価が下がる

という話であるようです。
ということで改良版をつくりました。
今回も、コピペで簡単やで!(けど、ちょっとだけ注意点があるので気をつけてや!あと、いつでも元の状態に戻せるようにメモ帳にでもなんにでもバックアップはとっとっきましょう^^)



設定方法

ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→「記事下」または「記事上」

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h3,h4,h5');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

諸注意など
  • 超重要:上にも書きましたが、アドセンスコードをコピペしたあと、2箇所ある「/script」を「/scrip」に修正してください!これをしないと広告そのものが表示されなかったり、画面がおかしなことになると思います。変えるのは2箇所だけで、4箇所ではないです。ちゃんと出来てない場合ははてなブログのダッシュボードで設定した時点で「緑色の領域」が下の画像のようになってないはずのなので、うまくいかない場合はまずこれを確認してください。

f:id:uxlayman:20160728225540p:plain

  • 本文中で大見出し、中見出し、小見出しの数を数えていって、真ん中に当たる部分の見出しの前に挿入します。

  • 大見出し、中見出し、小見出しのどれもない場合は何もしません(そのまま記事下に表示される)

  • 挿入対象は以下の3〜7行目の部分なので、アドセンスコードの周りのスタイル等適宜調整してください。上記例では、コードの上に「広告」という文字、下に空行を入れています。
<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

  • 「もっと読む」の下に広告入れている例が多いようなのですが、はてなブログは「もっと読む」の位置がソース的に記載されていないようなのでできませんでした。



挿入位置のカスタマイズ

基本的には

    var $target = $('.entry-content  h3,h4,h5');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

このコードがカスタマイズ位置を特定しているので、ここの部分を変えることになります。


応用例1:「真ん中」の大見出しの直後に広告を入れる

対象を大見出し(h3)だけに絞り、「直後」を表すafterに変える

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h3');
    $target.eq(Math.floor($target.size() / 2)).after($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

応用例2:最初の大見出しの直後に広告を入れる

応用例1に加え、追加対象見出しの条件を「最初」を表すeq(0)にする。eq(0)の部分をeq(1)とかeq(10)とかにすれば、「n番目の」という意味になる

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h3');
    $target.eq(0).after($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

応用例3:2つのアドセンスコードを別の位置に入れる

ポイントはそれぞれのアドセンスコードの名前を変える(下記insentence-adsenseとinsentence-adsense2)ことと、変数名を変える(下記adsenseCodeとadsenseCode2)ことと、挿入位置を変える(「$target.eq(Math.floor($target.size() *1/ 3))」のところ)です。
下記例は、上から1/3にある見出しの上と、上から2/3にある見出しの上にコードを入れる例。
最初と最後であれば、$target.eq(0)と$target.eq($target.size()-1)でokです。

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content  h3,h4,h5');
    $target.eq(Math.floor($target.size() * 1 / 3)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>
<script>
var adsenseCode2 = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコード(2つ目)の2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content  h3,h4,h5');
    $target.eq(Math.floor($target.size() * 2 / 3)).before($('.insentense-adsense2'));

    $('.insentense-adsense2').html(adsenseCode2);
}, false);
</script>
<div class="insentense-adsense2"></div>

応用例4:フッターの先頭(ブログパーツの前)に入れる

2016/8/6追記
通常、フッタに指定したアドセンスやその他ブログパーツは、はてなが提供するブログパーツの後ろになりますが、これを前(本文の直後)に持ってくるコードです。
フッター部分はPC、スマホとも共通でentry-footerなので、ここの先頭にコードを入れる"prepend"を利用します。

<script>
var adsenseCodeF = (function () {/*

<p>広告</p>
<!-- 自分のフッタ用アドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    $('.entry-footer').prepend($('.footer-adsense'));

    $('.footer-adsense').html(adsenseCodeF);
}, false);
</script>
<div class="footer-adsense"></div>

応用例5:場所が見つからなかったらともかく文中に入れる

2016/8/6追記
このコードは挿入場所が見つからなかったら、記事上または記事下にそのまま表示します。ただし、特にスマホの場合、フッタ用のアドセンスと文中用のアドセンスを両方「記事下」に設定して、文中用アドセンスが挿入できないと、アドセンスが2つ並ぶことになり、ポリシー違反になる可能性があります。
これを防ぐため、「見つからなかったらともかく真ん中に」を実現するコードが以下です。$target.size() > 0が挿入場所が見つかったことをさします。

実行例は以下の記事などをご覧ください。この記事は見出しが1つもありませんが、レクタングル(大)がちょうど真ん中に挿入されています。
uxlayman.hatenablog.com

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h3,h4');  // 大見出しと中見出し
    if ($target.size() > 0) {
        // 「真ん中」の大見出しと中見出しの直後に入れる
        $target.eq(Math.floor($target.size() / 2)).after($('.insentense-adsense'));
    } else {
        // 大見出しと中見出しがなかったら、ともかく真ん中の段落に入れる
        $target = $('.entry-content p, .entry-content div');
        $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));
    }

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

応用例6:特定のカテゴリーが付与されている記事だけ、Adsenseを貼り付けないようにする

2017/1/21追記

Adsenseは成人向けコンテンツなどを含むページに貼り付けると規約違反になってしまうので、そういうページにだけカテゴリーをつけておいて、広告そのものを表示しないようにするコードです。

<script>
var adsenseCode = (function () {/*

<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {

    if ($('meta[property="article:tag"][content="広告禁止"]').size() > 0) {
        return;
    }

    var $target = $('.entry-content h3,h4,h5');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

追加されたのは

    if ($('meta[property="article:tag"][content="広告禁止"]').size() > 0) {
        return;
    }

のところだけで、これが「『広告禁止』というタグがついていたら、なにも処理をしない」という意味になります。
これを冒頭に追加しさえすれば、挿入位置のカスタマイズやその他応用例と併存させることもできます。

技術的なお話

基本的にはadsenseコードをjavascriptの文字列として持っておいて、文中に直接書き出す、という流れになります。前回のコードと違い、移動させていないので、多重カウントされません。


コピペを簡単にするための仕掛けとして、以下のjavascript版ヒアドキュメントの仕組みを使っています。
qiita.com


これがないと延々アドセンスコードのタグをjsの文字列に書きなおさなければならなくなります。
ただ、これを使ってもなお、</script>がスクリプトの終わりだとブラウザに判定されてしまうため、苦肉の策で</scrip>に置換するようにしています。


おわりに

さて、大事なことですが、本スクリプトは自己責任でご利用ください。
スクリプトが突然動作しなくなったり、今回のように単価減の状態になったり、またポリシー違反状態になった場合等も、当ブログならびにブログ主は責任を負いません。

一応、ポリシーに違反したという話は聞きませんし、Adsenseコードをほとんどそのまま利用(ただscriptをscripに変換してるので、厳密にいえば改変は改変なのですが…)しているので、あまり問題にはならないかと思います。javascriptコメントを利用する方法は別記事「はてなブログで特定のキーワードを含む記事にはAdsenseが貼られないようにする方法 - UXエンジニアになりたい人のブログ」で紹介して、実際に運用されている方もいるようなので、ある程度枯れてきているとは思います。

とはいえ今回の話もありましたので、とりあえずしばらくは自分でも運用してみようと思います(機会損失してしまった方々ごめんなさい)*1
この記事にも、真ん中の大見出しの直後にレクダングル大が表示されてると思いますので、見た目を確認してみてくださいませ。
問題があった場合はコメントなり引用なりをしていただければ幸いです。

*1:自分で運用してればすぐ気づいて改良版を出せたんですけどね