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


投稿日:2015年5月9日
  • 1
  • 13



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

iframetracker

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

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」ボタンからダウンロードします。

iframetracker01

中に入っている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などの機械的なもの限定なので、実害は無いと思います。


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

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

<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」がクリックされた時にCategoryiframe_adActionclickのイベントが実行されます。

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

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

iframetracker02

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

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

iframetracker03

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


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



現在のページを共有する



現在のページに関連する記事

jQueryでクロスサイトのiframe広告のクリックをカウントする方法 5段階評価を付けることができるjQuery Ratyプラグインの使い方
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 PukiWikiで5段階評価を付けるプラグインを作成しました
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 FuckAdBlockを利用して自由自在にAdblock対策をする方法
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 「最新版」WordPressに各種ソーシャルメディアボタンを追加する方法
jQueryでクロスサイトのiframe広告のクリックをカウントする方法 Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する

おすすめの記事

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定方法

GMO VPSを契約してWordPressを安定動作させるまでのサーバ設定…

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成す…

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。