Flyaway
LiuLichao的技术随笔

站点流量统计平台构建——前端JS脚本

近期的项目中要开发站点流量统计平台,在前端,我们通过在网站页面中引入js脚本的方式对页面进行统计,主要统计三个事件:

  • 网页加载时向统计后台发送相关数据
  • 网页被关闭时向统计后台发送相关数据
  • 页面任何位置被点击时向后台发送坐标位置数据

 

代码如下:

statistics.js

var HOST = "http://statistics.abc.cn/";

/**
 * 设置cookieId
 */
function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    var cookieStr = "\""+c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()+ ";")+"\"";
    console.log(cookieStr);
    document.cookie = cookieStr;
}
/**
 * 获取cookieId
 */
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
/**
 * 获取当前时间戳
 */
function getTimestamp() {
    var timestamp = Date.parse(new Date());
    return timestamp;
}

/**
 * 生成statId
 */
function genStatId() {
    var cookieId = getTimestamp();
    cookieId = "bjm_statistics" + "-" + cookieId + "-" + Math.round(Math.random() * 3000000000);
    return cookieId;
}
/**
 * 设置StatId
 */
function setStatId(siteMark) {
    var cookieId = genStatId();
    setCookie(siteMark, cookieId, 1);
}
/**
 * 获取StatId
 */
function getStatId(siteMark) {
    var statId = getCookie(siteMark);
    if (statId != null && statId.length > 0) {
        return statId;
    } else {
      return null;
    }
}

/**
 * 获取页面title
 */
function getPageTitle() {
    return document.title;
}

//创建ajax get的请求
var xmlHttp;
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}

/**
 * 获取站点mark
 * @returns
 */
function getSiteMark(){
  var js = document.getElementsByTagName("script");
  for (var i = 0; i < js.length; i++) {
    if (js[i].src.indexOf("js/statistics.js") >= 0) {
      var arraytemp = new Array();
      arraytemp = js[i].src.split('?');
      arraytemp = arraytemp[1].split('&');

      var siteMark = (arraytemp[0].split('='))[1];
      return siteMark;
    }
  }
}

/**
 * 获取当前页面url
 */
function getUrl(){
  var url = window.location.href
  return url;
}


var xmlHttp;
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}

function doPost(url,postData) {
  createxmlHttpRequest();
  xmlHttp.open("POST", url ,true);
  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlHttp.send(postData);
  xmlHttp.onreadystatechange = function() {
  }
}
 
/**
 * 统计访问函数
 */    
function statistics(){
  var siteMark = getSiteMark();
  if(getStatId(siteMark)==null){
    setStatId(siteMark);
  }
  var title = getPageTitle();
  var url = getUrl();
  var screenWidth = screen.width;
  var screenHeight = screen.height;
  var cookieValue = getCookie(siteMark);
  
  var postData = {'title' :title,'url':url,'siteMark':siteMark,'screenWidth':screenWidth,'screenHeight':screenHeight,'cookie':cookieValue}
  postData = (function(obj){ // 转成post需要的字符串.
     var str ="";

     for(var prop in obj){
     str += prop +"="+ obj[prop] +"&"
    }
     return str;
  })(postData);
  
  doPost(HOST+'statistics.action', postData);
}

/**
 * 窗口关闭记录时间
 */
function onWindowClose(){
  var url = getUrl();
  var siteMark = getSiteMark();
    var cookie = getCookie(siteMark);
  var postData = {'url':url,'cookie':cookie,'siteMark':siteMark};
  postData = (function(obj){ // 转成post需要的字符串.
     var str ="";

     for(var prop in obj){
     str += prop +"="+ obj[prop] +"&"
    }
     return str;
  })(postData);
  doPost(HOST+'statistics/windowClose.action', postData);
}

/**
 *页面点击事件处理
 */
var xOffset,yOffset;
var pointX = 0;
var pointY = 0;

//detect browser
var IE = document.all?true:false
if (!IE) {
  document.captureEvents(Event.MOUSEMOVE)
}
var firstElement=document.getElementsByTagName('body')[0].childNodes[1];

xOffset=findPosX(firstElement);
yOffset=findPosY(firstElement);
if (IE){ // In IE there's a default margin in the page body. If margin's not defined, use defaults
  var marginLeftExplorer  = parseInt(document.getElementsByTagName('body')[0].style.marginLeft);
  var marginTopExplorer   = parseInt(document.getElementsByTagName('body')[0].style.marginTop);
  /*assume default 10px/15px margin in explorer*/
  if (isNaN(marginLeftExplorer)) {marginLeftExplorer=10;}
  if (isNaN(marginTopExplorer)) {marginTopExplorer=15;}
  xOffset=xOffset+marginLeftExplorer;
  yOffset=yOffset+marginTopExplorer;
}



function findPosX(obj){
  var curleft = 0;
  if (obj.offsetParent){
    while (obj.offsetParent){
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  }else if (obj.x){
    curleft += obj.x;
  }
  return curleft;
}

function findPosY(obj){
  var curtop = 0;
  if (obj.offsetParent){
    while (obj.offsetParent){
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }else if (obj.y){
    curtop += obj.y;
  }
  return curtop;
}
function getMouseXY(e) {
  if (IE) {
    pointX = event.clientX + document.body.scrollLeft
    pointY = event.clientY + document.body.scrollTop
  } else {
    pointX = e.pageX
    pointY = e.pageY
  }
  pointX-=xOffset;
  pointY-=yOffset;
  
  var url = getUrl();
  var screenWidth = screen.width;
  var screenHeight = screen.height;
  var siteMark = getSiteMark();
  var cookie = getCookie(siteMark);
  
  var postData = {'url':url,'siteMark':siteMark,'screenWidth':screenWidth,'screenHeight':screenHeight,'pointX':pointX,'pointY':pointY,'cookie':cookie}
  postData = (function(obj){ // 转成post需要的字符串.
     var str ="";

     for(var prop in obj){
     str += prop +"="+ obj[prop] +"&"
    }
     return str;
  })(postData);
  
  doPost(HOST+'statistics/click.action', postData);
  
  return true;
}

window.onbeforeunload = onWindowClose;

statistics();

document.onmousedown = getMouseXY;

相关注释已经写清楚了。

其中,我们设置每一个cookie的过期时间为1天,以此统计每天的UV量。

在网站页面中引入脚本方式如下:

<script type="text/javascript" src="http://statistics.abc.cn/js/statistics.js?siteMark=76413067esef92efffe1a992c04f35498ebb110f"></script>

如上,siteMark参数可以是我们后台所设置的需要统计的站点的ID,由此区分不同站点。

需要一提的是,因为域名的不同,所以跨域设置cookie可能会遇到一些问题,因此我们将cookie设置到当前网站域之下,以post的方式发送给后台,由此实现访问人员的区分。

 

至此,我们成功实现了站点访问统计平台前端统计js脚本。

如有任何问题可以通过liulichaoruc@gmail.com联系我

if you have any problem,you can contact me via liulichaoruc@gmail.com

 

版权所有,转载注明出处

 

 

 

 

未经允许不得转载:Flyaway的技术随笔 » 站点流量统计平台构建——前端JS脚本

分享到:更多 ()

随便写的东西