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が表示されず、カーソルも変化しません。
ログアウト状態でもリンク無効になってしまっていたら、大変です!
セレクタの指定が間違っていないか、見直してみましょう。
収入に直接関わりますので、十分に気をつけて利用して下さい!