jQueryでクロスサイトのiframe広告のクリックをカウントする方法

oxy

9年 ago

iframeTracker jQuery Pluginを利用して他社の広告も正確にカウント

広告の場所を最適化する際に指標となるのは表示数やクリック数といったイベントです。

AdSenseなど大手のASPにはそれらのイベントをカウントする仕組みが用意されているので、ほとんどの方は利用されていると思います。

しかし自社広告や、純広告となるとそうした機能は使えません。

Google アナリティクスの「クロスドメイントラッキング」を使えばドメインの異なるiframeの広告でもカウントすることができますが、これは「広告側にJavaScriptやCookieを設置できる場合限定」です。

他にも広告の設置側でJavaScriptを利用してiframeを操作することもできますが、同一生成元ポリシー対策でAccess-Control-Allow-Origin等を変更してもらう必要があります。

純広告を設置している場合、そうした対応はまず不可能です。そうなると多くの場合、iframe広告の設置側ではクリック数を把握することができません。

そんな悩みを解決するのが今回紹介する「iframeTracker jQuery Plugin」です。
このプラグインを使うとドメインの異なるクロスサイトのiframe内広告のクリックをカウントすることができます。

今回はGoogle アナリティクスの「イベントトラッキング機能」と組み合わせてグラフィカルに表示するところまで解説します。

iframeTracker jQuery Pluginのダウンロードと使い方

iframeTracker jQuery Pluginのダウンロード

Githubの「iframeTracker jQuery Pluginのページ」にアクセスし、「Download ZIP」ボタンからダウンロードします。

中に入っているjquery.iframetracker.jsがプラグイン本体です。
jQueryの1.7以上と組み合わせて利用します。

プラグインの使い方

サンプルにもありますが最も簡単な使い方は以下の通りです。htmlのhead部分に記述します。
セレクタの「.iframe_wrap iframe」の部分は実際のDOM要素に合わせて変更してください。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script type='./jquery.iframetracker.js'></script>

<script>
jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            alert("iframe click!");
        }
    });
});
</script>

html部分の記述

上のセレクタは以下の様な構成を想定しています。

<div class="iframe_wrap">
<iframe src="http://example.com"></iframe>
</div>

以下にデモページを作ったのでiframe内をクリックしてみてください。

iframeTracker jQuery Pluginのデモ


1点注意があり、jQuery(document).readyでドキュメントを読み込んでからプラグインが呼び出されている関係で、ページが読み込まれるより前にクリックしたものはカウントできません。

しかし、そもそもメインのドキュメントよりも早くiframe要素が読み込まれることは考えにくいため、そのようなイレギュラーの原因はbotなどの機械的なもの限定なので、実害は無いと思います。

マウスオーバーやアウトのデモ

プラグインページのサンプルにある通りoverCallbackとoutCallbackを繋げることで、マウスオーバーやアウト時の処理も加える事ができます。

<script>
jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            alert("iframe click!");
        },
		overCallback: function(element){
            this._overId = $(element).css("border", "10px solid red");
        },
        outCallback: function(element){
            this._overId = $(element).css("border", "10px solid blue");
        },
    });
});
</script>

このデモでは分かりやすくマウスオーバー時に赤い罫線で囲み、アウト時に青い罫線で囲むようになっています。

iframeTracker jQuery Pluginのデモ2

Google アナリティクスのイベントトラッキングと組み合わせる例

Google アナリティクスのイベント機能を使って表示数とクリック数を表示してみます。

Google アナリティクス用のコードを設置した上で、以下のコードを記述します。
アナリティクスのコードやイベントについてはこのページでは解説しません。詳しくは公式ドキュメントを参照してください。

<!-- クリックイベント用 -->
<script>
jQuery(document).ready(function($){
	$('.iframe_wrap iframe').iframeTracker({
		blurCallback: function(){
			ga('send', 'event', 'iframe_ad', 'click');
		}
	});
});
</script>

<!-- 表示数カウントイベント用 -->
<script>
jQuery(document).ready(function($){
	var num = $('.iframe_wrap').length;
	if( num == 1 ){
		ga('send', 'event', 'iframe_ad', 'view');
	}
});
</script>

はじめのスクリプトで「.iframe_wrapのiframe」がクリックされた時にCategoryがiframe_ad、Actionがclickのイベントが実行されます。

続くスクリプトで「.iframe_wrap」要素がある場合だけイベントが実行されます。こちらではカテゴリは同じで、Actionをviewにしています。

以上の設定を行い、Google アナリティクスの「リアルタイムレポート＞イベント」を表示すれば正しくカウントされているかわかります。

イベントをグラフィカルに表示

また、「行動＞イベント＞イベントフロー」と進めば「広告表示数のうち何％がクリックしているか」といった情報をグラフィカルに表示することができます。

応用すれば広告のA/Bテストを行う際も、アクション名を変えるだけで簡単に比較・検証できます。

今回紹介したiframeTracker jQuery Pluginは寄付を募集しているようです。
プラグインページの最下部に寄付用のリンクがあります。