(cache) 当ブログの【記事中トリプル広告】で使っている「広告自動挿入タグ」まとめ

「文中広告３個」を検証し始めて何日か経ちました。

1PVあたり0.4円達成するためにやったことを書いてみる - とまじぃさんち

この期間、LinuxであるとかBlenderであるとか、かなりマニアックな記事ばかり投下していたので一日平均４～５００PVくらいな日々。
その期間の平均ページRPM（1000PV換算の収益）が300円台後半。

昨日は、普段より少しだけPVが多かったので（1000PV弱くらい）ページRPMも落ちるかな？と思っていたのですが。
f:id:tomag:20160615065925p:plain

7クリックでページRPMも300円台中盤で踏ん張ってくれたようです。

相変わらず、クリックされてるのはスマホ、PC共に記事下ばかりなのですが、といって記事下のみに広告を貼ってもまったくクリックされないってのが、人間の心理の不思議なところ。

アジのサビキ釣りみたいなもので、「文中広告」という撒き餌で警戒心を緩めておいて「文末広告」という「針」で仕留める。そんなノリなんでしょうかね？（笑）

あ・・やばいやばい。こんな種明かしやら広告ネタばかり書いてるとクリック率がさがってしまう（ｫｨ

ということで、当ブログの広告配置で使っているスクリプト（はてな用）をまとめておきます。

広告自動挿入関係

もちろん広告は手動挿入しているわけではなく、自動挿入しています。
なお、自動挿入にあたって、見出しの位置から算出して自動挿入されていますので、見出しが無かったり、見出し数が極端に少なかったりすると、意図しない配置になって、Google Adsenseのポリシー違反になったりする可能性もありますので、ご注意ください。

一個目見出上

一番最初の見出し前に広告が挿入されます。
当ブログの場合は、冒頭文→見出し→本文という流れなので、概ね序盤後の見出しという形になります。

本文の最初に見出しを入れれば【記事タイトル下広告】としても代用可能。

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

参考記事: はてなブログの記事中•文中に自動的にGoogleアドセンスを挿入する設定方法 - tamasaburo

真ん中見出上

「見出しが6個あったら3個目の上」みたいな感じで、見出しを数えてちょうど真ん中の見出し上に広告を挿入してくれるスクリプト。
見出しが１個しかなかったりすると、前項の「一個目見出し上」広告と２つ並んじゃったりするので注意が必要。

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

参考記事：はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

記事直下（シェアボタン上）

記事が終わった直後に広告を挿入するスクリプト。読み終わった後にシェアボタンやはてなスターに興味を持たれる前に、間髪入れずに広告をたたみかけるスクリプトです。

<div id="my-footer">

※ここにアドセンスのコード貼り付け

</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

参考記事:

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

全部入れる時の注意

当ブログの様に、この３種類をすべて導入する場合は注意が必要です。
「一個目見出上」と「真ん中見出し上」でinsentence-adsenseという、同じクラス名が使われているので、広告が２つとも「真ん中見出し上」に移動してしまいます。

２つのコードで別のクラス名を使いましょう。

よくわからない方もいらっしゃると思うので、全部まとめたバージョンも貼っておきますね（笑）

<!-- 最初の見出し前広告開始 -->
    <script>// <![CDATA[
   addEventListener("DOMContentLoaded", function() {
   var $target = $('.entry-content > h3');
   $target.eq(0).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)).before($('.insentence-adsense2'));
   }, false);
   // ]]></script>
    <div class="insentence-adsense2">
        <p>スポンサーリンク</p>
        <!--ここに自分のアドセンスのコード-->
    <p> </p>
    </div>
<!-- 真ん中見出し前広告終了-->

<!--記事下アドセンス-->
<div id="my-footer">
<p>スポンサーリンク</p>
※ここにご自分のアドセンスコードをコピペ
</p>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!--記事下アドセンスここまで-->

変更点は「真ん中見出し上」で使われているクラス名をinsentence-adsenseからinsentence-adsense2に変えてあるのみです。

スポンサーリンクのCSS

おまけです。

毎回「スポンサーリンク」の文字サイズやら位置関係いじるのめんどくさいので

HTML

<div class="sponsor-link">スポンサーリンク</div>

デザインCSS

/*スポンサーリンク*/
.sponsor-link{
    text-align:center;
    font-size:80%;
    margin-top:10px;
    color:#888888;
}

こんな感じにしてます。

スポンサーリンクは「薄めの小さめ」です（笑）

まとめ

個人的に結構広告配置いじり倒すんですが、そのたびにあちこち検索して、自動挿入のコードをかき集める作業を繰り返しておりまして・・・。

個人的備忘録を兼ねて、記事にいたしました。

お役にたてますように♪