前端的埋点

1. 手动埋点

手动埋点的技术本质是什么呢？
我们看看从javascript中能轻松获得哪些信息：

域名：document.domainURLdocument.URL
页面标题：document.title
分辨率：window.screen.height & window.screen.width
颜色深度：window.screen.colorDepth
Referrer：document.referrer
客户端语言：navigator.language

除了上面列举的常规信息以外，还有大量业务数据，都需要通过手动写JavaScript去实现。
代码手动埋点常用的方式有以下几种：

• 命令式

$(document).ready(()=>{
// ... 这里是你的业务逻辑代码
sendData(params);  //这里是发送你的埋点数据，params是你封装的埋点数据
});
// 按钮点击时发送埋点请求
$('button').click(()=>{
// ... 业务逻辑
sendData(params); //同上
});

• 声明式

<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">打车</button>

• css埋点

.link:active::after{
    content: url("http://www.example.com?action=yourdata");
}
<a class="link">点击我，会发埋点数据</a>

• 可视化埋点
• 无埋点