支付寶小程式從手動埋點到自動埋點的實現過程

2022-03-25 16:00:24

手動埋點

現在小程式埋點需要手動新增埋點事件觸發，

// axml
<view onTap="track" data-ilog="xxx">這只是一個展示view</view>

//js 
track(e) {
   ...業務程式碼
   
   // 埋點程式碼
  app.sentEventCustom("click", this, this.query, e.target.dataset.ilog);
}

會有以下幾個問題：

業務程式碼和埋點程式碼寫在一起，影響程式碼的閱讀體驗
埋點程式碼散落在各個地方，不方便管理。比如運營要增加刪除埋點時，統一管理會更方便

需要埋點的場景

1.普通點選事件

// axml
<view onTap="track" class="ilog" data-ilog="xxx">這只是一個展示view</view>

//js 
track(e) {
   // 埋點程式碼
   report()
}

下拉重新整理時，沒有觸發點選，可以選擇對該事件進行埋點

/**
   * @description: 下拉重新整理
   * @param {*}
   * @return {*}
   */
  onPullDownRefresh() {
    // 埋點程式碼
    report()
  },

埋點要在promise事件上

//js 
async onAuthPhone() { 
  await app.getUserPhone()
  // 埋點程式碼
  report()
}

總結：我們要實現頁面元素點選時觸發埋點，也要能在事件執行後觸發埋點

自動埋點

1、通過事件冒泡監聽元素是否被點選

方案一：在axml最外層繫結catchTap事件，獲取點選元素的ilog資訊
- 缺點：捕獲的目標元素為最裡層，該層不一定新增了ilog
方案二：在需要傳送埋點的元素增加樣式類'.ilog'，點選時最外層catchTap獲取點選位置的X，Y軸值，同時通過queryselectAll獲取'.ilog'元素的位置，判斷點選位置是否在'.ilog'內，如果是的話，傳送埋點資訊。如下圖：

2、擴充套件Page方法

由於最外層繫結catchTap事件方法需要在Page中定義以供wxml呼叫，如果每個頁面手動編寫就過於繁瑣了，可以通過改寫Page來實現自動擴充套件，程式碼如下

// 記錄原Page方法
const originPage = Page;
// 重寫Page方法
Page = (page) => {
  // 給page物件注入三個方法
  page.elementTracker = function() {}
  page.methodTracker = function() {}
  page.isClickTrackArea = function() {}
  return originPage(page);
};

3、對頁面函數埋點

有些場景我們除了對頁面元素點選埋點，還要對頁面函數進行埋點，例如使用者下拉重新整理的時候，可以對原方法進行包裝，插入埋點程式碼，方案和第二點差不多。

const originPage = Page;
// 重寫Page方法
Page = (page) => {
  // 給onShow方法插入埋點
  const originMethod = page['onShow'];
  page['onShow'] = function() {
    report() // 記錄埋點
    return originMethod();
  }
  return originPage(page);
};

4、通過設定表設定埋點

上面介紹了頁面元素和函數的埋點方式，下面講一下如何管理埋點資訊解決程式碼入侵問題，可以把埋點資訊以設定表的方式宣告，以後還可以做到動態設定，在伺服器端設定完畢下發到使用者端。

const tracks = {
  path: 'pages/film/detail',
  elementTracks: [
    {
      element: '.buy-now',  // 宣告需要監聽的元素
      dataKeys: ['film.filmId'], // 宣告需要獲取Data下的film物件下的filmId欄位
    },
  ],
  methodTracks: [
    {
      method: 'toBannerDetail', // 宣告需要監聽的函數
      dataKeys: ['imgUrls'], // 宣告需要獲取Data下的imgUrls資料
    },
  ],
};

總結

到此這篇關於支付寶小程式從手動埋點到自動埋點的文章就介紹到這了,更多相關支付寶小程式自動埋點內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！