如何在微信小程序中實現一個手動埋點和自動埋點功能

如何在微信小程序中實現一個手動埋點和自動埋點功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

一、手動埋點

手動埋點就是在每一處需要的地方，都加一段上報埋點的代碼。影響代碼的閱讀體驗，且散落的埋點代碼不方便管理。
以頁面 pv 為例，我們此前是在每一個頁面中上報 pv：

// src/manual/home/index.tsx

import tracking from "./tracking";

// pageSn 是前端和產品約定的「頁面在埋點系統的唯一標識」，比如這個項目首頁的標識符是數字 11664
const pageSn = 11111;

export default () => {
 // useDidShow 是 Taro 專有的 Hook，等同于小程序原生 componentDidShow 生命周期，會在頁面展示的時候調用。
 useDidShow(() => {
 // 通過統一封裝的 sendPv 方法發送 pv 埋點
 sendPv(pageSn);
 });
 return <View>手動埋點頁面</View>;
};

二、自動埋點

自動埋點可分為全自動埋點和半自動埋點。全自動埋點則是不管需不需要，將所有的點都埋了。前端肯定開心了 “以后埋點產品都不要不要找我啦”，可數據同學就哭唧唧了。

比如，騰訊和 Taro 團隊共同推出 騰訊有數自動化埋點，接入超級簡單。比如配置 proxyPage 為 true 即可 “上報所有頁面的 browse 、leave、share 等事件”，配置 autoTrack 為 true 即可 “自動上報所有元素的 tap、change、longpress、confirm 事件”。

可從數據量和有效性來說，「全埋」等于「不埋」，因為「全埋」一方面對數據存儲量要求很高，另一方面會給我們負責數據清洗的同學帶來大量工作。

所以接下來，還是從中尋求平衡，著重看半自動埋點。

1、頁面曝光（pv）

頁面曝光（pv），理想的上報方式是：

在一個統一的地方（如 trackingConf.ts），配置好每個要埋點的頁面的標識符（即 pageSn）
頁面顯示后，自動判斷下是否需要上報（是否在 trackingConf.ts 配置文件中），要就直接上報。

具體實現

（1）統一配置埋點字段，pageSn 表示頁面在埋點系統中的標識符

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

當然，如果你的業務允許三七二十一，上報所有頁面 pv（帶上 path 讓產品自己篩選），那（1）這步可以省了，直接看（2），這種方式可稱為「pv 全自動埋點」。

（2）封裝 usePv hook，在頁面展示時，獲取當前頁面 pageSn、判斷是否要埋 pv、要的話發送 pv

// usePv.ts

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

