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

目录
  • 手动埋点
  • 需要埋点的场景
  • 自动埋点
    • 1、通过事件冒泡监听元素是否被点击
    • 2、扩展Page方法
    • 3、对页面函数埋点
    • 4、通过配置表设置埋点
  • 总结

手动埋点

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

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

总结

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

赞 (0)

相关推荐

  • 浅谈微信小程序列表埋点曝光指南

    背景 最近项目中,开发一个小程序列表页,PM大大给我提了一个埋点需求,列表中的每一项,出现在屏幕中的时候,需要上报一条记录. 目标 如图中操作,要依次上报 item 1 - item7,但是上滑的时候,不再重复上报 怎么做 接到需求的第一感觉是,我难道要监听页面滚动,然后通过offsetTop 去算吗!!!??? 这样显然不是最高效的.于是我去翻了一下微信的开发文档,发现有一个IntersectionObserver 的API,正好满足我的需求. 首先我们需要创建一个 IntersectionO

  • 详解微信小程序（Taro）手动埋点和自动埋点的实现

    每一个公司要想用户增长,都要收集和分析用户操作数据,因此埋点是必不可少的事情. 而对于前端职业发展来说,传统的手动埋点,无疑是繁琐又无聊的事情,能简化就简化. 一.手动埋点 手动埋点就是在每一处需要的地方,都加一段上报埋点的代码.影响代码的阅读体验,且散落的埋点代码不方便管理. 以页面 pv 为例,我们此前是在每一个页面中上报 pv: // src/manual/home/index.tsx import tracking from "./tracking"; // pageSn 是前

  • 小程序从手动埋点到自动埋点的实现方法

    前言 小程序由于封闭性较强,要像web应用一样实现灵活的数据收集,会有一定难度.目前开源的埋点SDK,一般采用手动埋点的方式,这种方式有较强的侵入型,为了解决这个问题就有了该文章. 手动埋点 以腾讯移动分析的SDK为例,如果要记录埋点信息,只要插入一句代码即可 // 例如,记录搜索行为 search(keyword) { if (keyword) { ...业务代码 } mta.Event.stat("ico_search", {"query":keyword});

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

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

    目录 手动埋点 需要埋点的场景 自动埋点 1.通过事件冒泡监听元素是否被点击 2.扩展Page方法 3.对页面函数埋点 4.通过配置表设置埋点 总结 手动埋点 现在小程序埋点需要手动添加埋点事件触发, // axml <view onTap="track" data-ilog="xxx">这只是一个展示view</view> //js track(e) { ...业务代码 // 埋点代码 app.sentEventCustom("c

  • IDEA基于支付宝小程序搭建springboot项目的详细步骤

    IDEA基于支付宝小程序搭建springboot项目的详细步骤

    服务端 在平台上创建springboot小程序应用 创建小程序 登录蚂蚁金服开放平台,扫码登录填写信息后,点击支付宝小程序,选择立即接入 > 同意个人公测 > 开始创建 . 填写好小程序基本信息后,点击创建按钮,创建名为xxx小程序. PS:一个账号下最多可以创建10个小程序:未提交过审核的小程序可以删除,删除的小程序不在计数范围. 创建云应用后端服务 在小程序页面选择刚创建的小程序,点击查看,进入开发者页面. 在左侧导航栏选择云服务(免费),点击创建云服务,选择创建云应用,技术栈选Sprin

  • 支付宝小程序tabbar底部导航

    支付宝小程序重写tabbar底部导航,供大家参考,具体内容如下 1.app.js中代码如下 editTabBar: function () { var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.route; console.log(t) console.log(s) 0 != s.indexOf("/") && (s = "/" + s)

  • 详解PHP实现支付宝小程序用户授权的工具类

    背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过程 学到的知识 支付宝开放接口的调用模式以及实现方式 支付宝小程序授权的流程 RSA加密方式 吐槽点 支付宝小程序的入口隐藏的很深,没有微信小程序那么直接了当 支付宝小程序的开发者工具比较难用,编译时候比较卡,性能有很大的问题 每提交一次代码,支付宝小程序的体验码都要进行更换,比较繁琐,而且loca

  • 微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

    具体代码如下所示: // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"> <block wx:for="{{

  • 支付宝小程序自定义弹窗dialog插件的实现代码

    支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修改的.如是自己就捯饬着封装了个支付宝小程序自定义弹窗插件wcPop,多种展示场景,随意修改调用. 自定义的小程序弹窗采用了全新的模板布局,极简的api调用方式,同时解决了自定义弹窗出现时,蒙层下的页面仍可以滚动的问题. 在原始功能的基础上,新增了跟随定位弹窗.上下左右弹窗.弹窗swipe滑动功能 先来展示部分弹窗demo图: 在需要调用弹窗插件的页面引入tpl.js //信息框 btnT

  • 微信小程序scroll-view点击项自动居中效果的实现

    scroll-view | 微信开放文档 效果 代码 布局样式代码省略,以下只展示逻辑代码 <scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view"> <view class="class-item" wx:for="{{classList}}" wx:key="id&qu

  • 微信小程序pinker组件使用实现自动相减日期

    首先,我这里使用pinker组件代码为 <view class="section"> <view class="section__title">开始时间</view> <picker mode="date" value="{{date}}" start="{{startTime}}" end="2020-09-01" bindchange=&qu

  • 支付宝小程序实现省市区三级联动

    本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码,供大家参考,具体内容如下 背景 最近做的项目 有省市区联动.不仅要传name还要把对应的id发给后台. 支付宝提供的级联有 my.multiLevelSelect和picker并不能满足需求. picker 组件不支持多列选择,所以使用 picker-view 组件和Popup配合使用. 实现效果图 数据结构 citys - 城市 areas - 区 当然这是处理之后的,行政区划树 不长这样子. [{ code:1, name:'北京

随机推荐