JS實(shí)現(xiàn)點(diǎn)擊事件統(tǒng)計(jì)的簡(jiǎn)單實(shí)例
JS實(shí)現(xiàn)網(wǎng)站點(diǎn)擊事件的統(tǒng)計(jì)功能。
點(diǎn)擊事件上報(bào),分為立即上報(bào)和延時(shí)上報(bào),延時(shí)上報(bào)通過(guò)cookie存儲(chǔ)。
一、配置參數(shù),主要用于定義上報(bào)的一些配置信息。通過(guò)在外部定義_clickc對(duì)象重置參數(shù)。
參數(shù)名稱 類型 默認(rèn)值 說(shuō)明
selector: string '_click_rp' 點(diǎn)擊觸發(fā)的選擇器,支持ID、class
prefix: string '_rp_' 需要上報(bào)的參數(shù)屬性名前綴,如_rp_type,表示要上報(bào)type參數(shù)的值
cookie: string '_click_rp' 延遲上報(bào)時(shí)的cookie名稱
domain: string '.skye.com' cookie存儲(chǔ)的域名(可以通過(guò)使用的網(wǎng)站來(lái)獲得)
delay: boolean false 是否延遲上報(bào),延遲上報(bào)通過(guò)cookie實(shí)現(xiàn)
delay_attr: string _delay 標(biāo)簽中指定是否延遲上報(bào),優(yōu)先級(jí)最高,ture延時(shí),其他不延時(shí)。
二、外部參數(shù),主要用于定義上報(bào)的參數(shù)。通過(guò)在外部定義_clickq數(shù)組增加參數(shù)。
三、標(biāo)簽參數(shù),使用前綴_rp_定義,上報(bào)的時(shí)候會(huì)將所有_rp_開(kāi)頭的參數(shù)上報(bào)。參數(shù)的格式分為兩種,1種純字符,1中回調(diào)函數(shù)。
<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>,表示上報(bào)時(shí)的參數(shù)為a=aa&b=bb
1,純字符,直接定義字符,表示需要上傳參數(shù)的值。
2,回調(diào)函數(shù),以javascript:開(kāi)頭。只需定義函數(shù)體,在函數(shù)體中返回參數(shù)的值。
如,<a href="/qa_question/press.html" id="ques_search_btn" class="_click_rp" _rp_act="javascript:if($('#ques_search_btn').text()=='提問(wèn)'){return 'act_qa_ques';}else{return 'act_search';}"><span>提問(wèn)</span></a>
四、延時(shí)上報(bào),分為三種優(yōu)先級(jí),如下由高到低
1,標(biāo)簽屬性_delay是否指定為true,如果是表示延遲上報(bào)。
2,是否為特定標(biāo)簽,如a標(biāo)簽本窗口打開(kāi)(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 () {
// 默認(rèn)參數(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)前點(diǎn)擊對(duì)象
// 獲得對(duì)象
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;
}
});
}
}
// 獲得默認(rèn)參數(shù)
var getDefaultParam = function() {
if(document) {
params.url = document.URL || '';
params.referrer = document.referrer || '';
}
// 時(shí)間
var date = new Date();
params.ltime = date.getTime() / 1000;
// 時(shí)間戳
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 = {};
}
// 是否立即上報(bào),如果跳轉(zhuǎn)頁(yè)面,則計(jì)入延時(shí)上報(bào)
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,下次上報(bào)
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();
}
// 上報(bào)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);
}
}
// 上報(bào)
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上報(bào)函數(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中的上報(bào)
rpCookie();
// 初始化信息
var _time = new Date().valueOf();
var selector = getSelector(options.selector);
$('body').delegate(selector,'click',function() {
// 連續(xù)點(diǎn)擊限制
if(new Date().valueOf() - _time < 300) {
return;
}
_time = new Date().valueOf();
rpComm($(this));
});
})();
以上這篇JS實(shí)現(xiàn)點(diǎn)擊事件統(tǒng)計(jì)的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js點(diǎn)擊更換背景顏色或圖片的實(shí)例代碼
- jsp中點(diǎn)擊圖片彈出文件上傳界面及預(yù)覽功能的實(shí)現(xiàn)
- JS實(shí)現(xiàn)點(diǎn)擊圖片在當(dāng)前頁(yè)面放大并可關(guān)閉的漂亮效果
- js實(shí)現(xiàn)點(diǎn)擊圖片改變頁(yè)面背景圖的方法
- 利用JS實(shí)現(xiàn)點(diǎn)擊按鈕后圖片自動(dòng)切換的簡(jiǎn)單方法
- JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
- JS點(diǎn)擊縮略圖整屏居中放大圖片效果
- JS實(shí)現(xiàn)在線統(tǒng)計(jì)一個(gè)頁(yè)面內(nèi)鼠標(biāo)點(diǎn)擊次數(shù)的方法
- javascript 利用Image對(duì)象實(shí)現(xiàn)的埋點(diǎn)(某處的點(diǎn)擊數(shù))統(tǒng)計(jì)
- JS統(tǒng)計(jì)Flash被網(wǎng)友點(diǎn)擊過(guò)的代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能示例
相關(guān)文章
javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
功能強(qiáng)大的Bootstrap使用手冊(cè)(一)
這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的Bootstrap使用手冊(cè),分享了Bootstrap使用步驟和常用用法,感興趣的小伙伴們可以參考一下2016-08-08
Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JS實(shí)現(xiàn)移動(dòng)端點(diǎn)擊按鈕復(fù)制文本內(nèi)容
本文通過(guò)實(shí)例代碼給大家介紹了移動(dòng)端點(diǎn)擊按鈕復(fù)制文本內(nèi)容 ,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
普通js文件里面如何訪問(wèn)vue實(shí)例this指針
這篇文章主要介紹了普通js文件里面如何訪問(wèn)vue實(shí)例this指針,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
JavaScript在圖片繪制文字兩種方法的實(shí)現(xiàn)與對(duì)比
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)在圖片上繪制文字的兩種思路,支持即粘即貼即用,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2024-03-03
js 有框架頁(yè)面跳轉(zhuǎn)(target)三種情況下的應(yīng)用
本文主要介紹下有框架頁(yè)面的跳轉(zhuǎn):跳出框架,在父頁(yè)面;從一個(gè)框架跳轉(zhuǎn)到 name=main的框架里;ContentList 當(dāng)前頁(yè)的iframe名字,感興趣的朋友可以了解下哈2013-04-04
jQuery $.data()方法使用注意細(xì)節(jié)
前段時(shí)間同事在群里對(duì)jQuery里的.data()方法大發(fā)牢騷,接下來(lái)介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下2012-12-12

