下面小編就為大家?guī)硪黄狫S實現(xiàn)點擊事件統(tǒng)計的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。

JS實現(xiàn)網(wǎng)站點擊事件的統(tǒng)計功能。

點擊事件上報，分為立即上報和延時上報，延時上報通過cookie存儲。

一、配置參數(shù)，主要用于定義上報的一些配置信息。通過在外部定義_clickc對象重置參數(shù)。

參數(shù)名稱       類型          默認值             說明

selector:      string        '_click_rp'        點擊觸發(fā)的選擇器，支持ID、class

prefix:        string        '_rp_'             需要上報的參數(shù)屬性名前綴，如_rp_type，表示要上報type參數(shù)的值

cookie:        string        '_click_rp'        延遲上報時的cookie名稱

domain:        string        '.skye.com'    cookie存儲的域名（可以通過使用的網(wǎng)站來獲得）

delay:         boolean       false              是否延遲上報，延遲上報通過cookie實現(xiàn)

delay_attr:    string        _delay             標(biāo)簽中指定是否延遲上報，優(yōu)先級最高，ture延時，其他不延時。 

二、外部參數(shù)，主要用于定義上報的參數(shù)。通過在外部定義_clickq數(shù)組增加參數(shù)。

三、標(biāo)簽參數(shù)，使用前綴_rp_定義，上報的時候會將所有_rp_開頭的參數(shù)上報。參數(shù)的格式分為兩種，1種純字符，1中回調(diào)函數(shù)。

<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>，表示上報時的參數(shù)為a=aa&b=bb

1，純字符，直接定義字符，表示需要上傳參數(shù)的值。

2，回調(diào)函數(shù)，以javascript:開頭。只需定義函數(shù)體，在函數(shù)體中返回參數(shù)的值。

如，<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>

四、延時上報，分為三種優(yōu)先級，如下由高到低

1，標(biāo)簽屬性_delay是否指定為true，如果是表示延遲上報。

2，是否為特定標(biāo)簽，如a標(biāo)簽本窗口打開（target等于"_self"或空），submit按鈕。

3，配置參數(shù)中指定的delay參數(shù)。

五、支持：需要依賴jQuery插件。

六、使用案列

1，引入JS

var _clickq = _clickq || [];

_clickq.push(['param1', 'value1']);

var _clickc = {selector:'_click_rps'};

(function() {

 var click = document.createElement("script");

 click.src = "http://cache.skye.com/js/lib/stat/click.js";

 var s = document.getElementsByTagName("script")[0]; 

 s.parentNode.insertBefore(click, s);

})();

2，定義選擇器和上傳參數(shù)

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

(function () {

  // 默認參數(shù)

  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; // 當(dāng)前點擊對象

  // 獲得對象

  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函數(shù)

  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;

  }

  // 獲得標(biāo)簽中的參數(shù)

  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 ) {

            // 執(zhí)行js獲得參數(shù)值

            value = value.replace('javascript:', '');

            eval('var valFun = function() {'+ value +'};');

            value = valFun();

          }

          params[name] = value;

        }

      });

    }

  }

  // 獲得默認參數(shù)

  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();

    // 合并配置參數(shù)

    for(var key in _params) {

      params[key] = _params[key];

    }

    //拼接參數(shù)串

    var args = ''; 

    for(var i in params) {

      if(args != '') {

        args += '&';

      }  

      args += i + '=' + encodeURIComponent(params[i]);

    }

    return args;

  }

  // 清空參數(shù)

  var clearParam = function() {

    params = {};

  }

  // 是否立即上報，如果跳轉(zhuǎn)頁面，則計入延時上報

  var getIsDelay = function() {

    if ( clickObj ) {

      // 有具體指定

      if ( clickObj.attr(options.delay_attr) == 'true' ) {

        return true;

      }

      // 特定標(biāo)簽

      // a標(biāo)簽

      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() {

    // 獲得參數(shù)

    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，循環(huán)操作

    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上報函數(shù)

  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];

    }  

  }

  //解析外部參數(shù)

  if(_clickq) {

    for(var i in _clickq) {

      _params[_clickq[i][0]] = _clickq[i][1];

    }

  }

  // 提供外部js函數(shù)

  $.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() {

    // 連續(xù)點擊限制

    if(new Date().valueOf() - _time < 300) {

      return;

    }

    _time = new Date().valueOf();

    rpComm($(this));

  });

})();

以上這篇JS實現(xiàn)點擊事件統(tǒng)計的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考