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 相关文章推荐
document.all的一个比较完整的总结及案例
Jan 31 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
vue实现分页栏效果
Jun 28 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
javascript 闭包详解
2015/07/02 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python中模块的__all__属性详解
2017/10/26 Python
Python多继承顺序实例分析
2018/05/26 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python计算导数并绘图的实例
2020/02/29 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
司机职责范本
2014/03/08 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
淘宝好评语句大全
2014/12/31 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Python学习之包与模块详解
2022/03/19 Python