詳解微信小程序（Taro）手動(dòng)埋點(diǎn)和自動(dòng)埋點(diǎn)

關(guān)注公眾號(hào) 前端人，回復(fù)“加群”

添加無廣告優(yōu)質(zhì)學(xué)習(xí)群

每一個(gè)公司要想用戶增長，都要收集和分析用戶操作數(shù)據(jù)，因此埋點(diǎn)是必不可少的事情。而對于前端職業(yè)發(fā)展來說，傳統(tǒng)的手動(dòng)埋點(diǎn)，無疑是繁瑣又無聊的事情，能簡化就簡化。

一、手動(dòng)埋點(diǎn)

手動(dòng)埋點(diǎn)就是在每一處需要的地方，都加一段上報(bào)埋點(diǎn)的代碼。影響代碼的閱讀體驗(yàn)，且散落的埋點(diǎn)代碼不方便管理。

以頁面 pv 為例，我們此前是在每一個(gè)頁面中上報(bào) pv：

// src/manual/home/index.tsx

import tracking from "./tracking";

// pageSn 是前端和產(chǎn)品約定的「頁面在埋點(diǎn)系統(tǒng)的唯一標(biāo)識(shí)」，比如這個(gè)項(xiàng)目首頁的標(biāo)識(shí)符是數(shù)字 11664
const pageSn = 11111;

export default () => {
  // useDidShow 是 Taro 專有的 Hook，等同于小程序原生 componentDidShow 生命周期，會(huì)在頁面展示的時(shí)候調(diào)用。
  useDidShow(() => {
    // 通過統(tǒng)一封裝的 sendPv 方法發(fā)送 pv 埋點(diǎn)
    sendPv(pageSn);
  });
  return <View>手動(dòng)埋點(diǎn)頁面</View>;
}; 

二、自動(dòng)埋點(diǎn)

自動(dòng)埋點(diǎn)可分為全自動(dòng)埋點(diǎn)和半自動(dòng)埋點(diǎn)。全自動(dòng)埋點(diǎn)則是不管需不需要，將所有的點(diǎn)都埋了。前端肯定開心了 “以后埋點(diǎn)產(chǎn)品都不要不要找我啦”，可數(shù)據(jù)同學(xué)就哭唧唧了。

比如，騰訊和 Taro 團(tuán)隊(duì)共同推出 騰訊有數(shù)自動(dòng)化埋點(diǎn)，接入超級(jí)簡單。比如配置 proxyPage 為 true 即可 “上報(bào)所有頁面的 browse 、leave、share 等事件”，配置 autoTrack 為 true 即可 “自動(dòng)上報(bào)所有元素的 tap、change、longpress、confirm 事件”。

可從數(shù)據(jù)量和有效性來說，「全埋」等于「不埋」，因?yàn)椤溉瘛挂环矫鎸?shù)據(jù)存儲(chǔ)量要求很高，另一方面會(huì)給我們負(fù)責(zé)數(shù)據(jù)清洗的同學(xué)帶來大量工作。

所以接下來，還是從中尋求平衡，著重看半自動(dòng)埋點(diǎn)。

1、頁面曝光（pv）

頁面曝光（pv），理想的上報(bào)方式是：

• 在一個(gè)統(tǒng)一的地方（如 trackingConf.ts），配置好每個(gè)要埋點(diǎn)的頁面的標(biāo)識(shí)符（即 pageSn）
• 頁面顯示后，自動(dòng)判斷下是否需要上報(bào)（是否在 trackingConf.ts 配置文件中），要就直接上報(bào)。

具體實(shí)現(xiàn)

（1）統(tǒng)一配置埋點(diǎn)字段，pageSn 表示頁面在埋點(diǎn)系統(tǒng)中的標(biāo)識(shí)符

// trackingConf.ts
export default {
  "auto/home/index": {
    pageSn: 11111,
  },
}; 

當(dāng)然，如果你的業(yè)務(wù)允許三七二十一，上報(bào)所有頁面 pv（帶上 path 讓產(chǎn)品自己篩選），那（1）這步可以省了，直接看（2），這種方式可稱為「pv 全自動(dòng)埋點(diǎn)」。

（2）封裝 usePv hook，在頁面展示時(shí)，獲取當(dāng)前頁面 pageSn、判斷是否要埋 pv、要的話發(fā)送 pv

