支付宝小程序从手动埋点到自动埋点的实现过程

 更新时间:2022年03月25日 11:54:33   作者:shuaiB  
埋点的意思是在你想要的数据节点出进行设置,可以方便进行采集,下面这篇文章主要给大家介绍了关于支付宝小程序从手动埋点到自动埋点的相关资料,需要的朋友可以参考下

手动埋点

现在小程序埋点需要手动添加埋点事件触发,

// 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数据
    },
  ],
};

总结

到此这篇关于支付宝小程序从手动埋点到自动埋点的文章就介绍到这了,更多相关支付宝小程序自动埋点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • tsc性能优化Project References使用详解

    tsc性能优化Project References使用详解

    这篇文章主要为大家介绍了tsc性能优化Project References使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 深入学习js函数的隐式参数 arguments 和 this

    深入学习js函数的隐式参数 arguments 和 this

    这篇文章主要介绍了 深入学习js函数的隐式参数 arguments 和 this,arguments是一个类数组结构,它保存了调用时传递给函数的所有实参;this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为。 下面分别对他们进行讨论。,需要的朋友可以参考下
    2019-06-06
  • 详解Typescript里的This的使用方法

    详解Typescript里的This的使用方法

    这篇文章主要介绍了详解Typescript里的This的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript中的new操作符的具体使用

    JavaScript中的new操作符的具体使用

    本文主要介绍了JavaScript中的new操作符的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS 在指定数组中随机取出N个不重复的数据

    JS 在指定数组中随机取出N个不重复的数据

    这篇文章主要介绍了JS 在指定数组中随机取出N个不重复数据的方法,需要的朋友可以参考下
    2014-06-06
  • 一个简易时钟效果js实现代码

    一个简易时钟效果js实现代码

    这篇文章主要为大家详细介绍了一个简易时钟效果js实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 24个解决实际问题的ES6代码片段(小结)

    24个解决实际问题的ES6代码片段(小结)

    这篇文章主要介绍了24个解决实际问题的ES6代码片段,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • ElementUI 的 Tree 组件的基本使用实战教程

    ElementUI 的 Tree 组件的基本使用实战教程

    这篇文章主要介绍了ElementUI 的 Tree 组件的基本使用实战教程,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • uniapp使用uni-imei插件获取手机的设备号

    uniapp使用uni-imei插件获取手机的设备号

    uniapp框架是一款开发跨平台应用的工具,它支持iOS、Android以及Web等多个平台,在这些平台中,uniapp可以访问某些设备的硬件信息,这篇文章主要给大家介绍了关于uniapp使用uni-imei插件获取手机设备号的相关资料,需要的朋友可以参考下
    2024-01-01
  • 用CSS+JS实现的进度条效果效果

    用CSS+JS实现的进度条效果效果

    用CSS+JS实现的进度条效果效果...
    2007-06-06

最新评论