JS实现点击事件统计

JS实现点击事件统计

原创  2016年06月15日 09:53:55

• 标签：
• 网站统计 /
• 点击事件 /
• 统计 /
• 百度统计 /
• JS统计

• 2722

JS实现网站点击事件的统计功能。

[javascript]  view plain  copy

1. /** 
2.  * 点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。 
3.  *  
4.  * 一、配置参数，主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。 
5.  *     参数名称       类型          默认值             说明 
6.  *     selector:      string        '_click_rp'        点击触发的选择器，支持ID、class 
7.  *     prefix:        string        '_rp_'             需要上报的参数属性名前缀，如_rp_type，表示要上报type参数的值 
8.  *     cookie:        string        '_click_rp'        延迟上报时的cookie名称 
9.  *     domain:        string        '.skye.com'    cookie存储的域名（可以通过使用的网站来获得） 
10.  *     delay:         boolean       false              是否延迟上报，延迟上报通过cookie实现 
11.  *     delay_attr:    string        _delay             标签中指定是否延迟上报，优先级最高，ture延时，其他不延时。 
12.  *      
13.  * 二、外部参数，主要用于定义上报的参数。通过在外部定义_clickq数组增加参数。 
14.  * 
15.  * 三、标签参数，使用前缀_rp_定义，上报的时候会将所有_rp_开头的参数上报。参数的格式分为两种，1种纯字符，1中回调函数。 
16.  * <a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>，表示上报时的参数为a=aa&b=bb 
17.  * 1，纯字符，直接定义字符，表示需要上传参数的值。 
18.  * 2，回调函数，以javascript:开头。只需定义函数体，在函数体中返回参数的值。 
19.  * 如，<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> 
20.  * 
21.  * 四、延时上报，分为三种优先级，如下由高到低 
22.  * 1，标签属性_delay是否指定为true，如果是表示延迟上报。 
23.  * 2，是否为特定标签，如a标签本窗口打开（target等于"_self"或空），submit按钮。 
24.  * 3，配置参数中指定的delay参数。 
25.  *  
26.  * 五、支持：需要依赖jQuery插件。 
27.  *  
28.  * 六、使用案列 
29.  * 1，引入JS 
30.  * var _clickq = _clickq || []; 
31.  * _clickq.push(['param1', 'value1']); 
32.  * var _clickc = {selector:'_click_rps'}; 
33.  * (function() { 
34.  *  var click = document.createElement("script"); 
35.  *  click.src = "//cache.skye.com/js/lib/stat/click.js"; 
36.  *  var s = document.getElementsByTagName("script")[0];  
37.  *  s.parentNode.insertBefore(click, s); 
38.  * })(); 
39.  *  
40.  * 2，定义选择器和上传参数 
41.  * 如，<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a> 
42.  */  
43. (function () {  
44.     // 默认参数  
45.     var options = {  
46.         selector: '_click_rp',  
47.         prefix: '_rp_',  
48.         cookie: '_click_rp',  
49.         domain: '.skye.com',  
50.         delay: false,  
51.         delay_attr: '_delay'  
52.     };  
53.   
54.     var params = {};  
55.     var _params = {};  
56.     var clickObj = null; // 当前点击对象  
57.   
58.     // 获得对象  
59.     var getObject = function(selector) {  
60.         if (typeof(selector) == 'object') {  
61.             return selector;  
62.         } else {  
63.             var obj = $('#'+selector);  
64.             if (obj.length) {  
65.                 return obj;  
66.             }  
67.             obj = $('.'+selector);  
68.             if (obj.length) {  
69.                 return obj;  
70.             }  
71.             return null;  
72.         }  
73.     }  
74.     // 获得选择器  
75.     var getSelector = function(selector) {  
76.         return '#' + selector + ',.' + selector;  
77.     }  
78.     // 操作cookie函数  
79.     var getCookie = function(c_name) {  
80.         if (document.cookie.length>0) {  
81.             c_start = document.cookie.indexOf(c_name + "=")  
82.             if (c_start!=-1) {   
83.                 c_start=c_start + c_name.length+1   
84.                 c_end=document.cookie.indexOf(";",c_start)  
85.                 if (c_end==-1) c_end=document.cookie.length  
86.                 return unescape(document.cookie.substring(c_start,c_end))  
87.             }  
88.         }  
89.         return "";  
90.     }  
91.     var setCookie = function(c_name,value,expiredays,path,domain) {  
92.         var exdate = new Date()  
93.         exdate.setDate(exdate.getDate()+expiredays)  
94.         var cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
95.         if (path) cookie = cookie + ";path=" + path;  
96.         if (domain) cookie = cookie + ";domain=" + domain;  
97.         document.cookie = cookie;  
98.     }  
99.   
100.     // 获得标签中的参数  
101.     var getAttrParam = function() {  
102.         if ( clickObj ) {  
103.             var attrs = clickObj.get(0).attributes;  
104.             $.each(attrs, function(i) {  
105.                 var name = attrs[i].name;  
106.                 if ( name.indexOf(options.prefix) == 0 ) {  
107.                     name = name.replace(options.prefix, '');  
108.                     var value = attrs[i].value;  
109.                     if ( value.indexOf('javascript:') == 0 ) {  
110.                         // 执行js获得参数值  
111.                         value = value.replace('javascript:', '');  
112.                         eval('var valFun = function() {'+ value +'};');  
113.                         value = valFun();  
114.                     }  
115.                     params[name] = value;  
116.                 }  
117.             });  
118.         }  
119.     }  
120.     // 获得默认参数  
121.     var getDefaultParam = function() {  
122.         if(document) {  
123.             params.url = document.URL || '';  
124.             params.referrer = document.referrer || '';  
125.         }  
126.         // 时间  
127.         var date = new Date();  
128.         params.ltime = date.getTime() / 1000;  
129.   
130.         // 时间戳  
131.         params.t = date.getTime();  
132.     }  
133.     var getParamStr = function() {  
134.         getAttrParam();  
135.         getDefaultParam();  
136.         // 合并配置参数  
137.         for(var key in _params) {  
138.             params[key] = _params[key];  
139.         }  
140.         //拼接参数串  
141.         var args = '';   
142.         for(var i in params) {  
143.             if(args != '') {  
144.                 args += '&';  
145.             }     
146.             args += i + '=' + encodeURIComponent(params[i]);  
147.         }  
148.         return args;  
149.     }  
150.   
151.     // 清空参数  
152.     var clearParam = function() {  
153.         params = {};  
154.     }  
155.   
156.     // 是否立即上报，如果跳转页面，则计入延时上报  
157.     var getIsDelay = function() {  
158.         if ( clickObj ) {  
159.             // 有具体指定  
160.             if ( clickObj.attr(options.delay_attr) == 'true' ) {  
161.                 return true;  
162.             }  
163.             // 特定标签  
164.             // a标签  
165.             if ( clickObj.is('a') ) {  
166.                 if ( clickObj.attr('href').indexOf('javascript:') == 0 ) {  
167.                     return false;  
168.                 }  
169.                 if ( clickObj.attr('target') && clickObj.attr('target') != '_self' ) {  
170.                     return false;  
171.                 }  
172.                 return true;  
173.             }  
174.             // submit按钮  
175.             if ( (clickObj.is('input') || clickObj.is('button')) && clickObj.attr('type') == 'submit' ) {  
176.                 return true;  
177.             }  
178.         }  
179.         return options.delay;  
180.     }  
181.       
182.     // 加入cookie，下次上报  
183.     var setDelayCookie = function() {  
184.         // 获得参数  
185.         var args = getParamStr();  
186.         var cookieStr = getCookie(options.cookie);  
187.         if ( cookieStr == '' ) {  
188.             cookieStr = args;  
189.         } else {  
190.             cookieStr = cookieStr + ',' + args;  
191.         }  
192.         setCookie(options.cookie, cookieStr, 7, '/', options.domain);  
193.         clearParam();  
194.     }  
195.   
196.     // 上报cookie  
197.     var rpCookie = function() {  
198.         // 获得cookie，循环操作  
199.         var cookieStr = getCookie(options.cookie);  
200.         if ( cookieStr ) {  
201.             var cookieArr = cookieStr.split(',');  
202.             for(var key in cookieArr){    
203.                 rpClick(cookieArr[key]);  
204.             }    
205.             setCookie(options.cookie, '', 7, '/', options.domain);  
206.         }  
207.     }  
208.   
209.     // 上报  
210.     var rpClick = function(args) {  
211.         if ( args == undefined ) {  
212.             args = getParamStr();  
213.         }  
214.         var img = new Image(1, 1);  
215.         img.src = 'http://data.skye.com/stat/click?' + args;  
216.         console.info(img.src);  
217.         clearParam();  
218.     }  
219.   
220.     // js上报函数  
221.     var rpComm = function(obj) {  
222.         console.info('click');  
223.         clickObj = obj;  
224.         if ( getIsDelay() ) {  
225.             setDelayCookie();  
226.         } else {  
227.             rpClick();  
228.         }  
229.     }  
230.   
231.     //解析外部配置  
232.     if(_clickc) {  
233.         for(var i in _clickc) {  
234.             options[i] = _clickc[i];  
235.         }     
236.     }  
237.       
238.     //解析外部参数  
239.     if(_clickq) {  
240.         for(var i in _clickq) {  
241.             _params[_clickq[i][0]] = _clickq[i][1];  
242.         }  
243.     }  
244.   
245.     // 提供外部js函数  
246.     $.rpComm = function(obj) {  
247.         rpComm(obj);  
248.     }  
249.     $.fn.rpComm = function() {  
250.         rpComm($(this));  
251.     }  
252.   
253.     // cookie中的上报  
254.     rpCookie();  
255.   
256.     // 初始化信息  
257.     var _time = new Date().valueOf();  
258.     var selector = getSelector(options.selector);  
259.     $('body').delegate(selector,'click',function() {  
260.         // 连续点击限制  
261.         if(new Date().valueOf() - _time < 300) {  
262.             return;  
263.         }  
264.         _time = new Date().valueOf();  
265.         rpComm($(this));  
266.     });  
267. })();  

