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

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

　　手動埋點

　　可視化埋點

　　無痕埋點

　　手動埋點，顧名思義就是純手動寫代碼，調用埋點 SDK 提供的函數，在需要埋點的業務邏輯中添加對應方法，上報埋點數據。這種也是之前一直在使用的方法。

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

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

　　一般對哪些數據做埋點？

　　為了達到數據分析，便于后續的運營及產品策略調整的目的，一般需要對以下幾點做埋點統計：

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

　　點擊埋點：統計用戶在頁面瀏覽過程中觸發的點擊事件，如按鈕、導航或者圖片的點擊次數

　　曝光埋點：統計具體元素是否得到有效曝光

　　需求分析

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

　　1、埋點與業務盡量分離清楚，兩個業務獨立

　　2、減少不對業務代碼有侵入

　　3、簡約規范，收口要統一處理埋點邏輯

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

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

　　實現思路：簡單來說就是在需要埋點的DOM節點掛載特殊屬性，通過埋點SDK監聽掛載了相應屬性對應的事件，造成事件觸發時進行埋點數據上報。

　　那如何監聽？

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

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

　　首先我們來看一下為什么需要監測曝光：

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

　　那么怎么判斷元素出現在頁面的可視區域呢？

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

　　基于此，瀏覽器特意為我們打造了一個Intersection ObserverAPI，把性能相關的細節都處理掉，讓開發者只關心業務邏輯即可：

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

　　代碼實現

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

　　Click 類封裝

　　點擊事件的處理相對比較簡單，每次點擊觸發數據上報即可：

　　// 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 類封裝

　　曝光的相對復雜一些。

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

　　// src/directives/track/exposure.js
　　import "intersection-observer"
　　import { sendUBT } from "../../utils/ctrip"
　　// 節流時間調整，默認100ms
　　IntersectionObserver.prototype["THROTTLE_TIMEOUT"] = 300
　　export default class Exposure {
　　constructor() {
　　this._observer = null
　　this.init()
　　}
　　init() {
　　const self = this
　　// 實例化監聽
　　this._observer = new IntersectionObserver(
　　function(entries, observer) {
　　entries.forEach((entry) => {
　　// 出現在視窗內
　　if (entry.isIntersecting) {
　　// 獲取參數
　　// console.log("埋點節點", 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, // 元素出現面積，0 - 1，這里當元素出現一半以上則進行曝光
　　}
　　)
　　}
　　/**
　　* 元素添加監聽
　　*
　　* @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 指令的封裝了，也是之所以能實現半自動埋點的核心。

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

　　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) {
　　// 獲取指令參數
　　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自定義指令只是一個簡單封裝，業務代碼和埋點代碼達到解耦程度，這樣埋點的開發成本還是維護成本都降低了很多。

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

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