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

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

要は

記事上下の広告を移動するスクリプト使う
→(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 > p + 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  p + 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  p + 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  p + 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>

技術的なお話

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

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

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

おわりに

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

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

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

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