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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php 特殊字符处理函数
2008/09/05 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
取得传值的函数
2006/10/27 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Python实现k-means算法
2018/02/23 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
如何利用python 读取配置文件
2021/01/06 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
创业计划书六个要素
2013/12/26 职场文书
教师党性分析材料
2014/02/04 职场文书
目标责任书范文
2014/04/14 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
报效祖国演讲稿
2014/09/15 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
汽车转让协议书
2015/01/29 职场文书
工作收入证明模板
2015/06/12 职场文书
会议简报格式范文
2015/07/20 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS