快捷導(dǎo)航

支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的實(shí)現(xiàn)過程

更新時(shí)間：2022年03月25日 11:54:33 作者：shuaiB

埋點(diǎn)的意思是在你想要的數(shù)據(jù)節(jié)點(diǎn)出進(jìn)行設(shè)置,可以方便進(jìn)行采集,下面這篇文章主要給大家介紹了關(guān)于支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的相關(guān)資料,需要的朋友可以參考下

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

現(xiàn)在小程序埋點(diǎn)需要手動(dòng)添加埋點(diǎn)事件觸發(fā)，

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

//js 
track(e) {
   ...業(yè)務(wù)代碼
   
   // 埋點(diǎn)代碼
  app.sentEventCustom("click", this, this.query, e.target.dataset.ilog);
}

會(huì)有以下幾個(gè)問題：

業(yè)務(wù)代碼和埋點(diǎn)代碼寫在一起，影響代碼的閱讀體驗(yàn)
埋點(diǎn)代碼散落在各個(gè)地方，不方便管理。比如運(yùn)營(yíng)要增加刪除埋點(diǎn)時(shí)，統(tǒng)一管理會(huì)更方便

需要埋點(diǎn)的場(chǎng)景

1.普通點(diǎn)擊事件

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

//js 
track(e) {
   // 埋點(diǎn)代碼
   report()
}

下拉刷新時(shí)，沒有觸發(fā)點(diǎn)擊，可以選擇對(duì)該事件進(jìn)行埋點(diǎn)

/**
   * @description: 下拉刷新
   * @param {*}
   * @return {*}
   */
  onPullDownRefresh() {
    // 埋點(diǎn)代碼
    report()
  },

埋點(diǎn)要在promise事件上

//js 
async onAuthPhone() { 
  await app.getUserPhone()
  // 埋點(diǎn)代碼
  report()
}

總結(jié)：我們要實(shí)現(xiàn)頁面元素點(diǎn)擊時(shí)觸發(fā)埋點(diǎn)，也要能在事件執(zhí)行后觸發(fā)埋點(diǎn)

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

1、通過事件冒泡監(jiān)聽元素是否被點(diǎn)擊

方案一：在axml最外層綁定catchTap事件，獲取點(diǎn)擊元素的ilog信息
- 缺點(diǎn)：捕獲的目標(biāo)元素為最里層，該層不一定添加了ilog
方案二：在需要發(fā)送埋點(diǎn)的元素增加樣式類'.ilog'，點(diǎn)擊時(shí)最外層catchTap獲取點(diǎn)擊位置的X，Y軸值，同時(shí)通過queryselectAll獲取'.ilog'元素的位置，判斷點(diǎn)擊位置是否在'.ilog'內(nèi)，如果是的話，發(fā)送埋點(diǎn)信息。如下圖：

2、擴(kuò)展Page方法

由于最外層綁定catchTap事件方法需要在Page中定義以供wxml調(diào)用，如果每個(gè)頁面手動(dòng)編寫就過于繁瑣了，可以通過改寫Page來實(shí)現(xiàn)自動(dòng)擴(kuò)展，代碼如下

// 記錄原Page方法
const originPage = Page;
// 重寫Page方法
Page = (page) => {
  // 給page對(duì)象注入三個(gè)方法
  page.elementTracker = function() {}
  page.methodTracker = function() {}
  page.isClickTrackArea = function() {}
  return originPage(page);
};

3、對(duì)頁面函數(shù)埋點(diǎn)

有些場(chǎng)景我們除了對(duì)頁面元素點(diǎn)擊埋點(diǎn)，還要對(duì)頁面函數(shù)進(jìn)行埋點(diǎn)，例如用戶下拉刷新的時(shí)候，可以對(duì)原方法進(jìn)行包裝，插入埋點(diǎn)代碼，方案和第二點(diǎn)差不多。

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

4、通過配置表設(shè)置埋點(diǎn)

上面介紹了頁面元素和函數(shù)的埋點(diǎn)方式，下面講一下如何管理埋點(diǎn)信息解決代碼入侵問題，可以把埋點(diǎn)信息以配置表的方式聲明，以后還可以做到動(dòng)態(tài)配置，在服務(wù)端配置完畢下發(fā)到客戶端。

const tracks = {
  path: 'pages/film/detail',
  elementTracks: [
    {
      element: '.buy-now',  // 聲明需要監(jiān)聽的元素
      dataKeys: ['film.filmId'], // 聲明需要獲取Data下的film對(duì)象下的filmId字段
    },
  ],
  methodTracks: [
    {
      method: 'toBannerDetail', // 聲明需要監(jiān)聽的函數(shù)
      dataKeys: ['imgUrls'], // 聲明需要獲取Data下的imgUrls數(shù)據(jù)
    },
  ],
};

總結(jié)

到此這篇關(guān)于支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)的文章就介紹到這了,更多相關(guān)支付寶小程序自動(dòng)埋點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: