iframe内のリンククリックをトラッキングすることができるjQueryプラグイン「iframeTracker」

iframeTrackerは、iframe内のリンククリックを計測するためのjQueryプラグインです。iframeTrackerを導入することで、クロスサイトでのiframeのトラッキングが可能になります。

iframeTrackerの使い方

iframeTrackerのダウンロードと設置

まずは、GitHubからiframeTrackerをダウンロードします。

ダウンロードしたファイルを解凍すると、jquery.iframetracker.jsというファイルが入っているので、jquery.iframetracker.jsをサーバー上にアップしましょう。

jQueryとiframeTrackerの読み込み

以下のコードを</body>の直前に記述して、jQueryとiframeTrackerを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.iframetracker.js"></script>

jquery.iframetracker.jsのファイルパスは適宜変更してください。

iframeのトラッキング

jQueryとiframeTrackerを読み込むコードの後に、以下のコードを追加します。

<script>
jQuery(document).ready(function($){
 $('.iframe_wrap iframe').iframeTracker({
 blurCallback: function(){
 ga('send', 'event', 'iframe', 'click');
 }
 });
});
</script>

iframe_wrapというクラス内のiframeがクリックされたら、Googleアナリティクスのイベントとして記録されます。上記の場合、カテゴリーが「iframe」、アクションが「click」になりますので、この部分は適宜変更してください。

クリックではなく単純に表示数をカウントしたい場合は、以下のように記述します。

<script>
jQuery(document).ready(function($){
 var num = $('.iframe_wrap').length;
 if( num == 1 ){
 ga('send', 'event', 'iframe', 'view');
 }
});
</script>

カテゴリーが「iframe」、アクションが「view」として、アナリティクスのイベントに記録されます。

あとがき

iframeのクリックや表示をカウントしたいという場面は意外とあるのではないでしょうか。広告のタグがiframeだった場合などに、表示数やクリック数をカウントして分析するのに活用できます。