AdeKode

アウトドア&インドア。アクティブ学生20歳の毎日…

指定した複数のカテゴリー記事のAdSense広告を表示しないスクリプトを作成しました

f:id:haluca-net:20161129183114j:plain

指定した複数のカテゴリーが含まれる記事のアドセンス広告を非表示にするスクリプトを書きました。はてなブログで、アドセンス広告を自動挿入している方は多いと思うので、この記事だけアドセンスを非表示にしたい!って人は必見です。

アドセンス広告非表示スクリプトの歴史

はぴらきさん作成の「AdSense Filter」

アドセンス広告非表示のスクリプトは、「はぴらき合理化幻想」というブログを運営しているはぴらきさんが開発してくれた、「AdSense Filter」が始まりです。

hapilaki.hateblo.jp

はぴらきさんのコードでは、指定したページのアドレスをプログラム内に記述すると、そのページのアドセンス広告が非表示になるというものでした。

ゆとりずむさん作成、「指定したタグを付けたページにAdSense広告が表示しないスクリプト」

ゆとりずむさんは、はぴらきさんが作成した「AdSense Filter」を改良して、指定したタグが付いたページのアドセンス広告を非表示にするスクリプトを作成しました。

www.yutorism.jp

例えば、プログラム内に「アウトドア」という文字列を除去するように記述してやると、「アウトドア」というカテゴリーの記事の記事のアドセンス広告を非表示になるわけですね。

しかし、ゆとりずむさんのスクリプトは複数のタグには対応していないんですね。ってことで、僕が複数のタグに対応するように、スクリプトを書き換えました。

複数種類に対応したスクリプト

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");
var noAdsTagLength = noAdsTag.length;

function adsFilter(){
for(var i=0;i<pageTags.length;i++){
  for(var j=0;j<noAdsTagLength;j++){
if( ("article:tag"==pageTags[i].getAttribute("property")) 
&& (noAdsTag[j] == pageTags[i].getAttribute("content") ) ){
document.write('<!--');
break;
}
}
}
}

adsFilter();
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 記事上(初めのH2タグの上) -->

スマホ版

<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");
var noAdsTagLength = noAdsTag.length;
function adsFilter(){
for(var i=0;i<noAdsTagLength;i++){
if(pageTag.getAttribute("class").indexOf("category-"+noAdsTag[i])!=-1){
document.write('<!--');
}
}
}
adsFilter();
</script> 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 記事上(初めのH2タグの上) -->

概要

noAdsTag=["寄稿","エッセイ","広告調整"];とありますが、ここに追加したいカテゴリー名を入れてください。

アドセンス広告を非表示にしたいタグが増えた場合も、広告を非表示にしたいタグが何個あるのかを、自動で取得してその個数に応じて、記事内のタグと比較できるようにしておきました。

for文の中にfor文を入れることで、

例えば、記事内のカテゴリーが「プログラミング、ブログ」の二つあった場合に、まず、指定タグである@「寄稿」について、「寄稿」=「プログラミング」、「寄稿」=「ブログ」みたいなことをプログラム内でやってます。

もし、「寄稿」=「寄稿」になると、break;で強制的にループが終了します。

アドセンスコードの準備も忘れずに

変更前のコード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 記事上(初めのH2タグの上) -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

変更後のコード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 記事上(初めのH2タグの上) -->

コメントアウトの位置を移動しただけです。

仕組みをざっくり

ページ内にアドセンスコードを二つ以上挿入している場合は、二つ目以降のアドセンスコードを以下のように書き換えましょう。

<script>adsFilter();</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 記事上(初めのH2タグの上) -->

<script>adsFilter();</script>という記述をすることで、1つ目のアドセンスコードの上に書いた、関数の計算に戻って、指定タグがそのページに含まれているかどうかをプログラムで探して、もしそれが含まれているならば、adsFilter();<!--に置き換わるという仕組みです。

なので、実際に吐き出されるhtmlは以下に示すような感じになっていると思ってもらえると理解がしやすいです。

<!--    ←置き換わった後

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-01234567890123456"
     data-ad-slot="12345678989"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 記事上(初めのH2タグの上) -->

青く表示されている部分はすべてコメントアウトの対象範囲なので、これでアドセンス広告が非表示になるというわけですね。

まとめ

今回は指定した複数のタグが含まれている記事のアドセンス広告を非表示にするスクリプトの紹介ということでした。

まず、アドセンスフィルターを作成してくれたはぴらきさんに感謝です。

そして、らくからちゃさんの素晴らしいスクリプトを少しいじって複数タグ対応しただけなので、正直僕はあまり何もしていないですが、複数タグで使いたいという人は必ずいると思うので、参考にしていただけると幸いです。

あと、今回はおれの実力不足というか、めんどくさかったのでやらなかったんだけど、はぴらきさんのURL指定とらくからちゃさんのタグ指定のどちらも使えるスクリプトがあるともっと便利なので、それも今度作りたいと思います。

それでは、今日はこのへんで

ぐっとばいでいず