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

 更新时间:2016年07月10日 10:17:11   投稿:jingxian   我要评论
下面小编就为大家带来一篇JS实现点击事件统计的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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实现点击事件统计的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 一行代码告别document.getElementById

    一行代码告别document.getElementById

    很久以前做网页的时候,几乎没有听说过 getElementById 这一玩意儿。在那个ie独占天下的年代里,做的页面也几乎都是ie only的。只要ie没问题,那就OK了
    2012-06-06
  • 微信小程序之GET请求的实例详解

    微信小程序之GET请求的实例详解

    这篇文章主要介绍了微信小程序之GET请求的实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握该如何使用get请求,需要的朋友可以参考下
    2017-09-09
  • 微信小程序下拉加载和上拉刷新两种实现方法详解

    微信小程序下拉加载和上拉刷新两种实现方法详解

    这篇文章主要介绍了微信小程序下拉加载和上拉刷新两种实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript指定断点操作实例教程

    JavaScript指定断点操作实例教程

    这篇文章主要给大家介绍了关于JavaScript指定断点操作的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • Javascript点击按钮随机改变数字与其颜色

    Javascript点击按钮随机改变数字与其颜色

    这篇文章主要介绍了Javascript点击按钮随机改变数字和其字体的颜色,实现后的效果很不错,具有一定的参考价值,有需要的可以参考借鉴,下面来一起看看。
    2016-09-09
  • 关于javascript sort()排序你可能忽略的一点理解

    关于javascript sort()排序你可能忽略的一点理解

    最近在研究Javascript发现了其中一些之前忽略的问题,所以想着总结分享出来,下面这篇文章主要给大家介绍了关于javascript sort()排序你可能忽略的一点理解,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • js实现飞入星星特效代码

    js实现飞入星星特效代码

    这篇文章主要介绍了js实现飞入星星特效代码,主要通过控制背景与飞入点的样式,结合setTimeout函数即可实现星星飞入的效果,对于学习javascript有不错的参考借鉴价值,需要的朋友可以参考下
    2014-10-10
  • JavaScript中闭包的写法和作用详解

    JavaScript中闭包的写法和作用详解

    本文给大家介绍javascript中的闭包,包括对js闭包概念的理解,闭包的几种写法和用法,闭包的主要作用,闭包与this对象,闭包与内存泄露及使用闭包的注意点相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js 点击a标签 获取a的自定义属性方法

    js 点击a标签 获取a的自定义属性方法

    下面小编就为大家带来一篇js 点击a标签 获取a的自定义属性方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Event altKey,ctrlKey,shiftKey属性解析

    Event altKey,ctrlKey,shiftKey属性解析

    本篇文章主要是对Event altKey,ctrlKey,shiftKey属性解析了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论