// 獲取當前頁面 pageSn、判斷是否要埋 pv、要的話發送 pv
// 入參 getExtra 支持攜帶額外參數
const usePv = ({
 getExtra,
}: {
 getExtra?: () => any;
} = {}) => {
 // 頁面曝光
 useDidShow(() => {
 const currentPath = getPath();
 // 從 trackingConf 中獲取 pageSn
 const pageSn = trackingConf[currentPath]?.pageSn;
 console.log("自動獲取 pageSn", currentPath, pageSn);
 if (pageSn) {
  const extra = getExtra?.();
  // 通過統一封裝的 sendPv 方法發送 pv 埋點
  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 即可實現「所有頁面按需埋點」：

// src/auto/home/index.tsx

const Index = WrapPage(() => {
 return <View>自動埋點頁面</View>;
});

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

提問環節

好奇寶寶們可能要問了：

（1）WrapPage 里這樣封裝了 usePv()，應該如何支持上報自定義字段呢？
舉個例子，產品希望 src/auto/home/index.tsx 這個頁面上報 pv 的時候，額外上報一下 當前頁面 URL 查詢參數即 params。
很簡單，就是這個頁面不要用 WrapPage 包裹，而是拿到 params 后直接調用 usePv 函數：

// src/auto/home/index.tsx

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

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

Taro 項目中，確實可以也可以和原生小程序一樣，在 App 中統一攔截原生 Page，但這樣的話，上面「某些頁面要計算額外參數并上報」就不好解決了。

2、頁面分享

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

• 分享給好友：useShareAppMessage。

• 分享到朋友圈：useShareTimeline。小程序基礎庫 v2.11.3 開始支持，目前只在 Android 平臺可用。

具體實現

以 useShareAppMessage 為例（useShareTimeline 同理）：
（1）仍在 trackingConf.ts 統一配置文件中，增加分享埋點的標識字段 eleSn （及額外參數）

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

（2）封裝 useShareAppMessage 方法，業務調用 Taro.useShareAppMessage 的地方全局替換為這個 useShareAppMessage。

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

 const currentPath = getPath(); // getPath 獲取當前頁面路徑，可參考「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 方法，發送分享埋點信息
 return result
 }
 Taro.useShareAppMessage(newCallback)
}

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

提問環節

好奇寶寶們可能要問了：頁面需要增加分享好友/朋友圈的埋點，可否 0 配置（即不用修改上述的  trackingConf.ts 文件）？
與前文中「pv 全自動埋點」類似，只要和產品約定好撈數據的方式也可以，比如筆者和產品約定了：
每個頁面分享好友/朋友圈，eleSn 都是 444444，然后產品通過 pageSn 判斷是哪個頁面，通過 share_to 判斷是分享好友 / 朋友圈，對于分享好友的場景，再通過 from_ele 判斷通過右上角分享還是點擊頁面中的按鈕分享。
這樣頁面分享也可以全自動埋點了。

3、元素埋點

元素自動埋點的調研遇到阻力，尚未落地。下文主要談不同思路遇到的問題，有好的建議歡迎評論區溝通。

我們元素埋點，較高頻的有曝光、點擊事件，中低頻的有滾動、懸停等事件。

手動埋點的方式就是在元素指定事件觸發的時候，手動執行 sendImpr 上報埋點（帶上頁面唯一標識符 pageSn、 元素唯一標識符 eleSn）。

那這個環節是否可以省事一些呢？對業務無侵入，大概的做法還是：

在 Component 指定事件觸發增加個 hook -> 判斷是否要上報埋點 -> 滿足條件則上報

問題一分為二：

（1）攔截元素事件回調

可以攔截并遍歷小程序 Component 接收到的 options.methods，如果是一個自定義函數，則在函數被調用的時候判斷第一個參數（假設命名為 e）的 type 是否等于 tap 等事件。這時候可以根據 e 等信息決定是否滿足埋點上報條件了。
原生小程序中的實現，大致如下：

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

const proxyConfig = function(conf) {
 const methods = conf.methods
 // 獲取自定義方法（按需排除一些不埋點的方法）
 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) // 觸發點擊事件的時候，按需上報埋點
  }
  methodFn.call(this,...args)
 }
 });
 // 返回修改后的 conf
 return conf
}

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

// 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）如何自動生成元素唯一標識符

目前是通過埋點系統中申請下來的 eleSn 來唯一標識元素的，如果想要自動標識，可細分為：

• XPath：在 pc / mobile 中還可以，但在小程序中不支持直接獲取節點的 XPath / 根據 XPath 獲取節點。微信小程序可否支持通過 XPath 獲取 DOM 元素？

• 自動獲取 組件方法名：原生小程序中，因為直接攔截了 Component options 中的 methods，所以在事件觸發時可以獲取到原始的方法名，但 Taro 項目中不行，因為 methods 被代理了一道，事件觸發后，你看到的方法名都是 eh。

• AST 解析源碼分析出頁面名、方法名和方法對應的注釋來標識元素：Taro 項目中目測只能用這個方法，但成本較大，且「在代碼不斷迭代后，存量數據是否還能用」也是個問題，所以筆者未做嘗試。

關于如何在微信小程序中實現一個手動埋點和自動埋點功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。