JS實現(xiàn)點擊事件統(tǒng)計的簡單實例
JS實現(xiàn)網(wǎng)站點擊事件的統(tǒng)計功能。
點擊事件上報,分為立即上報和延時上報,延時上報通過cookie存儲。
一、配置參數(shù),主要用于定義上報的一些配置信息。通過在外部定義_clickc對象重置參數(shù)。
參數(shù)名稱 類型 默認(rèn)值 說明
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 () { // 默認(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)前點擊對象 // 獲得對象 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 || ''; } // 時間 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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- js點擊更換背景顏色或圖片的實例代碼
- jsp中點擊圖片彈出文件上傳界面及預(yù)覽功能的實現(xiàn)
- JS實現(xiàn)點擊圖片在當(dāng)前頁面放大并可關(guān)閉的漂亮效果
- js實現(xiàn)點擊圖片改變頁面背景圖的方法
- 利用JS實現(xiàn)點擊按鈕后圖片自動切換的簡單方法
- JS實現(xiàn)圖片點擊后出現(xiàn)模態(tài)框效果
- JS點擊縮略圖整屏居中放大圖片效果
- JS實現(xiàn)在線統(tǒng)計一個頁面內(nèi)鼠標(biāo)點擊次數(shù)的方法
- javascript 利用Image對象實現(xiàn)的埋點(某處的點擊數(shù))統(tǒng)計
- JS統(tǒng)計Flash被網(wǎng)友點擊過的代碼
- JavaScript實現(xiàn)點擊出現(xiàn)圖片并統(tǒng)計點擊次數(shù)功能示例
相關(guān)文章
Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JS實現(xiàn)移動端點擊按鈕復(fù)制文本內(nèi)容
本文通過實例代碼給大家介紹了移動端點擊按鈕復(fù)制文本內(nèi)容 ,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07JavaScript在圖片繪制文字兩種方法的實現(xiàn)與對比
這篇文章主要為大家詳細(xì)介紹了前端實現(xiàn)在圖片上繪制文字的兩種思路,支持即粘即貼即用,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2024-03-03js 有框架頁面跳轉(zhuǎn)(target)三種情況下的應(yīng)用
本文主要介紹下有框架頁面的跳轉(zhuǎn):跳出框架,在父頁面;從一個框架跳轉(zhuǎn)到 name=main的框架里;ContentList 當(dāng)前頁的iframe名字,感興趣的朋友可以了解下哈2013-04-04jQuery $.data()方法使用注意細(xì)節(jié)
前段時間同事在群里對jQuery里的.data()方法大發(fā)牢騷,接下來介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下2012-12-12