4月14日晚弯汰，DTalk邀請(qǐng)到了譙洪敏老師膛腐，他是滴滴上海前端團(tuán)隊(duì)負(fù)責(zé)人涡戳，前陸金所移動(dòng)前端團(tuán)隊(duì)負(fù)責(zé)人凰兑，進(jìn)行了一次關(guān)于《前端數(shù)據(jù)采集與分析的那些事第二彈：前端篇》的微信群線上主題分享。
分享活動(dòng)分享了手動(dòng)埋點(diǎn)恬试、可視化埋點(diǎn)與無埋點(diǎn)的基本原理窝趣，重點(diǎn)講了前端手動(dòng)埋點(diǎn)的幾種常用方法，最后說了企業(yè)什么階段選擇自動(dòng)埋點(diǎn)和可視化埋點(diǎn)训柴。

一哑舒、說說“手工”、“可視化”幻馁、“無”埋點(diǎn)基本原理

● 手動(dòng)埋點(diǎn)（代碼埋點(diǎn)）：手動(dòng)寫代碼洗鸵，調(diào)用埋點(diǎn)SDK的函數(shù)，在需要埋點(diǎn)的業(yè)務(wù)邏輯功能位置調(diào)用接口上報(bào)埋點(diǎn)數(shù)據(jù)仗嗦，友盟膘滨、百度統(tǒng)計(jì)等第三方數(shù)據(jù)統(tǒng)計(jì)服務(wù)商大都采用這種方案；需要深入下鉆稀拐，并精細(xì)化自定義分析時(shí)火邓，比較適合。此類埋點(diǎn)需要產(chǎn)品和開發(fā)反復(fù)溝通德撬，埋點(diǎn)容易出現(xiàn)手動(dòng)差錯(cuò)铲咨，如果錯(cuò)誤，重新埋點(diǎn)的成本很高蜓洪。這會(huì)導(dǎo)致整個(gè)數(shù)據(jù)收集周期很長(zhǎng)纤勒，收集成本很高，而且效率很低隆檀。

● 可視化埋點(diǎn)（框架式埋點(diǎn)踊东、無痕埋點(diǎn)），解決了純手動(dòng)埋點(diǎn)的開發(fā)成本和更新成本刚操，通過可視化工具快速配置采集節(jié)點(diǎn)（圈點(diǎn)）闸翅，在前端自動(dòng)解析配置，并根據(jù)配置上傳埋點(diǎn)數(shù)據(jù)菊霜，比起手動(dòng)埋點(diǎn)看起來更“無痕”坚冀，這里的配置數(shù)據(jù)可以設(shè)置過濾條件，避免針對(duì)所有元素（比如全埋點(diǎn)）鉴逞，可以在調(diào)用開啟自動(dòng)監(jiān)控api時(shí)通過設(shè)置一些特征屬性记某，來過濾不符合條件的元素司训，實(shí)現(xiàn)只針對(duì)某些元素進(jìn)行自動(dòng)上報(bào)數(shù)據(jù)的需求； 比如Mixpanel液南；

● 無埋點(diǎn)（自動(dòng)埋點(diǎn)壳猜、全埋點(diǎn)）：它并不是沒有任何埋點(diǎn)，只是不需要工程師在業(yè)務(wù)代碼里面插入代碼. 只需要加載了一段定義好的SDK代碼滑凉。技術(shù)門檻更低统扳，使用與部署也簡(jiǎn)單，避免了需求變更畅姊，埋點(diǎn)錯(cuò)誤導(dǎo)致的重新埋點(diǎn)咒钟。通過這個(gè)SDK代碼，前端會(huì)自動(dòng)全量采集全部事件并上報(bào)埋點(diǎn)數(shù)據(jù)若未，能夠呈現(xiàn)用戶行為的每一次點(diǎn)擊朱嘴、每一次跳轉(zhuǎn)、每一次登錄等全量粗合、實(shí)時(shí)用戶行為數(shù)據(jù)萍嬉，這些數(shù)據(jù)傳到后端后，可通過用戶分群隙疚、漏斗對(duì)比等功能壤追，分析不同訪問來源、不同城市甚淡、不同廣告來源等多維度的不同轉(zhuǎn)化細(xì)節(jié)大诸，細(xì)而全捅厂。問題是自定義屬性不靈活贯卦，傳輸時(shí)效性差，數(shù)據(jù)可靠性欠佳焙贷，耗費(fèi)網(wǎng)絡(luò)流量撵割，并增加服務(wù)器負(fù)載，而且兼容性也不佳辙芍。比如Heap analytics啡彬、GrowingIO、神策故硅。

