読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

AdSenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「AdSense Filter」を自作した

web制作 はてなブログをカスタム JavaScript 自作した AdSense

アドセンスコードを残したまま特定のページで広告を表示させない方法をひらめいた。これでWordPress以外のブログサービスでも状況に応じて広告の表示や非表示を自由に選択できるよ。jQuery不要。

メカニズムの概要

ブログの記事本文以外の共通部分にアドセンスコードを入れていても、特定のページのアドセンスコードをコメントアウトしてコード自体をないものにできる。革新的だ。

アドセンスコード内のデフォルトのコメントアウト部分を移動させ、アドセンスコードの上に自作したJavaScriptコードを挿入する。広告を表示させたくないページのURLを追加していけば自由に表示/非表示を選べる。

JavaScript本格入門

何が便利で革新的なのか?

一言で言えば

ブログの共通部分(テンプレート)にあるアドセンスコードでも、自分が指定する記事だけ広告を非表示(無効化)にできる。

ポリシー違反対策に有効

記事本文にのみアドセンスコードを入れているのなら、ポリシー違反があると思われそうな記事にはアドセンスコードを入れなければいい。広告が表示されていなければ警告が来ない。

しかし、ブログの共通部分(テンプレート)にアドセンスコードを入れていると、通常は特定の記事だけ広告を非表示にすることはできない。「常に広告を表示する」か「常に表示しない」かの二択になる。

そこで筆者が自作したコードを導入すれば、特定のページでアドセンスコードを取り除けるようになる。具体的に言えば、コメントアウトしてアドセンスコードを無効にしてしまうのだ。

WordPressであればプラグインでこういうことができるが、これからはWordPress以外でも同じようなことができるよ。これで警告が来る前に広告を非表示にしておけるね。

必須条件

そのページのパーマリンクでページが表示されるときだけ広告の表示/非表示を指定できる。たとえば、「続きを読む」で本文を分割している記事なら、全文を表示するページを開くとそのページの広告を非表示にできる。

パーマリンクとは、そのページ固有のURLのこと。当ページであれば次の通り。

http://hapilaki.hateblo.jp/entry/adsense-filter

以下、デフォルトのアドセンスコードを確認してからアドセンスコードの修正具体例を見ていく。

デフォルトのアドセンスコード

2014年12月現在、デフォルトのレスポンシブ広告ユニット用コードを例示すると次のとおり。広告ユニットの名前を便宜上ad-unit-nameとしている。

<style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-unit-name -->
<ins class="adsbygoogle ad-unit-name"
     style="display:inline-block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化 - はぴらき合理化幻想

コメントアウト部分を移動させる

まずは上記コード内にある背景色が黄色の部分を下部に移動させる。例示すると次のとおり。

