js埋點
1.埋點作用:
頁面埋點的作用:其實就是用於流量分析。而流量的意思,包含了很多：頁面瀏覽數(PV)、獨立訪問者數量(UV)、IP、頁面停留時間、頁面操作時間、頁面訪問次數、按鈕點擊次數、文件下載次數等。而流量分析又有什么用處?
1) 網站統計
網站統計是指通過專業的網站統計分析系統(或軟件)，對網站訪問信息的記錄並歸類，以及在此基礎山的統計分析,如網站訪問量的增長趨勢圖、用戶訪問最高時間、訪問最多的網頁(模塊)、停留時間、用戶使用的搜索引擎等,主要關鍵詞、來路、入口、瀏覽深度、使用語言、所用瀏覽器種類、時段訪問量統計分析、日段訪問量統計分析以及周月訪問量統計分析等網站訪問數據的基礎分析。
2) 提高網站的轉化率
根據頁面埋點可得到一些重要信息，它告訴你用戶對網站的反應，以及如何提高網站流量、改進網站性能，了解用戶訪問網站的行為，為更好地滿足用戶需求提供支持。
3) 反應用戶黏度
即使網站吸引了很多用戶訪問，但是通過流量分析發現，用戶停留的時間非常短，重復訪問用戶不多，用戶平均瀏覽的頁面也少，這樣的網站用戶黏度不夠，有流量但是沒有忠實的用戶，一旦有其它可替代網站，用戶隨時可能流失。這樣的網站，如果不采取有效的運營措施，很難有長期發。
4) 為網站內容管理和網站的產品策划提供方向
通過流量分析，可以挖掘出整個網站哪個頻道最有人氣，頻道之間的流量比例是多少，每個頁面的流量是多少，哪個頁面最受歡迎，每個頁面中具體的哪個欄目點擊 量最高，這樣通過對頻道、欄目、頁面的具體流量分析和對比，可以挖掘出用戶的需求，發現用戶最關心什么內容，這對評估網站頻道、內容、頁面的價值有重要的 參考作用，也對網站內容下一步的優化有直接的參考意義。
比較常用的統計分析工具：谷歌分析、百度統計分析、騰訊統計分析等
2.埋點流程預覽
首先通過一幅圖總體看一下數據收集的基本流程。
首先，用戶的行為會觸發瀏覽器對被統計頁面的一個http請求，這里姑且先認為行為就是打開網頁。當網頁被打開，頁面中的埋點javascript片段會被執行，用過相關工具的朋友應該知道，一般網站統計工具都會要求用戶在網頁中加入一小段javascript代碼，這個代碼片段一般會動態創建一個script標簽，並將src指向一個單獨的js文件，此時這個單獨的js文件（圖1中綠色節點）會被瀏覽器請求到並執行，這個js往往就是真正的數據收集腳本。數據收集完成后，js會請求一個后端的數據收集腳本（圖1中的backend），這個腳本一般是一個偽裝成圖片的動態腳本程序，可能由php、python或其它服務端語言編寫，js會將收集到的數據通過http參數的方式傳遞給后端腳本，后端腳本解析參數並按固定格式記錄到訪問日志，同時可能會在http響應中給客戶端種植一些用於追蹤的cookie。
3.實際項目中的例子:
1) 頁面:
1 <script type="text/javascript"> 2 var bi_params = { 3 mobile : GetQueryString('phone'), 4 code : GetQueryString('phone'), 5 activityid : 'xiyijie', 6 pagetype : 'bindsuccess' 7 }; 8 (function() { 9 var bi_hm = document.createElement("script"); 10 bi_hm.src = "http://pic2.58.com/m58/app58/m_static/js/bi/tracker.js "; 11 var s = document.getElementsByTagName("script")[0]; 12 s.parentNode.insertBefore(bi_hm, s); 13 })(); 14 </script>
2) tracker.js
/*
* 設置cookie
*/
function setBICookie(name,value,days,domain){
try{
var exp = new Date();
exp.setTime(exp.getTime() + days*24*60*60*1000);
document.cookie = name + "=" + value + ";" + "expires=" + exp.toGMTString()+";path=/;" + (domain ? ("domain=" + domain + ";") : "");
}catch(e){}
}
/*
* 1.根據鍵取得對應的cookie
*/
function getBICookie(name) {
try{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}catch(e){}
}
/*
* 1.根據鍵刪除對應的cookie
*/
function delCookie(name,domain){
try{
var date = new Date();
date.setDate(date.getDate() - 100000);
document.cookie = name + "=a; expires=" + date.toGMTString() + ";path=/" +";" + (domain ? ("domain=" + domain + ";") : "");
}catch(e){}
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
function trackClick(data){
try{
if("undefined" != typeof data){
writelog(data,"clickview");
}else{
writelog(null,"clickview");
}
}catch(e){}
}
function trackPageview(data){
try{
if("undefined" != typeof data){
writelog(data,"pageview");
}else{
writelog(null,"pageview");
}
}catch(e){}
}
function sendTrackerLog(a){(new Image).src=a}
function writelog(data,logtype){
var cookie_days = 730;//Cookie Save Days
var url = document.URL;
var cookie_domain = "." + url.replace(/http:\/\/.*?([^\.]+\.(com\.cn|org\.cn|net\.cn|[^\.\/]+))\/.+/, "$1");
var log_url = "http://xx.xxx.com/a.gif?r="+Math.random()+"&logv=1.0&type=" + logtype;
var bi_hmsr = "none";
if(getQueryString("hmsr")!=null&&getQueryString("hmsr")!=""){
bi_hmsr = getQueryString("hmsr");
setBICookie("bi_hmsr",bi_hmsr,cookie_days,cookie_domain);
}else{
if(getBICookie("bi_hmsr")!=null&&getBICookie("bi_hmsr")!=""){
bi_hmsr = getBICookie("bi_hmsr");
}else{
setBICookie("bi_hmsr",bi_hmsr,cookie_days,cookie_domain);
}
}
var bi_hmmd ="none";
if(getQueryString("hmmd")!=null&&getQueryString("hmmd")!=""){
bi_hmmd = getQueryString("hmmd");
setBICookie("bi_hmmd",bi_hmmd,cookie_days,cookie_domain);
}else{
if(getBICookie("bi_hmmd")!=null&&getBICookie("bi_hmmd")!=""){
bi_hmmd = getBICookie("bi_hmmd");
}else{
setBICookie("bi_hmmd",bi_hmmd,cookie_days,cookie_domain);
}
}
var bi_hmpl ="none";
if(getQueryString("hmpl")!=null&&getQueryString("hmpl")!=""){
bi_hmpl = getQueryString("hmpl");
setBICookie("bi_hmpl",bi_hmpl,cookie_days,cookie_domain);
}else{
if(getBICookie("bi_hmpl")!=null&&getBICookie("bi_hmpl")!=""){
bi_hmpl = getBICookie("bi_hmpl");
}else{
setBICookie("bi_hmpl",bi_hmpl,cookie_days,cookie_domain);
}
}
var bi_hmkw ="none";
if(getQueryString("hmkw")!=null&&getQueryString("hmkw")!=""){
bi_hmkw = getQueryString("hmkw");
setBICookie("bi_hmkw",bi_hmkw,cookie_days,cookie_domain);
}else{
if(getBICookie("bi_hmkw")!=null&&getBICookie("bi_hmkw")!=""){
bi_hmkw = getBICookie("bi_hmkw");
}else{
setBICookie("bi_hmkw",bi_hmkw,cookie_days,cookie_domain);
}
}
var bi_cookieid = getBICookie("bi_cookieid");
if(bi_cookieid==null||bi_cookieid==""){
bi_cookieid=(new Date).valueOf()+""+parseInt(Math.random()*10000000000);
setBICookie("bi_cookieid",bi_cookieid,cookie_days,cookie_domain);
}
var referrer=encodeURIComponent(document.referrer);
if(referrer==null||referrer==""){
referrer="none";
}
log_url+="&hmsr="+bi_hmsr+"&referrer="+referrer+"&cookieid="+bi_cookieid +"&hmpl="+bi_hmpl +"&hmmd="+bi_hmmd+"&hmkw="+bi_hmkw;
if(data!=null&&logtype=="pageview"){
for(var key in data){
var value=data[key];
log_url += "&"+key+"=" + value;
}
}else if(data!=null&&logtype=="clickview"){
log_url += "&" + data;
}
sendTrackerLog(log_url);
}
try{
if("undefined" != typeof bi_params){
writelog(bi_params,"pageview");
}else{
writelog(null,"pageview");
}
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
//調用百度統計代碼
hm.src = "//hm.baidu.com/hm.js?b63b6a99a304a1aa8ad31744d27c77e5";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
}catch(e){}
4.參考網址:
1).http://www.admin10000.com/document/1089.html
2).http://www.bubuko.com/infodetail-401972.html