// usePv.ts

// 獲取當(dāng)前頁面 path，借助 Taro 的 getCurrentInstance
export const getPath = () => {
  const path = Taro.getCurrentInstance().router?.path || "";
  // 去掉開頭的 /，比如將 '/auto/home/index' 改為 'auto/home/index'
  return path.match(/^\/*/) ? path.replace(/^\/*/, "") : path;
};

// 獲取當(dāng)前頁面 pageSn、判斷是否要埋 pv、要的話發(fā)送 pv
// 入?yún)?nbsp;getExtra 支持?jǐn)y帶額外參數(shù)
const usePv = ({
  getExtra,
}: {
  getExtra?: () => any;
} = {}) => {
  // 頁面曝光
  useDidShow(() => {
    const currentPath = getPath();
    // 從 trackingConf 中獲取 pageSn
    const pageSn = trackingConf[currentPath]?.pageSn;
    console.log("自動(dòng)獲取 pageSn", currentPath, pageSn);
    if (pageSn) {
      const extra = getExtra?.();
      // 通過統(tǒng)一封裝的 sendPv 方法發(fā)送 pv 埋點(diǎn)
      extra ? sendPv(pageSn, extra) : sendPv(pageSn);
    }
  });
}; 

（3）然后封裝頁面組件 WrapPage ，使用上述的 usePv()：

import React from "react";
import { View } from "@tarojs/components";
import usePv from "./usePv";

function WrapPage(Comp) {
  return function MyPage(props) {
    usePv();
    return (
      <View>
        <Comp {...props} />
      </View>
    );
  };
}

export default WrapPage; 

（4）最后在所有頁面組件，包一層 WrapPage 即可實(shí)現(xiàn)「所有頁面按需埋點(diǎn)」：

// src/auto/home/index.tsx

const Index = WrapPage(() => {
  return <View>自動(dòng)埋點(diǎn)頁面</View>;
}); 

后續(xù)新開發(fā)一個(gè)頁面，除了用 WrapPage 包裹外，只需要在第（1）步的 trackingConf.ts 中增加該頁面的 pageSn 即可。

提問環(huán)節(jié)

好奇寶寶們可能要問了：

（1）WrapPage 里這樣封裝了 usePv()，應(yīng)該如何支持上報(bào)自定義字段呢？

舉個(gè)例子，產(chǎn)品希望 src/auto/home/index.tsx 這個(gè)頁面上報(bào) pv 的時(shí)候，額外上報(bào)一下 當(dāng)前頁面 URL 查詢參數(shù)即 params。

很簡單，就是這個(gè)頁面不要用 WrapPage 包裹，而是拿到 params 后直接調(diào)用 usePv 函數(shù)：

// src/auto/home/index.tsx

const Index = () => {
  usePv({
    getExtra: () => {
      const params = Taro.getCurrentInstance().router?.params;
      return { params };
    },
  });
  return <View>自動(dòng)埋點(diǎn)頁面</View>;
}); 

（2）這里每個(gè)頁面組件，都要用 WrapPage 包裹一下，對業(yè)務(wù)還是有侵入型了，原生小程序可以改寫 Page，在 Page 中直接 usePv()。Taro 項(xiàng)目應(yīng)該也可以這么做，實(shí)現(xiàn) 0 業(yè)務(wù)侵入吧？

Taro 項(xiàng)目中，確實(shí)可以也可以和原生小程序一樣，在 App 中統(tǒng)一攔截原生 Page，但這樣的話，上面「某些頁面要計(jì)算額外參數(shù)并上報(bào)」就不好解決了。

2、頁面分享

微信小程序中，存在兩種分享：

• 分享給好友：useShareAppMessage。
• 分享到朋友圈：useShareTimeline。小程序基礎(chǔ)庫 v2.11.3 開始支持，目前只在 Android 平臺(tái)可用。

具體實(shí)現(xiàn)

以 useShareAppMessage 為例（useShareTimeline 同理）：

（1）仍在 trackingConf.ts 統(tǒng)一配置文件中，增加分享埋點(diǎn)的標(biāo)識(shí)字段 eleSn （及額外參數(shù)）