<style>
.ad-unit-name { width: 320px; height: 50px; }
@media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ad-unit-name { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ad-unit-name"
     style="display:inline-block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ad-unit-name -->

デフォルトのコードの改変はこれで終わり。コメントアウト部分を移動させただけなので規約に抵触することはないだろう。念のため書いておくが、あくまでも自己責任だよ。

追加するJavaScriptコード

アドセンスコードの上に次のコードを追加する。ページ内にアドセンスコードを2つ以上入れていても1番目のコードの上に追加するだけでいい。2つ目以降のアドセンスコードには後述するコードを追加する。

<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
 */
;
var myDomain='URLで共通する部分';//URL共通部分
var noAdsList=[
'広告を表示したくないページのURL',//URL末端
'広告を表示したくないページのURL',//URL末端
];
var noAdsListLength=noAdsList.length;
var locationHref=location.href;
function adsFilter(){
  for(var i=0;i<noAdsListLength;i++){
    if(locationHref==myDomain+noAdsList[i]){
      document.write('<!--');
      break;
    }
  }
}
adsFilter();
</script>

上記コード内で背景色が黄色の部分をカスタムして「非表示にしたいURL」を指定できる。当ブログで例示すると次のとおり。

<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
 */
;
var myDomain='http://hapilaki.hateblo.jp/entry/';//URL共通部分
var noAdsList=[
'go-go-bar-spankys',//URL末端
'go-go-bar-crazy-house',//URL末端
'go-go-bar-obsession',//URL末端
'go-go-boys-xboys-bangkok',//URL末端
];
var noAdsListLength=noAdsList.length;
var locationHref=location.href;
function adsFilter(){
  for(var i=0;i<noAdsListLength;i++){
    if(locationHref==myDomain+noAdsList[i]){
      document.write('<!--');
      break;
    }
  }
}
adsFilter();
</script>

広告を表示させないページのURLはいくらでも増やせる。その際はコーテーションマークで括って最後にカンマを入れること。上記コードでは4つのページを非表示にするように設定している。

自分でカスタムする部分を少し解説する。数学風にいうと「URLの共通因数をくくっている」だけ。本来は次の4つのURLだが、管理しやすいようにURLの共通部分をあらかじめ登録する仕様にした。

なお、URL共通部分に何も入れなければ、各URLを分割せずにきちんと入れることも可能。

備考:ドメインを独自ドメインなどに変更するなら、同じタイミングでコード内のvar myDomainの右側のURLも変更しよう

2~3番目のアドセンスコード用の追加コード

2番目と3番目のアドセンスコードも、アドセンスコード内にあるデフォルトのコメントアウトを移動させるのは同じだが、挿入するJavaScriptコードは次の一行のみでOK。

<script>adsFilter();</script>

開発経緯

当ブログの特定の記事に対して、アドセンスのポリシー違反の警告が来た。対策として警告されたページでアドセンス広告を表示させない方法を調べたが、アドセンスの標準機能では無理だった。よって急遽プラグインを開発した。

アドセンスのアダルト(エスコートまたは国際結婚斡旋)警告メールが来たページの具体例と対策 - はぴらき合理化幻想

ペンギン村の則巻千兵衛博士のように一コマでプラグインを創った筆者まじかっけー!

Dr.スランプ アラレちゃん 則巻千兵衛

コードの使用条件および免責

著作権表記を削除しない限りは自由に使っていい。コードの改変もOK。

このページで紹介するコードの使用でなんらかの損害を被ったとしても一切の責任を負わない。

自由とは何か 「自己責任論」から「理由なき殺人」まで

まとめ

アドセンスコード自体の改変はコメントアウト部分の移動だけ。アドセンスコードの上にJavaScriptコードを追加するだけなので手軽。不要になれば追加したコードを削除するだけなのもよい。

追記

ネタ帳さんに紹介された

2015年7月25日、次の記事にて紹介された。ありがとうございます。

コードをいじるので、完全に自己責任ですが・・・。 はてなブログ、ライブドアブログ、FC2ブログといった無料ブログでは、記事単位で広告配信の有無を設定できないというデメリットを解消する手段として、けっこう使えるのではないかと思いご紹介しておきます。

AdSenseポリシー違反「報酬プログラムを提供するサイト」5日間の原因と対策奮闘記*ホームページを作る人のネタ帳

タグで広告を非表示

2015年8月19日、らくからちゃさんがはてなブログ利用者向けに「タグでGoogleアドセンスの表示/非表示を切り替えられるコード」を公開された。ありがとうございます。

Googleアドセンス広告を非表示にしたいページが多い人に親切な設計になっているので、該当する方はぜひ次のページを確認してほしい。

記事に『広告不要』というタグを付けた時だけ、Adsense広告が表示されないようになります。ちなみに『はてなブログ』では、記事のカテゴリを示す情報として、property属性がarticle:tagと指定されたmetaタグに、contentという属性で『タグ』が示されます。ですので、上記のタグを探し出し、contentが『広告不要』である場合、動作するように置き換えた、というからくりになります。

指定タグを付けたページにAdsense広告が表示しないスクリプトを書いてみた - ゆとりずむ

てすとてすと