https://www.threejs.online/ 這個(gè)站點(diǎn)庶灿，我就裝了很多SDK。

可視化和無埋點(diǎn)吃衅，因?yàn)槲覜]有開發(fā)過往踢，只有使用過，不敢班門弄斧徘层。我們作為一個(gè)手動(dòng)埋點(diǎn)的深度用戶團(tuán)隊(duì)峻呕，可以談?wù)勛约旱耐袋c(diǎn)：

1利职、埋點(diǎn)混亂

2、常常埋錯(cuò)瘦癌，漏埋

3猪贪、業(yè)務(wù)變化后，老埋點(diǎn)數(shù)據(jù)失去意義

4讯私、埋點(diǎn)數(shù)據(jù)無人使用热押，浪費(fèi)資源

5、數(shù)據(jù)團(tuán)隊(duì)妄帘、研發(fā)團(tuán)隊(duì)楞黄、產(chǎn)品團(tuán)隊(duì)協(xié)作配合難度大

6、很多時(shí)候不太重視數(shù)據(jù)抡驼，而是重視業(yè)務(wù)的快速上線

二鬼廓、自動(dòng)埋點(diǎn)與手工埋點(diǎn)的區(qū)別？

根據(jù)工作中對(duì)埋點(diǎn)的對(duì)比和整理致盟，我們匯集一下相關(guān)的對(duì)比：

1碎税、對(duì)于語義明確的UI事件，自動(dòng)埋點(diǎn)的數(shù)據(jù)一般會(huì)比手動(dòng)埋點(diǎn)更加準(zhǔn)確馏锡，更貼近用戶行為雷蹂，也更節(jié)省開發(fā)成本，侵入性更低杯道。

主要是因?yàn)樽詣?dòng)埋點(diǎn)語義簡(jiǎn)單明確匪煌，不像手動(dòng)埋點(diǎn)由于開發(fā)習(xí)慣、代碼風(fēng)格党巾、人的理解誤差萎庭、分支處理等各種不確定因素變得沒那么清晰明了。

比如：“下單”事件齿拂，自動(dòng)埋點(diǎn)的PV肯定是>=手動(dòng)埋點(diǎn)的驳规，UV差別可能不大。分析開發(fā)代碼發(fā)現(xiàn)在onClick Listener中包含其他未覆蓋到的分支署海，差別很可能就在代碼分支當(dāng)中吗购。如果更進(jìn)一步分析下代碼可以發(fā)現(xiàn)，為什么開發(fā)不在分支當(dāng)中埋點(diǎn)砸狞？可能這個(gè)分支會(huì)認(rèn)為用戶的這一次點(diǎn)擊是“無效”的捻勉，但這只是程序邏輯的看法，用戶可能不這么認(rèn)為刀森，用戶很可能會(huì)覺得很奇怪沒反應(yīng)踱启，然后再點(diǎn)一次。這些手動(dòng)埋點(diǎn)不易察覺的細(xì)節(jié)，自動(dòng)埋點(diǎn)都能記錄禽捆，所以說笙什，自動(dòng)埋點(diǎn)在這些情況下會(huì)更貼近真正的用戶行為。

2胚想、自動(dòng)埋點(diǎn)可降低原來手動(dòng)埋點(diǎn)的個(gè)數(shù)和復(fù)雜性琐凭，使之更簡(jiǎn)化

