獲取用戶的交互習(xí)慣及喜好，進一步提升轉(zhuǎn)化率，可以在之前的埋點方案實現(xiàn)中，都是在具體的按鈕或者圖片被點擊或者被曝光時主動通過事件去上報埋點。但這種方法適合在埋點比較少時還行的項目，遇見項目中需要大量埋點時，添加的代碼就太多了，就會埋點邏輯與業(yè)務(wù)邏輯的高耦合。

　　由此需要換種方式。我先給大家普及下埋點上報方式都有哪些？

　　手動埋點

　　可視化埋點

　　無痕埋點

　　手動埋點，顧名思義就是純手動寫代碼，調(diào)用埋點 SDK 提供的函數(shù)，在需要埋點的業(yè)務(wù)邏輯中添加對應(yīng)方法，上報埋點數(shù)據(jù)。這種也是之前一直在使用的方法。

　　可視化埋點是指通過可視化系統(tǒng)配置埋點，這種方式接觸的不是很多，就不展開說了。

　　無痕埋點，也叫自動埋點、全埋點。即對全局所有事件和頁面加載周期進行攔截埋點。

　　一般對哪些數(shù)據(jù)做埋點？

　　為了達到數(shù)據(jù)分析，便于后續(xù)的運營及產(chǎn)品策略調(diào)整的目的，一般需要對以下幾點做埋點統(tǒng)計：

　　頁面埋點：統(tǒng)計用戶進入或者離開頁面的信息，如頁面瀏覽次數(shù)（pv）、瀏覽頁面人數(shù)（uv）、頁面停留時長、設(shè)備信息等

　　點擊埋點：統(tǒng)計用戶在頁面瀏覽過程中觸發(fā)的點擊事件，如按鈕、導(dǎo)航或者圖片的點擊次數(shù)

　　曝光埋點：統(tǒng)計具體元素是否得到有效曝光

　　需求分析

　　添加埋點的理想化方案是：

　　1、埋點與業(yè)務(wù)盡量分離清楚，兩個業(yè)務(wù)獨立

　　2、減少不對業(yè)務(wù)代碼有侵入

　　3、簡約規(guī)范，收口要統(tǒng)一處理埋點邏輯

　　由于項目是Vue開發(fā)的，所以考慮使用自定義指令的方式來完成埋點上報。為什么會選擇自定義指令是為能讓業(yè)務(wù)和埋點解耦。

　　頁面埋點框架搭建好，現(xiàn)在主要是點擊埋點和曝光埋點。

　　實現(xiàn)思路：簡單來說就是在需要埋點的DOM節(jié)點掛載特殊屬性，通過埋點SDK監(jiān)聽掛載了相應(yīng)屬性對應(yīng)的事件，造成事件觸發(fā)時進行埋點數(shù)據(jù)上報。

　　那如何監(jiān)聽？

　　對于點擊事件，我們可以采用addEventListener來監(jiān)聽click事件。這很簡單。

　　對于元素的曝光就稍微有點麻煩了。

　　首先我們來看一下為什么需要監(jiān)測曝光：

　　還需增加衡量用戶對產(chǎn)品的興趣程度，需要統(tǒng)計計算區(qū)域的點擊率（點擊次數(shù)/曝光次數(shù)），要考慮到點擊率的準確性，保證用戶真正的瀏覽到了這些產(chǎn)品才可以。

　　那么怎么判斷元素出現(xiàn)在頁面的可視區(qū)域呢？

　　以往的思路：監(jiān)聽滾動事件就是通過getBoundingClientRect()方法計算監(jiān)測區(qū)域與視窗的位置，然后判斷出元素是否出現(xiàn)在頁面的可視區(qū)域內(nèi)。可由于scroll事件的頻繁觸發(fā)，實可能性很大。

　　基于此，瀏覽器特意為我們打造了一個Intersection ObserverAPI，把性能相關(guān)的細節(jié)都處理掉，讓開發(fā)者只關(guān)心業(yè)務(wù)邏輯即可：

　　由于用戶瀏覽頁面的不確定性，還必須要避免重復(fù)的曝光行為。這個在曝光之后，移除觀察即可。

　　代碼實現(xiàn)

　　上面的需求分析還是比較抽象，下面讓我們結(jié)合代碼來看一下最終的實現(xiàn)。

　　Click 類封裝

　　點擊事件的處理相對比較簡單，每次點擊觸發(fā)數(shù)據(jù)上報即可：

　　// src/directives/track/click.js
　　import { sendUBT } from "../../utils/ctrip"
　　export default class Click {
　　add(entry) {
　　// console.log("entry", entry);
　　const traceVal = entry.el.attributes["track-params"].value
　　const traceKey = entry.el.attributes["trace-key"].value
　　const { clickAction, detail } = JSON.parse(traceVal)
　　const data = {
　　action: clickAction,
　　detail,
　　}
　　entry.el.addEventListener("click", function() {
　　console.log("上報點擊埋點", JSON.parse(traceVal))
　　console.log("埋點key", traceKey)
　　sendUBT(traceKey, data)
　　})
　　}
　　}