// trackingConf.ts
export default {
  "auto/home/index": {
    pageSn: 11111,
    shareMessage: { eleSn: 2222, destination: 0 }, // 增加 shareMessage 包含分享好友的 eleSn、業(yè)務(wù)額外參數(shù) destination
  }
}; 

（2）封裝 useShareAppMessage 方法，業(yè)務(wù)調(diào)用 Taro.useShareAppMessage 的地方全局替換為這個(gè) useShareAppMessage。

// 分享給好友，統(tǒng)一埋點(diǎn)
export const useShareAppMessage = ( callback: (payload: ShareAppMessageObject) => ShareAppMessageReturn ) => {
  let newCallback = (payload: ShareAppMessageObject) => {
    const result = callback(payload)

    const currentPath = getPath(); // getPath 獲取當(dāng)前頁面路徑，可參考「1、頁面曝光（pv）」中的 getPath
    // 從 trackingConf 中獲取 pageSn、shareMessage 等
    const { pageSn, shareMessage } = trackingConf[currentPath]
    const { eleSn, ...extra } = shareMessage || {}
    let page_el_sn = eleSn
    const { imageUrl: image_url, path: share_url } = result
    const { from: from_ele } = payload

    const reportInfo = {
      from_ele,
      share_to: 'friend', // 'friend' 表示分享給好友
      image_url,
      share_url,
      ...extra
    }
    console.log('...useShareAppMessage tracking', { pageSn, page_el_sn, reportInfo })
    sendImpr(pageSn, page_el_sn, reportInfo) // 可自行封裝 sendImpr 方法，發(fā)送分享埋點(diǎn)信息
    return result
  }
  Taro.useShareAppMessage(newCallback)
} 

這樣，如果有個(gè)頁面需增加分享好友的埋點(diǎn)，直接在 trackingConf.ts 中增加 shareMessage 的 eleSn 即可，useShareTimeline 同理。

提問環(huán)節(jié)

好奇寶寶們可能要問了：頁面需要增加分享好友/朋友圈的埋點(diǎn)，可否 0 配置（即不用修改上述的 trackingConf.ts 文件）？

與前文中「pv 全自動(dòng)埋點(diǎn)」類似，只要和產(chǎn)品約定好撈數(shù)據(jù)的方式也可以，比如筆者和產(chǎn)品約定了：

每個(gè)頁面分享好友/朋友圈，eleSn 都是 444444，然后產(chǎn)品通過 pageSn 判斷是哪個(gè)頁面，通過 share_to 判斷是分享好友 / 朋友圈，對于分享好友的場景，再通過 from_ele 判斷通過右上角分享還是點(diǎn)擊頁面中的按鈕分享。

這樣頁面分享也可以全自動(dòng)埋點(diǎn)了。

3、元素埋點(diǎn)

元素自動(dòng)埋點(diǎn)的調(diào)研遇到阻力，尚未落地。下文主要談不同思路遇到的問題，有好的建議歡迎評論區(qū)溝通。

我們元素埋點(diǎn)，較高頻的有曝光、點(diǎn)擊事件，中低頻的有滾動(dòng)、懸停等事件。

手動(dòng)埋點(diǎn)的方式就是在元素指定事件觸發(fā)的時(shí)候，手動(dòng)執(zhí)行 sendImpr 上報(bào)埋點(diǎn)（帶上頁面唯一標(biāo)識(shí)符 pageSn、 元素唯一標(biāo)識(shí)符 eleSn）。

那這個(gè)環(huán)節(jié)是否可以省事一些呢？對業(yè)務(wù)無侵入，大概的做法還是：

在 Component 指定事件觸發(fā)增加個(gè) hook -> 判斷是否要上報(bào)埋點(diǎn) -> 滿足條件則上報(bào)

問題一分為二：

（1）攔截元素事件回調(diào)

可以攔截并遍歷小程序 Component 接收到的 options.methods，如果是一個(gè)自定義函數(shù)，則在函數(shù)被調(diào)用的時(shí)候判斷第一個(gè)參數(shù)（假設(shè)命名為 e）的 type 是否等于 tap 等事件。這時(shí)候可以根據(jù) e 等信息決定是否滿足埋點(diǎn)上報(bào)條件了。

原生小程序中的實(shí)現(xiàn)，大致如下：