比如：進(jìn)入“商品詳情頁面”（展現(xiàn)），目前包括5個(gè)手動(dòng)埋點(diǎn)浊服，實(shí)際上用自動(dòng)埋點(diǎn)只需要一個(gè)就夠了统屈，而且自動(dòng)埋點(diǎn)不會(huì)遺漏。從數(shù)據(jù)來看牙躺，一個(gè)自動(dòng)埋點(diǎn)的PV已經(jīng)超過5個(gè)手動(dòng)埋點(diǎn)之和愁憔。

3、自動(dòng)埋點(diǎn)可采集界面環(huán)境數(shù)據(jù)孽拷，但是數(shù)據(jù)不夠純吨掌，需要進(jìn)一步去噪

自動(dòng)埋點(diǎn)能采集到大部分用戶“看到的而且有用數(shù)據(jù)”。比如：“價(jià)格”這一屬性脓恕，手動(dòng)埋點(diǎn)可直接定義“amout: 5.2“來輕松獲取數(shù)據(jù)膜宋，而自動(dòng)埋點(diǎn)獲取的是一串文本： “價(jià)格預(yù)估5.2元”，若要獲取精確的5.2這個(gè)數(shù)值炼幔，就需要進(jìn)一步解析秋茫。

4、自動(dòng)埋點(diǎn)無法替代手動(dòng)埋點(diǎn)乃秀，但可大大減少手動(dòng)埋點(diǎn)工作量

可預(yù)想的是肛著，在用戶行為分析上，自動(dòng)埋點(diǎn)可以滿足很大一部分需求

函數(shù)級(jí)的埋點(diǎn)無法用自動(dòng)埋點(diǎn)代替跺讯，后臺(tái)非UI的事件也無法用自動(dòng)埋點(diǎn)代替枢贿，自動(dòng)埋點(diǎn)無法攜帶當(dāng)時(shí)的業(yè)務(wù)場(chǎng)景數(shù)據(jù)，這些都表明了自動(dòng)埋點(diǎn)無法完全替代手動(dòng)埋點(diǎn)抬吟。

但單就用戶行為分析來講萨咕，自動(dòng)埋點(diǎn)是可以覆蓋用戶的一些基本行為路徑的统抬，并能做一些較淺層次的分析火本。如果需要探究用戶行為背后的原因、或需要進(jìn)一步深入分析行為的時(shí)候聪建，就是需要更多的后臺(tái)邏輯事件钙畔、需要攜帶更多屬性值的時(shí)候，就需要通過手動(dòng)埋點(diǎn)來完成金麸。所以擎析，但是深層次的分析是你的重點(diǎn)，就需要使用手動(dòng)埋點(diǎn)來解決。

三揍魂、前端手動(dòng)埋點(diǎn)的常用方法

埋點(diǎn)技術(shù)除了剛才的方式劃分桨醋，還可以劃分為前端埋點(diǎn)和后端埋點(diǎn)，后端埋點(diǎn)數(shù)據(jù)更可靠现斋、更集中（無需多端）喜最、更實(shí)時(shí)药磺，前端可以離線運(yùn)行骗污，因?yàn)槲覀兪荈E團(tuán)隊(duì)熙暴，今天也主要是和大家聊聊前端埋點(diǎn)乔夯。

前端埋點(diǎn)中的代碼手動(dòng)埋點(diǎn)一般有以下幾種：

1矫俺、命令式：