　　Exposure 類封裝

　　曝光的相對復(fù)雜一些。

　　首先通過new IntersectionObserver()實例化一個全局_observer，如果得到有效曝光的（這里當(dāng)元素出現(xiàn)一半以上則進行曝光），就去獲取 DOM 節(jié)點上的trace-key（埋點 key）和track-params（埋點 value）。

　　// src/directives/track/exposure.js
　　import "intersection-observer"
　　import { sendUBT } from "../../utils/ctrip"
　　// 節(jié)流時間調(diào)整，默認100ms
　　IntersectionObserver.prototype["THROTTLE_TIMEOUT"] = 300
　　export default class Exposure {
　　constructor() {
　　this._observer = null
　　this.init()
　　}
　　init() {
　　const self = this
　　// 實例化監(jiān)聽
　　this._observer = new IntersectionObserver(
　　function(entries, observer) {
　　entries.forEach((entry) => {
　　// 出現(xiàn)在視窗內(nèi)
　　if (entry.isIntersecting) {
　　// 獲取參數(shù)
　　// console.log("埋點節(jié)點", entry.target.attributes);
　　const traceKey = entry.target.attributes["trace-key"].value
　　const traceVal = entry.target.attributes["track-params"].value
　　console.log("traceKey", traceKey)
　　console.log("traceVal", traceVal)
　　const { exposureAction, detail } = JSON.parse(traceVal)
　　const data = {
　　action: exposureAction,
　　detail,
　　}
　　// 曝光之后取消觀察
　　self._observer.unobserve(entry.target)
　　self.track(traceKey, data)
　　}
　　})
　　},
　　{
　　root: null,
　　rootMargin: "0px",
　　threshold: 0.5, // 元素出現(xiàn)面積，0 - 1，這里當(dāng)元素出現(xiàn)一半以上則進行曝光
　　}
　　)
　　}
　　/**
　　* 元素添加監(jiān)聽
　　*
　　* @param {*} entry
　　* @memberof Exposure
　　*/
　　add(entry) {
　　this._observer && this._observer.observe(entry.el)
　　}
　　/**
　　* 埋點上報
　　*
　　* @memberof Exposure
　　*/
　　track(traceKey, traceVal) {
　　// console.log("曝光埋點", traceKey, JSON.parse(traceVal));
　　sendUBT(traceKey, traceVal)
　　}
　　}

　　指令封裝

　　有了點擊和曝光類，下一步就是 Vue 指令的封裝了，也是之所以能實現(xiàn)半自動埋點的核心。

　　這里存在一個場景就是對于同一個按鈕或者圖片，同時存在既需要點擊埋點又需要曝光埋點的場景。所以在指令的設(shè)計時支持了多帶帶傳入和同時傳入的場景：

　　v-track:click|exposure

　　v-track:exposure

　　// src/directives/track/index.js
　　import Vue from "vue"
　　import Click from "./click"
　　import Exposure from "./exposure"
　　// 實例化曝光和點擊
　　const exp = new Exposure()
　　const cli = new Click()
　　Vue.directive("track", {
　　bind(el, binding) {
　　// 獲取指令參數(shù)
　　const { arg } = binding
　　arg.split("|").forEach((item) => {
　　// 點擊
　　if (item === "click") {
　　cli.add({ el })
　　} else if (item === "exposure") {
　　exp.add({ el })
　　}
　　})
　　},
　　})

　　同時需要在src/index.js引入即可：

　　1

　　import "./directives/track"

　　使用

　　在需要埋點的地方使用也是很簡單的：

　　<img
　　ref="imageDom"
　　trace-key="o_img"
　　v-track:click|exposure
　　:track-params="
　　JSON.stringify({
　　exposureAction: 's_pictures',
　　clickAction: 'c_pictures',
　　detail: {
　　value: '測試',
　　},
　　})
　　"
　　/>

　　不足

　　Vue自定義指令只是一個簡單封裝，業(yè)務(wù)代碼和埋點代碼達到解耦程度，這樣埋點的開發(fā)成本還是維護成本都降低了很多。

　　現(xiàn)在還有三個問題：曝光時頻次很高，是否可以考慮批量上報？用戶訪問一半頁面，突然切出，之后又重新進入，這種情況埋點又該如何上報？用戶設(shè)備不支持Intersection ObserverAPI 情況，是否要考慮向下兼容？

　　其實方式方法都在不斷的優(yōu)化中，相信可以有更多完美的優(yōu)化。