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

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

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.参考网址: