用户行为分析
随着互联网发展，企业对于网站的PV、UV、用户的转化、新增和留存也越来越关注。而完整的数据采集是一切的前提。
埋点即监控用户在应用表现层的行为，于产品迭代而言至关重要，运营，产品，数据分析基于此来对用户行为进行分析统计，同时埋点也可作为一种前端监控的手段，检验功能是否达预期的佐证。
基于埋点数据进行用户行为分析，可以得到包含页面点击量、用户访问量、用户访问路径、用户转化率、导流转化率、用户访问时长和用户访问内容分析等重要数据。
可埋点数据
- ac- 页面标识
- cc- 渠道标识
- ce- 浏览器是否支持cookie (ce = window.navigator.cookieEnabled ? true : false)
- cp- 当前页面地址 (cp = window.location.href)
- cpp- 当前页面携带参数 (cpp = window.location.search)
- ec- 页面组件标识(即 elementCode)
- et - 事件类型
- etm- 触发时间
- fp- 来源页面地址 (fp = document.referrer)
- itm- 进入时间
- lb- 浏览器语言 (lb = navigator.language)
- mp- 鼠标轨迹坐标((screenX,screenY)
- nb- 浏览器名称
- nt- 网络状态(1-wifi，2-2G，3-4G，4-5G)
- otm- 离开时间
- pf- 浏览器操作系统平台
- ph- 手机号
- pi- 网络IP
- sn- 浏览器屏幕分辨率 (sn =
'${window.screen.width },${window.screen.height}') - tp- 目标页面(跳转页面)
- ua- 浏览器userAgent (ua = navigator.userAgent)
- vb- 浏览器平台版本
代码埋点
代码埋点也叫手动埋点属于侵入式埋点，由开发手动在代码内植入预埋点，完全由开发控制埋点的位置时间和触发机制。
- 基于事件点击埋点
- 页面访问埋点-统计页面曝光时长
- css埋点
<style>
.tracker:active::after{
content: url("http://www.yzw.com/api/tracker/report?action=yourdata");
}
</style>
<a class="tracker">发埋点数据</a>
埋点数据上报的形式:
- xhr上报
适用于需要接受数据上报后的返回结果进行回调处理 - img/script上报
使用img标签上报埋点数据，可以较隐蔽的上报埋点数据，而不是直接将ajax请求的接口直接暴露给控制台。
// 1.img标签
var img = document.createElement("img");
img.src = '/api/report?' + params;
// 2.script标签
var script = document.createElement("script");
script.src = src;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
如下示例，使用img标签实现埋点数据上报，url拼接的参数需要使用encodeURIComponent方法转译一下(防止特殊字符影响请求参数丢失)：
submitLog (query) {
let logQuery = Object.assign(this.trackLogObj, query)
let url = '/api/report?'
let paramsArr = []
Object.keys(logQuery).forEach(key => {
let str = key + '=' + encodeURIComponent(logQuery[key])
paramsArr.push(str)
})
url += paramsArr.join('&')
let img = document.createElement('img');
img.src = url
},
<button @click='submitLog'>上报埋点数据</a>
image.png
本地已经做了跨域代理，直接通过图片src的方式对后端接口发送了请求，从而实现了埋点日志的上报功能。
部分获取参数方法
- 获取IP地址
getIPs() {
let IP = ''
var ip_dups = {};
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
if (!RTCPeerConnection) {
var iframe = document.createElement("iframe");
iframe.sandbox = "allow-same-origin";
iframe.style.display = "none";
document.body.appendChild(iframe);
var win = iframe.contentWindow;
window.RTCPeerConnection = win.RTCPeerConnection;
window.mozRTCPeerConnection = win.mozRTCPeerConnection;
window.webkitRTCPeerConnection = win.webkitRTCPeerConnection;
RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
}
var mediaConstraints = {
optional: [{RtpDataChannels: true}] };
if(window.webkitRTCPeerConnection)
var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
var pc = new RTCPeerConnection(servers, mediaConstraints);
pc.onicecandidate = (ice) => {
if(ice.candidate){
var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/
var ip_addr = ip_regex.exec(ice.candidate.candidate)[1];
if(ip_dups[ip_addr] === undefined)
IP = ip_addr
ip_dups[ip_addr] = true;
}
}
return IP
},
- 获取操作系统
getOS() {
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
if (isMac) return "Mac";
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) return "Unix";
var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
if (isLinux) return "Linux";
if (isWin) {
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
if (isWin2K) return "Win2000";
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
if (isWinXP) return "WinXP";
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
if (isWin2003) return "Win2003";
var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
if (isWinVista) return "WinVista";
var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
if (isWin7) return "Win7";
var isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
if (isWin10) return "Win10";
}
return '';
},
- 获取网络类型
getNetworkType() {
var ua = navigator.userAgent;
var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
networkStr = networkStr.toLowerCase().replace('nettype/', '');
var networkType;
switch(networkStr) {
case 'wifi':
networkType = 1;
break;
case '4g':
networkType = 4;
break;
case '3g':
networkType = 3;
break;
case '3gnet':
networkType = 3;
break;
case '2g':
networkType = 2;
break;
default:
networkType = 0;
}
return networkType
},
- 获取浏览器
getBrowser() {
var UserAgent = navigator.userAgent.toLowerCase();
var browser = null;
var browserArray = {
IE: window.ActiveXObject || "ActiveXObject" in window, // IE
Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1, // Chrome浏览器
Firefox: UserAgent.indexOf('firefox') > -1, // 火狐浏览器
Opera: UserAgent.indexOf('opera') > -1, // Opera浏览器
Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1, // safari浏览器
Edge: UserAgent.indexOf('edge') > -1, // Edge浏览器
QQBrowser: /qqbrowser/.test(UserAgent), // qq浏览器
WeixinBrowser: /MicroMessenger/i.test(UserAgent) // 微信浏览器
};
for (var i in browserArray) {
if (browserArray[i]) {
browser = i;
}
}
return browser;
},
网友评论