詳解微信小程序（Taro）手動埋點和自動埋點的實現

// 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>;
};

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

// 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);
 }
 });
};

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;

// src/auto/home/index.tsx

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

// src/auto/home/index.tsx

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

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

// 分享給好友，統一埋點
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)
}

// 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
}

// 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)
 })
 )
})()