A Simple Example of JS Implementation of Click Event Statistics

  • 2021-07-02 23:08:23
  • OfStack

JS realizes the statistical function of website click events.

Click Event Report, which is divided into immediate report and delayed report. Delayed report is stored through cookie.

1. Configuration parameters, which are mainly used to define 1 configuration information reported. Reset the parameters by externally defining the _ clickc object.

Parameter name type default value description
selector: string '_ click_rp' click-triggered selector, supports ID, class
prefix: The parameter attribute name prefix of string '_rp_' to be reported, such as _rp_type, indicates the value of type parameter to be reported
cookie: cookie name when string '_ click_rp' delays reporting
domain: Domain name stored in string '. skye. com' cookie (available via the Web site used)
delay: Whether boolean false is reported late or not. Delayed reporting is realized through cookie
delay_attr: string _delay tag specifies whether to delay reporting, with the highest priority, ture delay and others not delay.

2. External parameters, which are mainly used to define submitted parameters. Adding parameters by externally defining the _ clickq array.

3. Label parameters, defined with the prefix _rp_, will report all parameters beginning with _rp_. There are two formats for parameters, one is pure character, and the other is callback function.

< a class="_click_rp" href="" _rp_a="aa" _rp_b="bb" > a < /a > Indicates that the parameter is a=aa when reporting & b=bb

1. Pure characters, directly defining characters, indicating that the value of parameters needs to be uploaded.

2. Callback function, starting with javascript:. Just define the function body and return the value of the parameter in the function body.

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

4. Delayed reporting is divided into three priorities, from high to low as follows

1. Whether the tag attribute _ delay is specified as true, if so, it means delayed reporting.

2. Whether it is a specific label, such as a label. This window is open (target equals "_ self" or empty) and submit button.

3. Configure the delay parameter specified in the parameter.

5. Support: Need to rely on the jQuery plug-in.

6. Use the list

1. Introducing 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. Define selectors and upload parameters

For example, < 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));
  });
})();

Related articles: