今回は、はてなブログで文中にアドセンス広告を自動で挿入しつつ、特定のタグをつけた記事だけを非表示にさせる方法について、説明したいと思います。
前書き
Google AdSenseに合格したのはいいですが、どうせ利用するならしっかり収益を得たいもの。それはPVが月間100万あっても100程しかなくても変わらない気持ちでしょう。
しかし、記事を充実させていくと、いちいちコードの貼り付けを手動でやるのは面倒くさいです。どうせなら、自動的に希望の位置に貼り付けられれば一番ですよね。
他方、このブログはいわゆるマイラーブログとも言われる属性のものです。マイラーはポイントサイトなどを利用してマイルを貯めんとする者の総称ですが、その活動過程でポイントサイトへの誘導をする場合が多々あります。
Google神はこの、「誘導」という行為を悉く嫌います。
「バナーをクリックしてください」「応援よろしこ！」「登録はここから！」などの文句は規約違反として修正削除を求められてしまいます。
なので、GoogleAdSenseとマイラーブログとの相性はあまりよろしくないと言われています。
偉大なる先駆者たち
この問題点を解決した先駆者の方々の記事がこちらです。
先駆者①特定ページの広告を表示させないスクリプト
先駆者②それを改良した、特定のタグをつけた記事を表示させないスクリプト
先駆者③記事の指定した箇所に広告を挿入するスクリプト
まとめたい
最終的には②と③を同時に発動させたい訳ですが、ググってもどこにも出てきません。なので、実際に試行錯誤してみました。
んで、一応うまくいったようなので、解説したいと思います。前提として、上記３記事を読んでおいてください。
方法
①PC編
<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTags=document.getElementsByTagName("meta");
function adsFilter(){
for(var i=0;i<pageTags.length;i++){
if( ("article:tag"==pageTags[i].getAttribute("property")) && (noAdsTag == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
adsFilter();
</script>
<script>
var adsenseCode = (function () {/*<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ。以下修正済みアドセンス --><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="●●●●●●●●●●●●"
data-ad-slot="●●●●●●●●●●●●"></ins><script>
(adsbygoogle = window.adsbygoogle || ).push({});
</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><!-- アドセンス名 -->
解説
基本的には、先駆者方のスクリプトをそのまま縦につなげるだけです。アドセンスコードの</script>を</scrip>に２箇所変換すること、非表示にしたいタグを青字のところに入れること。
で、広告非表示にする際に移動させることになる<!-- アドセンスコード名 -->なのですが、これはスクリプトの一番下に持ってきます。上記例では既に移動済みです。
②スマホ
スマホでは先駆者②にある通り、微妙に冒頭のコードが変わります。
<script>
/*
* AdSense Filter v1.0.0
* Date: 2014-12-10
* Copyright (c) 2014 http://hapilaki.hateblo.jp/
* Released under the MIT license:
* http://opensource.org/licenses/mit-license.php
*/
noAdsTag="広告不要"; //広告を設置しないタグを指定
var pageTag=document.getElementById("body");
function adsFilter(){
if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag)!=-1){
document.write('<!--');
}
}
adsFilter();
</script><script>
var adsenseCode = (function () {/*<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ。以下修正済みアドセンス --><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="●●●●●●●●●●●●"
data-ad-slot="●●●●●●●●●●●●"></ins><script>
(adsbygoogle = window.adsbygoogle || ).push({});
</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><!-- スマホアドセンス名 -->
あとは、基本的にPCと一緒です。
応用
先駆者③に、いくつかバリエーションがあげられています。
わたしのこのブログでは、応用編３＝記事の1/3、2/3のところに広告を挿入する、を実行しています。
その場合、２つ目のアドセンスは、省略方法が先駆者①で上げられていますのでそれを利用しています。
<script>adsFilter();</script>
<script>
var adsenseCode = (function () {/*<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ。以下修正済みアドセンス --><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="●●●●●●●●●●●●"
data-ad-slot="●●●●●●●●●●●●"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</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><!-- アドセンス名２ -->
緑の部分が、２つ目以降に挿入すべき部分です（上記スクリプトは応用前のものですから、そのまま使っても記事の真ん中にしか広告は入りません）
どこに埋め込む？
でき上がったこのスクリプトコードは、記事の中に埋め込みます。
はてなブログの、ダッシュボード→カスタマイズ（スパナマーク）→記事→記事下、に入れます。記事上、でも出来るかも知れませんが、試してません。
スマホの場合は、カスタマイズではなく、右のスマホ→記事→記事下、です。スマホ用にHTMLを設定するのを忘れずに。
コメント
免責
利用される場合はあくまで自己責任でお願いします。いかなる結果がもたらされようと一切の責任は負いません。
試す場合には、あらかじめコードのバックアップをとっておきましょう。
コードいじって大丈夫？
わかりません。全てはぐーぐー神のおぼしめしです。
他
- 先駆者様方からコードをコピペする際は、「"」が半角である事を確認してください。一部「”」が全角になっている個所がありました。
- サイドバーやフッターなどは今回は気にしていません。
- また、見出しが３個未満、あるいはまったくない場合にどうなるかは試してません。
- スポンサーリンク、などの文字の大きさや書体に変更を加える方法も、ここでは紹介しません、適宜いじってください。
終わりに
まる(id:kanamalu)氏がもっと楽な手段を構築されました。あちらは完全に自動化出来る上に、応用も可能！との事ですので、是非是非利用してください。まるさんまじごっど。
じゃあこの記事要るの？って話ですが、コード精製機に問題が発生した時の代替案と言う事で一つ宜しくお願いします。
