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

本篇內(nèi)容主要講解“支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)如何實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)如何實(shí)現(xià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)營要增加刪除埋點(diǎn)時(shí)，統(tǒng)一管理會(huì)更方便

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

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)

有些場景我們除了對(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ù)
    },
  ],
};

到此，相信大家對(duì)“支付寶小程序從手動(dòng)埋點(diǎn)到自動(dòng)埋點(diǎn)如何實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！