$(document).ready(()=>{ // ... 業(yè)務(wù)邏輯 sendData(params); }); // 按鈕點(diǎn)擊時(shí)發(fā)送埋點(diǎn)請(qǐng)求 $('button').click(()=>{ // ... 業(yè)務(wù)邏輯 sendData(params); });

senddata就是發(fā)埋點(diǎn)數(shù)據(jù)戏羽。

2桩卵、聲明式：

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

3闷盔、前端框架式：

如果我們使用Vue或者React等前端框架倦西，是可以在各個(gè)生命周期位置進(jìn)行你所需的埋點(diǎn)能真。這里不展開。

4扰柠、css埋點(diǎn)：

.link:active::after{ content: url("http://www.example.com?action=yourdata"); }

<a class="link">點(diǎn)擊我舟陆，會(huì)發(fā)埋點(diǎn)數(shù)據(jù)</a>

上面的截圖是Google Analytics的上報(bào)內(nèi)容。

上圖是talkingdata的接入代碼耻矮。

上圖是TD的上報(bào)內(nèi)容秦躯。

上圖是GA的接入。

上圖是GA的上報(bào)裆装。

local storage和cookie一樣踱承，有生命周期，可以把一些任務(wù)隊(duì)列放里面哨免，也可以把一些用戶識(shí)別的ID放里面茎活。和Cookie的功效有一些相同

四、企業(yè)什么階段選擇自動(dòng)埋點(diǎn)和可視化埋點(diǎn)琢唾？

某些企業(yè)载荔，保守估計(jì)，手動(dòng)埋點(diǎn)的錯(cuò)誤率可能會(huì)高達(dá)50%采桃，比如一些簡(jiǎn)單頁面的進(jìn)入應(yīng)該埋在 viewDidAppear（didMount...）懒熙，按鈕點(diǎn)擊應(yīng)該埋在 onClickListener等等都經(jīng)常被開發(fā)弄錯(cuò)。埋點(diǎn)工作本身并不難普办，是純粹的體力活工扎，但是要展開一個(gè)好的埋點(diǎn)工作，需要BI先梳理衔蹲，然后再傳達(dá)給RD肢娘，然后RD再去開發(fā)實(shí)現(xiàn)，最后應(yīng)該經(jīng)過測(cè)試驗(yàn)收，因?yàn)闆]有統(tǒng)一的標(biāo)準(zhǔn)橱健，每個(gè)人的理解不一樣而钞，就很容易弄錯(cuò)，后面會(huì)和大家在詳細(xì)聊聊埋點(diǎn)規(guī)范的問題拘荡。

我們了解的一些大公司笨忌，像Facebook等硅谷公司已經(jīng)將埋點(diǎn)看得與產(chǎn)品設(shè)計(jì)同等重要，新功能還在設(shè)計(jì)階段就先把衡量指標(biāo)及埋點(diǎn)梳理好俱病，而具體負(fù)責(zé)埋點(diǎn)的RD也是團(tuán)隊(duì)中最資深的RD（如果不是專職的話）官疲，RD需要每天不斷的與BI溝通確保語義一致。

而我待過的滴滴亮隙、陸金所等公司的現(xiàn)狀是途凫，埋點(diǎn)的RD很多時(shí)候都是隨機(jī)的，甚至經(jīng)常被安排給實(shí)習(xí)生溢吻，埋點(diǎn)質(zhì)量難以保證维费。還有一種情況是產(chǎn)品為了快速上線需求，一味追求上線速度促王，在需求評(píng)審階段沒有梳理和提出埋點(diǎn)需求犀盟，上線后臨時(shí)插入埋點(diǎn)需求，在未經(jīng)過分析理解和測(cè)試驗(yàn)收的情況下匆匆加入埋點(diǎn)代碼蝇狼，而且測(cè)試經(jīng)常也不重視測(cè)試（提出免測(cè)）阅畴，導(dǎo)致埋點(diǎn)錯(cuò)誤，甚至是業(yè)務(wù)代碼錯(cuò)誤等線上問題（后續(xù)的埋點(diǎn)規(guī)范會(huì)更進(jìn)步一步針對(duì)這個(gè)問題做分析迅耘，并提出方案）贱枣。這種情況下自動(dòng)埋點(diǎn)既能減少溝通開發(fā)的工作量，又能降低埋點(diǎn)出錯(cuò)的概率颤专。所以纽哥，自動(dòng)埋點(diǎn)很適合公司在埋點(diǎn)規(guī)范沒有完全建立，埋點(diǎn)質(zhì)量普遍不高的階段栖秕。

