記一次解決小程序直播插件頁面路由埋點問題

背景

路由埋點方案

自有埋點：基于 wx.onAppRoute 做路由切換track、以及 wx.onAppShow 和 wx.onAppHide 做頁面第一次打開/關(guān)閉/重新回到頁面。

業(yè)務上用起來發(fā)現(xiàn)自有埋點直播插件頁的數(shù)據(jù)與微信官方的數(shù)據(jù)差距有好幾倍：

解決

實驗找問題

根據(jù)實驗后得出插件頁面埋點存在問題：

1. 直接打開直播插件頁面
   1. 未能上報路由事件
   2. 后續(xù)的路由事件均不能上報
2. 其他頁面進入直播插件頁面（正常）
3. 直接打開其他非插件頁面（正常）

懷疑/解釋（因為得知存在問題是漸進的，不是一下子就知道存在的所有問題，所以提出的懷疑也是漸進的）

1. 直播、網(wǎng)絡狀況，導致部分數(shù)據(jù)未能上報（基于直播頁面有部分數(shù)據(jù)先甩鍋:dog:）
2. 直接打開頁面這種情況自有埋點不能支持
3. 插件頁面與正常頁面不一樣

提出解決方案：

1. 解決自有埋點存在的問題（成本未知 上解）

2. 使用第三方埋點：友盟、阿拉丁...看它們能否支持插件頁面的路由事件上報（成本低 埋點數(shù)據(jù)在第三方 中）

3. 直播插件提供組件，根據(jù)這些組件自己去實現(xiàn)直播頁面（開發(fā)成本高 下）

1和2可以同步去做，3是實在沒辦法的一個選項

接入第三方埋點，測試后看數(shù)據(jù)，直接好家伙，根本不支持插件頁面的路由事件上報

解決自有埋點存在的問題：

1. 直接打開直播插件頁面 未能上報路由事件

   包裝 App 函數(shù)

   // App
   const originalApp = App
   
   App = function(this: any, obj: Object) {
     xProxy(obj, 'onLaunch', captureOnLoad)
     return originalApp.apply(this, arguments)
   }
   
   復制代碼

2. 解決直接打開直播插件頁面后續(xù)的路由事件不能上報

   1. 真機測試找原因 -> 看看有沒有報錯信息

   2. 看文檔猜測是 插件調(diào)用 API 的限制

   3. 測試插件頁面注冊 wx.onAppRoute / wx.onAppRouteDone wx.onAppShow 和 wx.onAppHide 雖然沒報錯，但是后續(xù)不會觸發(fā)

      解決方案：包裝 Page （不會影響插件頁面），當啟動頁面是插件頁面時重新初始化路由上報

      let needReInit = false
      
      function captureOnLoad(args: any) {
        if (args.path && isPluginPage(args.path)) {
          needReInit = true
          // 還需要主動上報一次路由 自己實現(xiàn)
        }
      }
      
      function xProxy(target: any, method: string, customMethod: Function) {
        const originMethod = target[method]
        // eslint-disable-next-line no-constant-condition
        if (originMethod || 1) {
          target[method] = function() {
            originMethod && originMethod.apply(this, arguments)
            customMethod.apply(this, arguments)
          }
        }
      }
      
      function onPageLoad(this: any) {
        if (needReInit) {
      		// 重新初始化事件監(jiān)聽
          X.retrack()
          needReInit = false
          // 還需要主動上報一次路由 自己實現(xiàn)
        }
      }
      
      // App
      const originalApp = App
      
      App = function(this: any, obj: Object) {
        xProxy(obj, 'onLaunch', captureOnLoad)
        return originalApp.apply(this, arguments)
      }
      
      // Page
      const originalPage = Page
      
      Page = function(this: any, obj: Object) {
        xProxy(obj, 'onLoad', onPageLoad)
        return originalPage.apply(this, arguments)
      }
      
      復制代碼

測試發(fā)布

npm run test && npm run deploy
error ...
復制代碼

•  直播穩(wěn)定性，其他核心流程穩(wěn)定回歸

•  直接打開直播插件頁面 上報路由事件

•  打開直播插件頁面后續(xù)的路由事件上報

翻車

啟動頁打開直播插件頁面后續(xù)的路由事件未上報，明明在埋點工程里面的demo還好好的，在業(yè)務項目里面翻了車。

對比demo和業(yè)務項目差異，只有Taro版本的問題了，demo是Taro 3，業(yè)務項目在Taro 2。

于是看了下Taro 2.x關(guān)于頁面/組件方面的代碼，最終發(fā)現(xiàn)Taro 2.x組件和頁面都是用 Component 去包的

component.js#L46

create-component.js#L396

我他媽，直接好家伙！

好吧，再包裝一下 Component ：

function onComponentPageShow(this: any) {
  // 判斷是不是頁面
  if (needReInit && this.$component.$componentType === 'PAGE') {
  	// 重新初始化頁面埋點
    X.retrack()
    needReInit = false
    // 還需要主動上報一次路由 自己實現(xiàn)
  }
}

// Component
const originalComponent = Component

Component = function(this: any, obj: any) {
  obj.pageLifetimes = obj.pageLifetimes || {}
  xProxy(obj.pageLifetimes, 'show', onComponentPageShow)
  return originalComponent.apply(this, arguments)
}

復制代碼

這次就可以了！

真實數(shù)據(jù)驗證：

PV差距原因及修正思路：

原因：重復打開直播頁面未上報路由埋點（打開后切后臺，再回來）

修正思路： wx.onAppShow 和 wx.onAppHide 切換成 App 里面的 onShow 和 onHide

結(jié)論：

1. 插件頁面與正常頁面不一樣：
   1. 插件調(diào)用 API 的限制 啟動頁面是插件頁面的時候需要考慮重新注冊
   2. 插件頁面的 Page 與全局的 Page 是隔離的， 第三方基于包裝 Page 是不可能拿到插件的路由埋點（必須使用 wx.onAppRoute ）
2. Taro 2 的頁面是用 Component 實現(xiàn)的