Google AdSenseのうっかりクリック防止！CSSで広告リンクを無効にする方法

2014年5月22日　カテゴリ：WEB制作

自分のサイトに設置している広告を、うっかりクリックしてしまいそうになったことはありませんか？
私はよくあります！
不正に厳しいGoogle AdSenseでも、誤クリックと判断できる程度の回数なら問題ないようですが、それでもやはり不正認定されたらと思うと心配になりますよね。

というわけで、うっかりクリックを防止する対策を行いましょう。

対象となるサイト

今回対象とするサイトは以下の通りです。

WordPressで構築されたサイト
ログインするのはサイトの運営・制作・管理者のみ

「ログインしている＝サイト運営者＝広告をクリックしてはダメな人」という前提で対策を行います。

会員制サイトの場合でも、ユーザー権限による条件分岐などを使えば対応できると思いますが、この記事では対象外とします。

下準備をしよう

広告を共通のclassで囲む

Google AdSenseで取得した広告コードを囲むように、divを記述しましょう。
class名は好きなもので構いませんが、ここでは「ad」とします。

<div class="ad">
　Adsenseで取得した広告コード
</div>

body_classを利用する

ログイン中だけリンク無効CSSを適用するために、Wordpressのテンプレートタグ「body_class」を利用しましょう。
このタグをbodyタグ内に書くと、ログイン中はbodyにlogged-inというclassが追加されます。

<body <?php body_class(); ?>>

公式テーマを使っている場合は、すでにこのようになっていると思いますが、自作テーマをご利用の場合は一度確認してみてください。テンプレートタグ/body class

pointer-events:none;でリンクを無効にする

準備ができたら以下のCSSを追加して、ログイン中の広告はクリックイベントが無効になるようにします。

.logged-in .ad{
	pointer-events:none;
}

普通のリンクです

リンクが無効です

最新バージョンのブラウザを利用している場合は、これだけでOKです。

IE10、IE9に対応する

さて、pointer-eventsを使った方法は、IE10以前では使えないという欠点があります。 CSS pointer-events (for HTML) | Can I use…
IE10、IE9を使う可能性がある場合は、以下のCSSで対応しましょう。

.logged-in .ad{
  position:relative;
}
.logged-in .ad:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
}

普通のリンクです

リンクが無効です

:after擬似要素が一番上に重なるので、クリックできなくなるという仕組みです。
見た目をわかりやすくするために、rgba(0,0,0,0.5)としましたが、見えないほうがいい場合は、rgba(0,0,0,0)として下さい。

この方法は、最新ブラウザでも有効なため、使用するブラウザが不明な場合などはこちらを利用して下さい。
しかし、どうしてもCSSの記述が長くなってしまうので、最新ブラウザだけ使う場合はpointer-eventsをオススメします。

最後に確認を忘れずに！

作業が終わったら必ず、ログイン状態とログアウト状態で、広告にマウスオンして確認しましょう。
リンクが無効になっている場合は、リンク先URLが表示されず、カーソルも変化しません。

ログアウト状態でもリンク無効になってしまっていたら、大変です！
セレクタの指定が間違っていないか、見直してみましょう。
収入に直接関わりますので、十分に気をつけて利用して下さい！