JS实现点击事件统计的简单实例


Posted in Javascript onJuly 10, 2016

JS实现网站点击事件的统计功能。

点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储。

一、配置参数,主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。

参数名称       类型          默认值             说明
    selector:      string        '_click_rp'        点击触发的选择器,支持ID、class
    prefix:        string        '_rp_'             需要上报的参数属性名前缀,如_rp_type,表示要上报type参数的值
    cookie:        string        '_click_rp'        延迟上报时的cookie名称
    domain:        string        '.skye.com'    cookie存储的域名(可以通过使用的网站来获得)
    delay:         boolean       false              是否延迟上报,延迟上报通过cookie实现
    delay_attr:    string        _delay             标签中指定是否延迟上报,优先级最高,ture延时,其他不延时。 

二、外部参数,主要用于定义上报的参数。通过在外部定义_clickq数组增加参数。

三、标签参数,使用前缀_rp_定义,上报的时候会将所有_rp_开头的参数上报。参数的格式分为两种,1种纯字符,1中回调函数。

<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>,表示上报时的参数为a=aa&b=bb

1,纯字符,直接定义字符,表示需要上传参数的值。

2,回调函数,以javascript:开头。只需定义函数体,在函数体中返回参数的值。

如,<a href="/qa_question/press.html" id="ques_search_btn" class="_click_rp" _rp_act="javascript:if($('#ques_search_btn').text()=='提问'){return 'act_qa_ques';}else{return 'act_search';}"><span>提问</span></a>

四、延时上报,分为三种优先级,如下由高到低

1,标签属性_delay是否指定为true,如果是表示延迟上报。

2,是否为特定标签,如a标签本窗口打开(target等于"_self"或空),submit按钮。

3,配置参数中指定的delay参数。

五、支持:需要依赖jQuery插件。

六、使用案列

1,引入JS

var _clickq = _clickq || [];
_clickq.push(['param1', 'value1']);
var _clickc = {selector:'_click_rps'};
(function() {
 var click = document.createElement("script");
 click.src = "//cache.skye.com/js/lib/stat/click.js";
 var s = document.getElementsByTagName("script")[0]; 
 s.parentNode.insertBefore(click, s);
})();

2,定义选择器和上传参数

如,<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>

