バナー上のマウスの挙動をトラッキングする

バナー上のマウスの挙動をトラッキングする

1) ページロード時に広告領域のx、y座標を取得してサーバーに投げる

ブラインドネットワークへの配信で、どこの媒体に掲載されているか分からない場合、掲載面のどの位置に表示されたのかを知ることができる(Above the foldか否かなど)

2) マウスオーバー、マウスアウト、クリック時に、サーバーに投げる

配信した広告クリエイティブに対して、どのようなアクションが取られたかを知ることができる

x、y座標は、iframeに入れられて配信された場合、iframe内での座標位置になるので、掲載位置を正しく知ることができない

publisher=の値で集計すれば、どこのページに掲載されたか、どこのページでどのようなアクションが取られたか、を知ることができる。iframeに入れて配信されるときは、「document.location」を「document.referrer」にする必要あり。iframeが入れ子になる場合は、ページのURLは参照できないので諦める

ログをtimestamp値の順に並べると、ロードから何秒後にクリックされたか、何秒マウスオーバーしたのか、などが分かる

[UNIQUE_DELIVERY_ID]に、配信ごとに固有のIDを入れておく。これでログを集計すると、とある1配信において、マウスオーバーやクリックの回数、そのタイムラグ、などを知ることができる

[CREATIVE_ID]に、クリエイティブ固有のIDを入れておく。これでログを集計すると、とあるクリエイティブにおいて、マウスオーバーやクリックの回数、そのタイムラグ、などを知ることができる


<div id="ad"><a href="./" target="_top" onmousedown="ad_tracking.submitMouseClick(event);"><img src="./728x90.png" width=728 height=90 border=0></a></div>

<script language="JavaScript">
<!--

var adTracking = function () {};

adTracking.prototype = {

  eventPosition:function(e){

    var o = new Object();

    if(e.pageX || e.pageY){
      o.x = e.pageX;
      o.y = e.pageY;
    }
    else if(e.clientX || e.clientY){
      if(document.documentElement.scrollTop){
        o.x = e.clientX+document.documentElement.scrollLeft;
        o.y = e.clientY+document.documentElement.scrollTop;
      }
      else{
        o.x=e.clientX+document.body.scrollLeft;
        o.y=e.clientY+document.body.scrollTop;
      }
    }

    return o;
  },

  elementPosition:function(e){

    var o = new Object();

    o.x = e.offsetLeft;
    o.y = e.offsetTop;

    return o;
  },

  currentTime:function(){

    var t = new Date();
    var s = t.getHours() + '%3A' + t.getMinutes() + '%3A' + t.getSeconds() + '%3A' + t.getMilliseconds();
    return s;
  },

  submitMouseOver:function(e){

    if(navigator.userAgent.indexOf("MSIE",0) != -1){
      e = window.event;
    }

    var o = ad_tracking.eventPosition(e);
    var adTrackingUrl = "http://[YOUR_HOST]/log/?mode=over&x="+o.x+"&y="+o.y+"&publisher="+document.location+"&creative=[CREATIVE_ID]&id=[UNIQUE_DELIVERY_ID]&timestamp="+ad_tracking.currentTime();
    alert(adTrackingUrl);
    //var sc = document.createElement("script");
    //sc.setAttribute("type","text/javascript");
    //sc.setAttribute("src",adTrackingUrl);
    //document.getElementsByTagName("body").item(0).appendChild(sc);
  },

  submitMouseOut:function(e){

    if(navigator.userAgent.indexOf("MSIE",0) != -1){
      e = window.event;
    }

    var o = ad_tracking.eventPosition(e);
    var adTrackingUrl = "http://[YOUR_HOST]/log/?mode=out&x="+o.x+"&y="+o.y+"&publisher="+document.location+"&creative=[CREATIVE_ID]&id=[UNIQUE_DELIVERY_ID]&timestamp="+ad_tracking.currentTime();
    alert(adTrackingUrl);
    //var sc = document.createElement("script");
    //sc.setAttribute("type","text/javascript");
    //sc.setAttribute("src",adTrackingUrl);
    //document.getElementsByTagName("body").item(0).appendChild(sc);
  },

  submitMouseClick:function(e){

    if(navigator.userAgent.indexOf("MSIE",0) != -1){
      e = window.event;
    }

    var o = ad_tracking.eventPosition(e);
    var adTrackingUrl = "http://[YOUR_HOST]/log/?mode=click&x="+o.x+"&y="+o.y+"&publisher="+document.location+"&creative=[CREATIVE_ID]&id=[UNIQUE_DELIVERY_ID]&timestamp="+ad_tracking.currentTime();
    alert(adTrackingUrl);
    //var sc = document.createElement("script");
    //sc.setAttribute("type","text/javascript");
    //sc.setAttribute("src",adTrackingUrl);
    //document.getElementsByTagName("body").item(0).appendChild(sc);
  }

};

var ad_tracking = new adTracking;

(function(){

  var banner = document.getElementById('ad');

  if(banner){

    if(banner.addEventListener){
      banner.addEventListener('mouseover',ad_tracking.submitMouseOver,false);
      banner.addEventListener('mouseout',ad_tracking.submitMouseOut,false);
    }
    else if(banner.attachEvent){
      banner.attachEvent('onmouseover',ad_tracking.submitMouseOver);
      banner.attachEvent('onmouseout',ad_tracking.submitMouseOut);
    }
    else{
      banner['onmouseover'] = ad_tracking.submitMouseOver;
      banner['onmouseout'] = ad_tracking.submitMouseOut;
    }

    var o = ad_tracking.elementPosition(banner);
    var adTrackingUrl = "http://[YOUR_HOST]/log/?mode=load&x="+o.x+"&y="+o.y+"&publisher="+document.location+"&creative=[CREATIVE_ID]&id=[UNIQUE_DELIVERY_ID]&timestamp="+ad_tracking.currentTime();
    alert(adTrackingUrl);
    //var sc = document.createElement("script");
    //sc.setAttribute("type","text/javascript");
    //sc.setAttribute("src",adTrackingUrl);
    //document.getElementsByTagName("body").item(0).appendChild(sc);

  }

})();

// -->
</script>