根據(jù)以上的總結(jié)春塌，可以看出，手動(dòng)埋點(diǎn)技術(shù)需要在企業(yè)的網(wǎng)頁或者客戶端內(nèi)寫入相應(yīng)的代碼簇捍，雖然操作過程會(huì)復(fù)雜一些只壳，但可以更精準(zhǔn)的采集后端模塊的數(shù)據(jù)。例如當(dāng)用戶提交了一個(gè)訂單垦写，有埋點(diǎn)技術(shù)不僅可以采集到“訂單提交”這一行為事件吕世，還可以獲取到該訂單的具體商品類別信息彰触。有埋點(diǎn)的技術(shù)的缺點(diǎn)在于梯投，因?yàn)槟壳按蠖嗥髽I(yè)在采集數(shù)據(jù)這一塊沒有一定的規(guī)劃，大多都是提出一個(gè)需求之后，再寫入一定的代碼分蓖，這樣就會(huì)容易造成整個(gè)埋點(diǎn)鋪設(shè)混亂尔艇，極易出現(xiàn)一些故障。目前市場(chǎng)上么鹤，數(shù)據(jù)采集技術(shù)一般可分為以神策數(shù)據(jù)為代表的有埋點(diǎn)技術(shù)终娃，和以GrowingIO為代表的無埋點(diǎn)技術(shù)。

本文作者：

譙洪敏老師蒸甜，DTalk核心專家組成員棠耕，滴滴上海海浪前端團(tuán)隊(duì)負(fù)責(zé)人，前陸金所移動(dòng)前端團(tuán)隊(duì)負(fù)責(zé)人柠新，主要專注與前端工程化窍荧、前端Web安全及前端性能優(yōu)化，有豐富的前端埋點(diǎn)技術(shù)工程恨憎、數(shù)據(jù)處理和數(shù)據(jù)質(zhì)量的經(jīng)驗(yàn)蕊退。

干貨專訪和文章
【DTalk分享】黃一能：互聯(lián)網(wǎng)產(chǎn)品運(yùn)營(yíng)決策中用戶畫像的核心作用直播回顧
【DTalk分享】陳抒：產(chǎn)品設(shè)計(jì)中的用戶畫像直播回顧
【DTalk分享】吆喝科技王曄：A/B測(cè)試最佳實(shí)踐直播回顧
【DTalk精華】網(wǎng)易鄭棟：前端數(shù)據(jù)采集與分析的那些事第一彈: 從數(shù)據(jù)埋點(diǎn)到AB測(cè)試
【DTalk精華】滴滴出行譙洪敏：前端數(shù)據(jù)采集與分析的那些事第二彈：企業(yè)如何選擇自動(dòng)埋點(diǎn)和可視化埋點(diǎn)
【DTalk精華】滴滴出行譙洪敏：前端數(shù)據(jù)采集與分析的那些事第三彈：埋點(diǎn)需求整理原則于埋點(diǎn)流程規(guī)范
【DTalk專訪】滴滴譙洪敏：百家爭(zhēng)鳴的前端技術(shù)時(shí)代
【DTalk思考】顧青：互聯(lián)網(wǎng)團(tuán)隊(duì)的數(shù)據(jù)驅(qū)動(dòng)能力從哪里來？
【DTalk專訪】彭圣才：AI超越人類大腦憔恳，是一場(chǎng)「別有用心者」的騙局嗎瓤荔？
【DTalk專訪】翁嘉頎：AI行業(yè)現(xiàn)階段最需要什么樣的人才？
【DTalk專訪】趙華：攜程怎么把機(jī)器學(xué)習(xí)與實(shí)際業(yè)務(wù)相結(jié)合钥组？
【DTalk專訪】網(wǎng)易鄭棟：BI输硝、可視化數(shù)據(jù)產(chǎn)品和大數(shù)據(jù)的幾個(gè)核心問題
【DTalk回顧】美團(tuán)點(diǎn)評(píng)沈國(guó)陽：我們?cè)谡動(dòng)脩舢嬒竦臅r(shí)候到底在談什么？
【DTalk專訪】王曄：谷歌數(shù)據(jù)如何用于決策程梦？