欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

支付寶小程序從手動埋點到自動埋點的實現(xiàn)過程

 更新時間：2022年03月25日 11:54:33   作者：shuaiB  
埋點的意思是在你想要的數據節(jié)點出進行設置,可以方便進行采集,下面這篇文章主要給大家介紹了關于支付寶小程序從手動埋點到自動埋點的相關資料,需要的朋友可以參考下

手動埋點

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

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

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

會有以下幾個問題：

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

需要埋點的場景

1.普通點擊事件

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

//js 
track(e) {
   // 埋點代碼
   report()
}
  • 下拉刷新時，沒有觸發(fā)點擊，可以選擇對該事件進行埋點
/**
   * @description: 下拉刷新
   * @param {*}
   * @return {*}
   */
  onPullDownRefresh() {
    // 埋點代碼
    report()
  },
  • 埋點要在promise事件上
//js 
async onAuthPhone() { 
  await app.getUserPhone()
  // 埋點代碼
  report()
}

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

自動埋點

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

  • 方案一：在axml最外層綁定catchTap事件，獲取點擊元素的ilog信息

    • 缺點：捕獲的目標元素為最里層，該層不一定添加了ilog

  • 方案二：在需要發(fā)送埋點的元素增加樣式類'.ilog'，點擊時最外層catchTap獲取點擊位置的X，Y軸值，同時通過queryselectAll獲取'.ilog'元素的位置，判斷點擊位置是否在'.ilog'內，如果是的話，發(fā)送埋點信息。如下圖：

2、擴展Page方法

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

// 記錄原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、通過配置表設置埋點

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

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

總結

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

相關文章

最新評論