实践 | 如何在腾讯云微搭低代码中接入神策数据

在我们使用腾讯云微搭低代码（下文简述“微搭”）开发小程序的时候收到一个接入神策数据的需求，在我们查看文档后发现将神策接入小程序是需要全局引入 sensorsdata.min.js 并初始化神策 SDK 后才可实现埋点方法的接入。

 

腾讯云微搭是类似 react component 的组件化思维，将页面中各个不同的元素都细分成了多个不同的组件，这就意味着不同的组件如果要使用同一个神策 SDK 实例的话需要想办法挂载到全局。

 

在微搭的整个生命周期中存在一个 app 对象，我们尝试在 A 组件中初始化神策 SDK 并赋值给 app.sensorsDataSDK 后，在 B 组件中使用时偶尔会出现由于加载顺序问题导致 A 初始化神策的方法还没执行时 B 组件就开始调用了、从而发生报错导致无法使用。

 

那么问题来了，我们如果每个页面和组件都单独接入神策 SDK 文件的话无疑会增大小程序体积、且降低 SDK 配置的可维护性。

 

我们应当如何实现全局接入同一个初始化后神策 SDK 实例呢?

 

下面我就来介绍一下我的办法。

 

01 

解决思路

 

登录微搭低代码控制台：

https://console.cloud.tencent.com/lowcode

进入微搭的应用开发可视化编辑器，在编辑器左上角中可以找到【低代码编辑器】，在打开的低代码编辑器中可以设置全局的 lifecycle 内容，也就是全局生命周期。

 

 

这个文件的内容会在项目启动时加载，从而分别执行不同生命周期的方法。

 

但是此处不允许引入本地文件、那么我们就无法在此处使用神策提供的 sensorsdata.min.js 文件初始化神策 SDK 挂载给 app 对象了。并且由于此文件过大、整个源文件粘贴进来也不是个好办法。

 

纵观全局，只有组件可以引入本地文件，但组件又因为加载顺序的问题导致多个组件之间不能使用同一个神策 SDK 实例。只有全局 lifecycle 可以优先声明全局可用的内容，但又不能引入文件。

 

我的思路是：在全局 lifecycle 写一个异步方法用于获取 app 上的神策实例、在未拿到神策 SDK 实例之前都先不返回结果，然后神策 SDK 通过一个组件将实例挂载至 app 对象上面。这样其他的组件就都可以使用全局 lifecycle 中写的方法去获取神策 SDK，并且因为此方法在未得到实例之前都不会返回内容、所以不会遇到加载顺序问题导致报错。

 

02

解决方案

 

1、创建神策组件库，用于引入 sensorsdata.min.js 并初始化神策 SDK

 

 

 

2、关联组件库

在本地找一个文件夹执行 tcb lowcode create <组件库标识>

比如根据我前面新建组件库时的设置，我的命令就是 tcb lowcode create sensors

 

 

打开文件夹可以发现默认有 Button 组件和 showToast 动作，我们可以以此为样本进行修改、分别编写“神策 SDK”组件和“神策埋点”动作。

 

3、修改全局 lifecycle 实现延迟获取组件的方法

在所有生命周期代码的前面，加入图中的代码。此处为了防止其他组件一直等待神策 SDK 实例化，特地设计了一个延迟机制，超时后此方法会返回 null。

 

 

4、开发“神策 SDK”组件

将 configs/button.json 修改为 configs/sensors.json，并将其内容修改为神策 SDK 的描述信息。

 

 

将 mp/components/button 修改为 mp/components/sensors，在其中 index.js 中引入 sensorsdata.min.js 后初始化神策 SDK，并将初始化后的实例赋值给 app 对象里对应的字段。

 

 

 

6、发布组件库

进入到组件文件夹中执行 tcb lowcode publish。

 

03

使用方法

 

1、页面埋点

把“神策 SDK”组件拖放到需要接入神策 SDK 的页面，即可自动统计页面信息及各个生命周期的触发信息。

 

 

2、行为埋点

在需要埋点的元素添加对应的事件，选择前面创建的神策埋点动作即可自动触发，比如下方在某个元素触发 change 事件时执行埋点方法。

 

3、在其他组件中埋点

因为我们在全局 lifecycle 中基于 app 对象实现了 getSensorsDataSDK() 方法，因此我们在其他组件中也可以直接调用此方法，如下介绍两种调用方法。

a）Promise 风格调用方法

b）普通 await 调用方法

 

 

4、埋点调试

在小程序打开调试模式的时候，可以在 vConsole 中看到埋点方法被触发时的日志。

 

 

 

04

注意事项

 

1. 在使用埋点方法前，务必留意页面中是否已放入“神策 SDK”组件。可以在有埋点的页面中查看微搭编辑器的“大纲树”确认此组件是否有放入。

 

 

 

2、在小程序其他组件使用时，需要先通过 getApp() 方法获取全局 app 对象。

 

05

总结

 

本文以接入神策 SDK 的角度讲述目前可以在微搭中实现挂载全局实例的方法，其他的跨组件全局实例也同样可以使用本文中提到的办法实现。

如果有更好的解决办法，也希望大家可以多多讨论，集思广益。

更多产品了解

欢迎扫码加入云巴巴企业数字化交流服务群

产品交流、问题咨询、专业测评

都在这里！