原创  2016年06月15日 09:53:55

• 标签：
• 网站统计 /
• 点击事件 /
• 统计 /
• 百度统计 /
• JS统计

• 2722

JS实现网站点击事件的统计功能。

[javascript]  view plain  copy

1. /** 
2.  * 点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。 
3.  *  
4.  * 一、配置参数，主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。 
5.  *     参数名称       类型          默认值             说明 
6.  *     selector:      string        '_click_rp'        点击触发的选择器，支持ID、class 
7.  *     prefix:        string        '_rp_'             需要上报的参数属性名前缀，如_rp_type，表示要上报type参数的值 
8.  *     cookie:        string        '_click_rp'        延迟上报时的cookie名称 
9.  *     domain:        string        '.skye.com'    cookie存储的域名（可以通过使用的网站来获得） 
10.  *     delay:         boolean       false              是否延迟上报，延迟上报通过cookie实现 
11.  *     delay_attr:    string        _delay             标签中指定是否延迟上报，优先级最高，ture延时，其他不延时。 
12.  *      
13.  * 二、外部参数，主要用于定义上报的参数。通过在外部定义_clickq数组增加参数。 
14.  * 
15.  * 三、标签参数，使用前缀_rp_定义，上报的时候会将所有_rp_开头的参数上报。参数的格式分为两种，1种纯字符，1中回调函数。 
16.  * <a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>，表示上报时的参数为a=aa&b=bb 
17.  * 1，纯字符，直接定义字符，表示需要上传参数的值。 
18.  * 2，回调函数，以javascript:开头。只需定义函数体，在函数体中返回参数的值。 
19.  * 如，<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> 
20.  * 
21.  * 四、延时上报，分为三种优先级，如下由高到低 
22.  * 1，标签属性_delay是否指定为true，如果是表示延迟上报。 
23.  * 2，是否为特定标签，如a标签本窗口打开（target等于"_self"或空），submit按钮。 
24.  * 3，配置参数中指定的delay参数。 
25.  *  
26.  * 五、支持：需要依赖jQuery插件。 
27.  *  
28.  * 六、使用案列 
29.  * 1，引入JS 
30.  * var _clickq = _clickq || []; 
31.  * _clickq.push(['param1', 'value1']); 
32.  * var _clickc = {selector:'_click_rps'}; 
33.  * (function() { 
34.  *  var click = document.createElement("script"); 
35.  *  click.src = "//cache.skye.com/js/lib/stat/click.js"; 
36.  *  var s = document.getElementsByTagName("script")[0];  
37.  *  s.parentNode.insertBefore(click, s); 
38.  * })(); 
39.  *  
40.  * 2，定义选择器和上传参数 
41.  * 如，<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a> 
42.  */  
43. (function () {  
44.     // 默认参数  
45.     var options = {  
46.         selector: '_click_rp',  
47.         prefix: '_rp_',  
48.         cookie: '_click_rp',  
49.         domain: '.skye.com',  
50.         delay: false,  
51.         delay_attr: '_delay'  
52.     };  
53.   
54.     var params = {};  
55.     var _params = {};  
56.     var clickObj = null; // 当前点击对象  
57.   
58.     // 获得对象  
59.     var getObject = function(selector) {  
60.         if (typeof(selector) == 'object') {  
61.             return selector;  
62.         } else {  
63.             var obj = $('#'+selector);  
64.             if (obj.length) {  
65.                 return obj;  
66.             }  
67.             obj = $('.'+selector);  
68.             if (obj.length) {  
69.                 return obj;  
70.             }  
71.             return null;  
72.         }  
73.     }  
74.     // 获得选择器  
75.     var getSelector = function(selector) {  
76.         return '#' + selector + ',.' + selector;  
77.     }  
78.     // 操作cookie函数  
79.     var getCookie = function(c_name) {  
80.         if (document.cookie.length>0) {  
81.             c_start = document.cookie.indexOf(c_name + "=")  
82.             if (c_start!=-1) {   
83.                 c_start=c_start + c_name.length+1   
84.                 c_end=document.cookie.indexOf(";",c_start)  
85.                 if (c_end==-1) c_end=document.cookie.length  
86.                 return unescape(document.cookie.substring(c_start,c_end))  
87.             }  
88.         }  
89.         return "";  
90.     }  
91.     var setCookie = function(c_name,value,expiredays,path,domain) {  
92.         var exdate = new Date()  
93.         exdate.setDate(exdate.getDate()+expiredays)  
94.         var cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
95.         if (path) cookie = cookie + ";path=" + path;  
96.         if (domain) cookie = cookie + ";domain=" + domain;  
97.         document.cookie = cookie;  
98.     }  
99.   
100.     // 获得标签中的参数  
101.     var getAttrParam = function() {  
102.         if ( clickObj ) {  
103.             var attrs = clickObj.get(0).attributes;  
104.             $.each(attrs, function(i) {  
105.                 var name = attrs[i].name;  
106.                 if ( name.indexOf(options.prefix) == 0 ) {  
107.                     name = name.replace(options.prefix, '');  
108.                     var value = attrs[i].value;  
109.                     if ( value.indexOf('javascript:') == 0 ) {  
110.                         // 执行js获得参数值  
111.                         value = value.replace('javascript:', '');  
112.                         eval('var valFun = function() {'+ value +'};');  
113.                         value = valFun();  
114.                     }  
115.                     params[name] = value;  
116.                 }  
117.             });  
118.         }  
119.     }  
120.     // 获得默认参数  
121.     var getDefaultParam = function() {  
122.         if(document) {  
123.             params.url = document.URL || '';  
124.             params.referrer = document.referrer || '';  
125.         }  
126.         // 时间  
127.         var date = new Date();  
128.         params.ltime = date.getTime() / 1000;  
129.   
130.         // 时间戳  
131.         params.t = date.getTime();  
132.     }  
133.     var getParamStr = function() {  
134.         getAttrParam();  
135.         getDefaultParam();  
136.         // 合并配置参数  
137.         for(var key in _params) {  
138.             params[key] = _params[key];  
139.         }  
140.         //拼接参数串  
141.         var args = '';   
142.         for(var i in params) {  
143.             if(args != '') {  
144.                 args += '&';  
145.             }     
146.             args += i + '=' + encodeURIComponent(params[i]);  
147.         }  
148.         return args;  
149.     }  
150.   
151.     // 清空参数  
152.     var clearParam = function() {  
153.         params = {};  
154.     }  
155.   
156.     // 是否立即上报，如果跳转页面，则计入延时上报  
157.     var getIsDelay = function() {  
158.         if ( clickObj ) {  
159.             // 有具体指定  
160.             if ( clickObj.attr(options.delay_attr) == 'true' ) {  
161.                 return true;  
162.             }  
163.             // 特定标签  
164.             // a标签  
165.             if ( clickObj.is('a') ) {  
166.                 if ( clickObj.attr('href').indexOf('javascript:') == 0 ) {  
167.                     return false;  
168.                 }  
169.                 if ( clickObj.attr('target') && clickObj.attr('target') != '_self' ) {  
170.                     return false;  
171.                 }  
172.                 return true;  
173.             }  
174.             // submit按钮  
175.             if ( (clickObj.is('input') || clickObj.is('button')) && clickObj.attr('type') == 'submit' ) {  
176.                 return true;  
177.             }  
178.         }  
179.         return options.delay;  
180.     }  
181.       
182.     // 加入cookie，下次上报  
183.     var setDelayCookie = function() {  
184.         // 获得参数  
185.         var args = getParamStr();  
186.         var cookieStr = getCookie(options.cookie);  
187.         if ( cookieStr == '' ) {  
188.             cookieStr = args;  
189.         } else {  
190.             cookieStr = cookieStr + ',' + args;  
191.         }  
192.         setCookie(options.cookie, cookieStr, 7, '/', options.domain);  
193.         clearParam();  
194.     }  
195.   
196.     // 上报cookie  
197.     var rpCookie = function() {  
198.         // 获得cookie，循环操作  
199.         var cookieStr = getCookie(options.cookie);  
200.         if ( cookieStr ) {  
201.             var cookieArr = cookieStr.split(',');  
202.             for(var key in cookieArr){    
203.                 rpClick(cookieArr[key]);  
204.             }    
205.             setCookie(options.cookie, '', 7, '/', options.domain);  
206.         }  
207.     }  
208.   
209.     // 上报  
210.     var rpClick = function(args) {  
211.         if ( args == undefined ) {  
212.             args = getParamStr();  
213.         }  
214.         var img = new Image(1, 1);  
215.         img.src = 'http://data.skye.com/stat/click?' + args;  
216.         console.info(img.src);  
217.         clearParam();  
218.     }  
219.   
220.     // js上报函数  
221.     var rpComm = function(obj) {  
222.         console.info('click');  
223.         clickObj = obj;  
224.         if ( getIsDelay() ) {  
225.             setDelayCookie();  
226.         } else {  
227.             rpClick();  
228.         }  
229.     }  
230.   
231.     //解析外部配置  
232.     if(_clickc) {  
233.         for(var i in _clickc) {  
234.             options[i] = _clickc[i];  
235.         }     
236.     }  
237.       
238.     //解析外部参数  
239.     if(_clickq) {  
240.         for(var i in _clickq) {  
241.             _params[_clickq[i][0]] = _clickq[i][1];  
242.         }  
243.     }  
244.   
245.     // 提供外部js函数  
246.     $.rpComm = function(obj) {  
247.         rpComm(obj);  
248.     }  
249.     $.fn.rpComm = function() {  
250.         rpComm($(this));  
251.     }  
252.   
253.     // cookie中的上报  
254.     rpCookie();  
255.   
256.     // 初始化信息  
257.     var _time = new Date().valueOf();  
258.     var selector = getSelector(options.selector);  
259.     $('body').delegate(selector,'click',function() {  
260.         // 连续点击限制  
261.         if(new Date().valueOf() - _time < 300) {  
262.             return;  
263.         }  
264.         _time = new Date().valueOf();  
265.         rpComm($(this));  
266.     });  
267. })();