可视化埋点在React Native中的实践

本文首发于微信公众号“Shopee技术团队”。

1. 背景

笔者所在团队为 Shopee 的本地生活前端团队，用户可以在我们的平台购买优惠券，然后去线下门店使用。随着用户规模不断增加，研究用户行为数据可以更好地指导产品功能设计，提供更加优秀的用户体验。用户行为数据的研究首先涉及到如何采集，即我们常说的“埋点”。

一直以来，我们项目中的埋点都采用代码埋点，每次新增埋点往往是一些重复性的工作，且需要重新发布代码才能生效，为此我们的开发人员叫苦不迭。为了实现在不修改代码的前提下新增埋点，我们调研了可视化埋点和无埋点两种方式。其中，无埋点（又称全埋点）会收集用户在应用里的所有行为，并上报所有相关的数据，由此产生大量无用数据，于是被我们排除了。

而可视化埋点的方式为：通过埋点平台圈选所需埋点的页面元素，进行埋点上报属性的配置与发布，由采集 SDK 同步埋点配置，并根据配置自动进行用户行为数据的采集和发送。正好可以解决我们的问题，因此我们决定采用可视化埋点方案。

在开始介绍我们的系统前，先来看看在 Web 上进行可视化埋点的基本思路：以点击事件为例（下文如果没有特殊说明，均以点击事件为例），Web 可视化埋点一般会提供一个 SDK，SDK 会在 document 上面监听 click 事件，借助于事件委托的特性，可以捕获到页面上任意元素的 click 事件及元素的信息。同时 Web 可视化埋点会提供一个平台，该平台通过 iframe 嵌入需要进行埋点配置的网页，然后通过 postMessage 来进行平台与目标页面的通信。

由于我们的前端技术栈是 React Native，很多地方实现起来都比较有难度，比如无法通过 iframe 嵌入页面及 postMessage 实现平台与目标页面的通信，无法借助事件委托的特性来实现我们的 SDK 等。那么，最后究竟是如何实现的呢？下文将详细展开介绍。

2. 系统介绍

下面按照使用流程来介绍我们的系统。首先，需要在 React Native 客户端接入我们的 SDK。

2.1 客户端接入 SDK

如下所示，我们通过执行 SDK 的 initGoblin 方法导出了 TouchableComponent，该对象又导出了跟点击相关的一些组件供业务方使用，我们直接使用导出的这些点击相关的组件，并指定 trackId 即可（关于 trackId 后文会做介绍）：

import {
    initGoblin } from '@dp/goblin-sdk-react-native'
  
export const {
    TouchableComponent } = initGoblin({
    ... })
  
const {
   
  GButton