// App.js
App({
  onLaunch() {
    let old = Component
    Component = function(config) {
      // 攔截業(yè)務(wù)傳入的 config
      const newConf = proxyConfig(config)
      old(newConf)
    }
  }
})

const proxyConfig = function(conf) {
  const methods = conf.methods
  // 獲取自定義方法（按需排除一些不埋點(diǎn)的方法）
  let diyMethods =  Object.entries(methods).filter(function (method) {
    let methodName = method[0]
    return ![
      "onLoad",
      "onShow",
      "onReady",
      "onHide",
      "onUnload",
      "onPullDownRefresh",
      "onReachBottom",
      "onPageScroll",
      "onShareAppMessage",
      "onResize",
      "onTabItemTap",
      "observer",
    ].includes(methodName);
  })
  diyMethods.forEach(function(method) {
    const [methodName, methodFn] = method
    // 修改 conf 中的 methods
    methods[methodName] = function (...args) {
      const e = args && args[0]
      if (e && e.type === 'tap') {
        console.log('...tapping', methodName, args) // 觸發(fā)點(diǎn)擊事件的時(shí)候，按需上報(bào)埋點(diǎn)
      }
      methodFn.call(this,...args)
    }
  });
  // 返回修改后的 conf
  return conf
} 

Taro 項(xiàng)目中，不能直接在組件代碼里用 Component，但可以迂回一些的方式實(shí)現(xiàn)相同目的，比如：

// myProxy.js
module.exports = (function() {
  let OriginPage = Page
  let OriginComponent = Component

  return (Page = function(conf) {
    conf.forEach(function(e) {
      let [methodName, methodFn] = e

      if (typeof methodFn === 'function') {
        conf[methodName] = function(...args) {
          // 做你想做的事，如改寫 conf 等
          methodFn.call(this, ...args)
        }
      }
    })
    return OriginPage(conf)
  })(
    (Component = function(conf) {
      const methods = conf.methods
      methods.forEach(function(e) {
        // 做你想做的事，如改寫 conf 等
      })

      OriginComponent(conf)
    })
  )
})() 

然后在 app.tsx 中直接引入 myProxy.js 即可

（2）如何自動(dòng)生成元素唯一標(biāo)識(shí)符

目前是通過埋點(diǎn)系統(tǒng)中申請下來的 eleSn 來唯一標(biāo)識(shí)元素的，如果想要自動(dòng)標(biāo)識(shí)，可細(xì)分為：

• XPath：在 pc / mobile 中還可以，但在小程序中不支持直接獲取節(jié)點(diǎn)的 XPath / 根據(jù) XPath 獲取節(jié)點(diǎn)。微信小程序可否支持通過 XPath 獲取 DOM 元素？
• 自動(dòng)獲取 組件方法名：原生小程序中，因?yàn)橹苯訑r截了 Component options 中的 methods，所以在事件觸發(fā)時(shí)可以獲取到原始的方法名，但 Taro 項(xiàng)目中不行，因?yàn)?methods 被代理了一道，事件觸發(fā)后，你看到的方法名都是 eh。
• AST 解析源碼分析出頁面名、方法名和方法對應(yīng)的注釋來標(biāo)識(shí)元素：Taro 項(xiàng)目中目測只能用這個(gè)方法，但成本較大，且「在代碼不斷迭代后，存量數(shù)據(jù)是否還能用」也是個(gè)問題，所以筆者未做嘗試。

三、總結(jié)

本文概述了一下微信小程序（Taro）從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的思路。并按照頁面埋點(diǎn)（pv、分享）以及元素埋點(diǎn)，分析了實(shí)現(xiàn)方式：

• 頁面 pv：
• 封裝 usePv，根據(jù)當(dāng)前頁面 path 從配置文件中讀取出 pageSn
• 封裝頁面組件 WrapPage 調(diào)用 usePv()
• 分享好友/朋友圈：自定義 useShareAppMessage、useShareTimeline，根據(jù)當(dāng)前頁面 path 從配置文件中讀取出 pageSn 和分享 eleSn，然后獲取傳入?yún)?shù)后埋點(diǎn)上報(bào)
  元素埋點(diǎn)：提供了改寫 Component 方法來攔截事件回調(diào)的思路，但因元素唯一標(biāo)識(shí)符不能自動(dòng)獲取，所以不大適合自動(dòng)化埋點(diǎn)。