JS implements the statistical function of website click events.
Click event reporting, which is divided into immediate reporting and delay reporting, and delay reporting is stored through cookies.
1. Configuration parameters, mainly used to define some reported configuration information. Reset parameters by defining the _clickc object externally.
Parameter name type default value description
selector: string '_click_rp' Click trigger selector, supports ID and class
prefix: string '_rp_' The parameter attribute name prefix that needs to be reported, such as _rp_type, means that the value of the type parameter to be reported
cookie: string '_click_rp' The name of the cookie when delaying reporting
domain: string '.skye.com' cookie stored domain name (can be obtained through the website used)
delay: boolean false Whether to delay reporting, delay reporting is achieved through cookies
delay_attr: string _delay tag specifies whether to delay reporting, the highest priority, ture delay, and other delays.
2. External parameters, mainly used to define reported parameters. Add parameters by defining the _clickq array externally.
3. Label parameters are defined using the prefix _rp_. When reporting, all parameters starting from _rp_ will be reported. The format of the parameter is divided into two types, 1 pure character, and 1 callback function.
<a href="" _rp_a="aa" _rp_b="bb">a</a>, indicating that the parameter at the time of reporting is a=aa&b=bb
1. Pure characters, directly define characters, indicating the value of the parameter that 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" _rp_act="javascript:if($('#ques_search_btn').text()=='question'){return 'act_qa_ques';}else{return 'act_search';}"><span>Ask</span></a>
4. Delay reporting is divided into three priority levels, as follows:
1. Whether the tag attribute _delay is specified as true, if it means delayed reporting.
2. Whether it is a specific tag, such as a tag, this window is open (target equals "_self" or empty), submit button.
3. The delay parameter specified in the configuration parameters.
5. Support: You need to rely on jQuery plug-in.
VI. Use case
1. Introduce 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 selector and upload parameters
For example, <a href="" _rp_a="aa" _rp_b="bb">a</a>
(function () { // Default parameters 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; // Currently clicking on the object// Get the object 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; } } // Get the selector var getSelector = function(selector) { return '#' + selector + ',.' + selector; } // Operate the cookie function 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; } // Get the parameter in the tag 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 ) { // Execute js to get parameter value = value.replace('javascript:', ''); eval('var valFun = function() {'+ value +'};'); value = valFun(); } params[name] = value; } }); } } // Get the default parameter var getDefaultParam = function() { if(document) { params.url = document.URL || ''; params.referrer = document.referrer || ''; } // Time var date = new Date(); params.ltime = date.getTime() / 1000; // Time stamp params.t = date.getTime(); } var getParamStr = function() { getAttrParam(); getDefaultParam(); // Merge configuration parameters for(var key in _params) { params[key] = _params[key]; } // Splice parameter string var args = ''; for(var i in params) { if(args != '') { args += '&'; } args += i + '=' + encodeURIComponent(params[i]); } return args; } // Clear the parameters var clearParam = function() { params = {}; } // Whether to report immediately, if the page is jumped, the delay reporting is counted var getIsDelay = function() { if ( clickObj ) { // There is a specific specification if ( clickObj.attr(options.delay_attr) == 'true' ) { return true; } // Specific tag// aTag 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 button if ( (clickObj.is('input') || clickObj.is('button')) && clickObj.attr('type') == 'submit' ) { return true; } } return options.delay; } // Add cookie and report var setDelayCookie = function() { // Get parameters var args = getParamStr(); var cookieStr = getCookie(options.cookie); if ( cookieStr == '' ) { cookieStr = args; } else { cookieStr = cookieStr + ',' + args; } setCookie(options.cookie, cookieStr, 7, '/', options.domain); clearParam(); } // Report cookie var rpCookie = function() { // Get cookies, loop 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); } } // Report 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 reporting function var rpComm = function(obj) { console.info('click'); clickObj = obj; if ( getIsDelay() ) { setDelayCookie(); } else { rpClick(); } } // parse external configuration if(_clickc) { for(var i in _clickc) { options[i] = _clickc[i]; } } // parse external parameters if(_clickq) { for(var i in _clickq) { _params[_clickq[i][0]] = _clickq[i][1]; } } // Provide external js function $.rpComm = function(obj) { rpComm(obj); } $.fn.rpComm = function() { rpComm($(this)); } // Report rpCookie() in cookies; // Initialization information var _time = new Date().valueOf(); var selector = getSelector(options.selector); $('body').delegate(selector,'click',function() { // Continuous click restriction if(new Date().valueOf() - _time < 300) { return; } _time = new Date().valueOf(); rpComm($(this)); });})();The above simple example of JS realizing click event statistics is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.