(function () {
  // 默认参数
  var options = {
    selector: '_click_rp',
    prefix: '_rp_',
    cookie: '_click_rp',
    domain: '.skye.com',
    delay: false,
    delay_attr: '_delay'
  };

  var params = {};
  var _params = {};
  var clickObj = null; // 当前点击对象

  // 获得对象
  var getObject = function(selector) {
    if (typeof(selector) == 'object') {
      return selector;
    } else {
      var obj = $('#'+selector);
      if (obj.length) {
        return obj;
      }
      obj = $('.'+selector);
      if (obj.length) {
        return obj;
      }
      return null;
    }
  }
  // 获得选择器
  var getSelector = function(selector) {
    return '#' + selector + ',.' + selector;
  }
  // 操作cookie函数
  var getCookie = function(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 "";
  }
  var setCookie = function(c_name,value,expiredays,path,domain) {
    var exdate = new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    var cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    if (path) cookie = cookie + ";path=" + path;
    if (domain) cookie = cookie + ";domain=" + domain;
    document.cookie = cookie;
  }

  // 获得标签中的参数
  var getAttrParam = function() {
    if ( clickObj ) {
      var attrs = clickObj.get(0).attributes;
      $.each(attrs, function(i) {
        var name = attrs[i].name;
        if ( name.indexOf(options.prefix) == 0 ) {
          name = name.replace(options.prefix, '');
          var value = attrs[i].value;
          if ( value.indexOf('javascript:') == 0 ) {
            // 执行js获得参数值
            value = value.replace('javascript:', '');
            eval('var valFun = function() {'+ value +'};');
            value = valFun();
          }
          params[name] = value;
        }
      });
    }
  }
  // 获得默认参数
  var getDefaultParam = function() {
    if(document) {
      params.url = document.URL || '';
      params.referrer = document.referrer || '';
    }
    // 时间
    var date = new Date();
    params.ltime = date.getTime() / 1000;

    // 时间戳
    params.t = date.getTime();
  }
  var getParamStr = function() {
    getAttrParam();
    getDefaultParam();
    // 合并配置参数
    for(var key in _params) {
      params[key] = _params[key];
    }
    //拼接参数串
    var args = ''; 
    for(var i in params) {
      if(args != '') {
        args += '&';
      }  
      args += i + '=' + encodeURIComponent(params[i]);
    }
    return args;
  }

  // 清空参数
  var clearParam = function() {
    params = {};
  }

  // 是否立即上报,如果跳转页面,则计入延时上报
  var getIsDelay = function() {
    if ( clickObj ) {
      // 有具体指定
      if ( clickObj.attr(options.delay_attr) == 'true' ) {
        return true;
      }
      // 特定标签
      // a标签
      if ( clickObj.is('a') ) {
        if ( clickObj.attr('href').indexOf('javascript:') == 0 ) {
          return false;
        }
        if ( clickObj.attr('target') && clickObj.attr('target') != '_self' ) {
          return false;
        }
        return true;
      }
      // submit按钮
      if ( (clickObj.is('input') || clickObj.is('button')) && clickObj.attr('type') == 'submit' ) {
        return true;
      }
    }
    return options.delay;
  }
  
  // 加入cookie,下次上报
  var setDelayCookie = function() {
    // 获得参数
    var args = getParamStr();
    var cookieStr = getCookie(options.cookie);
    if ( cookieStr == '' ) {
      cookieStr = args;
    } else {
      cookieStr = cookieStr + ',' + args;
    }
    setCookie(options.cookie, cookieStr, 7, '/', options.domain);
    clearParam();
  }

  // 上报cookie
  var rpCookie = function() {
    // 获得cookie,循环操作
    var cookieStr = getCookie(options.cookie);
    if ( cookieStr ) {
      var cookieArr = cookieStr.split(',');
      for(var key in cookieArr){ 
        rpClick(cookieArr[key]);
      } 
      setCookie(options.cookie, '', 7, '/', options.domain);
    }
  }

  // 上报
  var rpClick = function(args) {
    if ( args == undefined ) {
      args = getParamStr();
    }
    var img = new Image(1, 1);
    img.src = 'http://data.skye.com/stat/click?' + args;
    console.info(img.src);
    clearParam();
  }

  // js上报函数
  var rpComm = function(obj) {
    console.info('click');
    clickObj = obj;
    if ( getIsDelay() ) {
      setDelayCookie();
    } else {
      rpClick();
    }
  }

  //解析外部配置
  if(_clickc) {
    for(var i in _clickc) {
      options[i] = _clickc[i];
    }  
  }
  
  //解析外部参数
  if(_clickq) {
    for(var i in _clickq) {
      _params[_clickq[i][0]] = _clickq[i][1];
    }
  }

  // 提供外部js函数
  $.rpComm = function(obj) {
    rpComm(obj);
  }
  $.fn.rpComm = function() {
    rpComm($(this));
  }

  // cookie中的上报
  rpCookie();

  // 初始化信息
  var _time = new Date().valueOf();
  var selector = getSelector(options.selector);
  $('body').delegate(selector,'click',function() {
    // 连续点击限制
    if(new Date().valueOf() - _time < 300) {
      return;
    }
    _time = new Date().valueOf();
    rpComm($(this));
  });
})();

以上这篇JS实现点击事件统计的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 #Javascript
js生成随机数(指定范围)的实例代码
Jul 10 #Javascript
JS获取随机数和时间转换的简单实例
Jul 10 #Javascript
JS生成不重复的随机数组的简单实例
Jul 10 #Javascript
浅谈JavaScript对象与继承
Jul 10 #Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 #Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 #Javascript
You might like
十天学会php之第八天
2006/10/09 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python通过链接抓取网站详解
2019/11/20 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
公司运动会策划方案
2014/05/25 职场文书
感谢信范文大全
2015/01/23 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python