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

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

はてなブログで「文中にアドセンス広告を入れる」を自動化する方法

重要:この記事のコードには、問題が発見されましたので、以下の改良版コードを利用してください。
uxlayman.hatenablog.com

==========================

みんな大好きはてなブログのアドセンスの話題。

よく、記事の文中にアドセンス入れてる人いるじゃないですか。
あれって結構効果あるようなイメージですが、手動でやってるんですよね?面倒ですよね?もし広告をつけ変える場合、いっこずつ全部書き換えなきゃだし。
ということで、それを自動化するコードを紹介します。


設定方法

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

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > h3,h4,h5');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
  <p>広告</p>
  <!--ここに自分のアドセンスのコード-->
  <p> </p>
</div>

諸注意など

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

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

  • 挿入対象はinsentence-adsenceのdivなので、アドセンスコードの周りのスタイル等適宜調整してください。上記例では、コードの上に「広告」という文字、下に空行を入れています。

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



完成図(300x250を表示させた例)

PC用

f:id:uxlayman:20140922222037p:plain

モバイル

f:id:uxlayman:20140922213826p:plain


あとがき

WordPressだとプラグインでできるようです。単純なjsですからね。長くなるの嫌なのでカスタマイズ性低くしてますが、挿入位置の算出をがんばればはてなブログでもいろいろ出来ます*1
WordPress記事本文中にアドセンスを表示する方法6パターン

関連する話ですが、文中アドセンスはSEO的には不利みたいです。
AdSense等の広告を記事中に挿入すると、Googleから低品質と思われやすくなる


これら諸注意を考慮し、試したりした上でご利用ください。
ここじゃない方がいい、ってなところに挿入されることがわりとあります。いっこいっこ手動で入れればプレビュー時に確認しながら理想の位置に挿入できるので、その辺は善し悪しですね。
自分自身で運用していませんので何とも言えませんが、ざっとみた限りポリシーには違反してませんでした。静的に場所を移してるだけなのでまあ問題ないかと*2

ちなみに、文中アドセンス、自分としてはあんまりやるつもりはないです。
最近自分がやらないことばっか紹介してるようなw*3


関連
Google Adsenseで簡単にA/Bテストを行う方法 - UXエンジニアになりたい人のブログ


以下2015/3/25追記

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

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

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > h3');
    $target.eq(Math.floor($target.size() / 2)).after($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
  <p>広告</p>
  <!--ここに自分のアドセンスのコード-->
  <p> </p>
</div>

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

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

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > h3');
    $target.eq(0).after($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
  <p>広告</p>
  <!--ここに自分のアドセンスのコード-->
  <p> </p>
</div>


以下2015/5/18追記

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

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

<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > h3,h4,h5');
    $target.eq(Math.floor($target.size() *1/ 3)).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
  <p>広告</p>
  <!--ここに自分のアドセンスのコード-->
  <p> </p>
</div>
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content > h3,h4,h5');
    $target.eq(Math.floor($target.size() *2/ 3)).before($('.insentence-adsense2'));
}, false);
// ]]></script>
<div class="insentence-adsense2">
  <p>広告</p>
  <!--ここに自分のアドセンスのコード-->
  <p> </p>
</div>

*1:改行が2つ続いてるとこに挿入するとか、大見出しの前に挿入するとか

*2:が、実際にこのコードによってポリシー違反等が起こり、損害が発生したとしてもわたしは責任を負いません

*3:コード記載するためにはてな記法初めて使ったけど、どうも使いにくい。特に改行を入れるところが。ただ、スター数付きで記事を紹介できるのはいいですね