文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

小程序可视化埋点接入手册

更新时间：2023/03/07 访问次数：9277

小程序应用在使用可视化埋点配置的时候，需要按照本文提供的规范，为可能埋点的组件进行打标绑定。

一、接入流程（前期准备）

1. 组件绑定

请看下图，是实际在进行可视化埋点配置操作的截图，可以看到中间部小程序页面投屏操作区内有蓝色的线框，这个蓝色的线框就是接入的过程中事先做了组件绑定，我们才能识别出哪些组件区域是可以被选中进行埋点配置的。

20200409114217.jpg

 

为什么要做组件绑定？组件绑定的意义在于，需要在进行可视化配置的时候，告诉可视化脚本哪些组件是需要进行配置和埋点上报的。目前可视化脚本依据组件的【data-tracker属性】、【Css选择器】、【XPath】进行识别，识别后会在可视化配置操作区域里展列出来，供用户圈选配置。data-tracker属性、Css选择器、XPath路径的稳定程度从高到低依次是：data-tracker属性 > Css选择器 > XPath路径。（注意，由于XPath每次在页面发版之后会改变，导致曾经的埋点配置失效，因此XPath目前已经被下线）。

下面重点介绍每一种组件绑定的原理和规范：data-tracker：

1）手动写代码的绑定方式，但组件与配置的绑定关系稳定性高。

① key：data-tracker；值：由字母、数字、-或_组成。（如果一个页面里有多个组件都绑定了相同的data-tracker属性，则表示这些组件都是共用相同的埋点配置，上报相同的埋点，但采集脚本会自动在位置属性里加入index值来区分）

② 添加绑定的位置：哪个组件需要进行埋点，就在它上面加“data-tracker”属性，来标识和定位这个组件。示例如下：

<div data-tracker="12345">元素 <!-- 该元素可进行可视化配置，且无其他元素共享 -->  <span><img src="a.png"></span>  <span><img src="b.png"></span>  <span><img src="c.png"></span> </div> <div>  <span data-tracker="67890"><img src="a.png"></span><!-- 该3个元素可进行可视化配置，且这3个元素共享一份配置内容 -->  <span data-tracker="67890"><img src="b.png"></span>  <span data-tracker="67890"><img src="c.png"></span> </div>

2）Css选择器，例如id和className等标准CSS Selector：无需写代码的绑定方式，但组件与配置的绑定关系稳定性中。我们正在探索组件上的固有业务属性，例如id、className等属性来做绑定，可进一步降低开发同学的接入成本，因为开发同学可以不用在组件上去写入其他额外的属性了。如果需要埋点的组件可以通过Css选择器来定位的话，可以直接进入下面的【埋点配置】。

2. 设置参数

上报埋点的时候，对于有些场景，我们是会在埋点内设置参数来做一些业务的数据分析，在可视化埋点中，我们的埋点是基于配置进行自动化上报的，上报的同时，采集脚本如何获取参数的值，又如何放到埋点内上报呢？首先，需要事先将参数放入到一个地方，供采集sdk获取并上报。我们现在支持将参数放到组件内，当这个组件需要上报埋点的时候，可以直接获取该组件下的参数内容。

1）data-tracker-params：手动写代码的绑定方式。

① key：data-tracker-params；值：JSON结构，用户可以将自定义的参数key和value设置到这个JSON里面。

② 在埋点配置过程中，当用户为这个组件进行埋点配置的时候，通过新增参数，并且设置成“Dom节点中获取”，采集脚本就会在这个组件内的“data-tracker-params”属性里获取到参数值并上报了。示例如下：

<div data-tracker="12345">元素 <!-- 该元素可进行可视化配置，且无其他元素共享 -->  <span><img src="a.png"></span>  <span><img src="b.png"></span>  <span><img src="c.png"></span> </div> <div>  <span data-tracker="67890" data-tracker-params="{/"key1/":/"value1/"}"><img src="a.png"></span><!-- 该3个元素可进行可视化配置，且这3个元素共享一份配置内容 -->  <span data-tracker="67890"><img src="b.png"></span>  <span data-tracker="67890"><img src="c.png"></span> </div>

二、埋点配置

下图是为一个小程序页面内的组件配置点击、曝光埋点的示例：

小程序可视化.gif

1. 进入可视化埋点页面进行配置

如何进入可视化埋点配置？进入到您需要进行埋点的开放平台小程序管理页内，左侧菜单“埋点管理”->“可视化埋点列表”->“进入可视化埋点配置”，使用您手上的手机，打开小程序所在的应用，通过扫描二维码进入。

20200302135902.jpg

1.1 事件配置

1.1.1 事件（即页面浏览、点击或曝光等类型的事件）配置所包含的内容

1）我们会监听小程序应用内每一个新页面的开启，来让用户依次配置每个页面下的页面浏览和点击、曝光等事件。

2）事件的基本信息设置，例如事件名称和对应的事件编码。

3）事件所在位置的区块编码和位置编码。

4）事件类型，页面浏览、点击或曝光、下拉刷新等。

5）事件上报时，需要附带的业务参数。

1.1.2 页面浏览事件配置

1）一个小程序应用由多个页面组成，我们会监听每一个页面的开启，用户可以一个页面一个页面的进行切换和配置。

2）每次监听到有页面打开后，可视化配置面板的右上角“当前子页面”会新增选项页，表示新的页面被识别到了。

① 用户切换到新的页面义参数。的时候，会自动弹出页面的配置页。

② 配置自定义参数。

配置项 说明
事件名称 即页面事件的中文名称。
事件描述 即页面描述。
参数 当页面浏览事件发出时，即带上配置的参数，支持1种参数类型供获取参数值的方法：1）静态值——一个固定kv值；参数名称 - 上传的固定Key；上报名称 - 上报的固定值。
位置属性 即代表页面的唯一编码，可以手动设置或者勾选系统生成，我们会自动帮你注册好，当页面真实运行的时候，会依据此处的配置进行上报。

1.1.3 点击、曝光等事件配置

1）当前页面下所有带 data-tracker 属性的组件会被自动识别并持续高亮；

2）鼠标hover当前页面下的组件，能被Css选择器选中的组件也会被识别并高亮；

3）点击高亮的圈选框，可弹出配置表单。

配置项 说明
事件名称 即事件的描述。
事件编码 即事件的唯一标识，我们会自动生成，用户可以根据业务场景修改。
事件类型 选择埋点设置时： 1）勾选曝光：上报曝光埋点事件。 2）勾选点击：上报点击埋点事件。
事件描述 即事件的描述
传递参数 上报对应点击/曝光埋点事件时会带上配置的参数，支持2种参数类型供获取参数值的方法：1）Dom节点属性——当前所选元素节点上所带的属性；选择某一个属性 - 该属性的内容为实际上报的内容；上报名称 - 实际上报的key值。2）静态值——一个固定kv值；参数名称 - 上传的固定Key；上报名称 - 上报的固定值。
位置属性 区块，默认选择自动获取，则系统会默认生成一个区块编码，也可以自己设置，内容格式支持：数字、字母、- 或 _。坑位，默认选择自动获取，则系统会默认生成一个位置编码，也可以自己设置，内容格式支持：数字、字母、- 或 _。

1.2 配置的本地验证

配置完成之后，可以使用“本地验证”功能来验证当前的埋点配置是否符合预期，是否正确。由于该配置处于本地环境，因此不会对线上页面产生影响。

1）点击“查看埋点验证日志”，进入埋点验证模式，在该模式下，埋点配置被禁用，仅支持页面正常的流量点击等操作。

2）浏览和操作小程序内的页面，触发埋点上报。

3）查看上报的日志明细来验证埋点情况。

4）点击“返回可视化埋点管理”退出验证模式。

1.3 配置的发布和版本控制

配置发布上线后，埋点配置则在线上页面生效，当用户浏览页面的时候，采集脚本会依据线上的埋点配置进行埋点上报。

1.3.1 配置发布

1）点击右上角“发布”按钮，弹出发布窗口；

2）选择本次发布生效的版本，只能选择当前配置的小程序应用的版本号；

3）确认本次发布埋点列表（本次新增、本次修改、本次删除）；

4）发布。

1.3.2 版本管理

1）埋点管理页，点击“可视化配置版本管理”，进入配置版本管理页面；

2）选择对应的页面，显示版本列表；

3）可以对某一个在线的版本进行下线操作，或者已下线的配置进行重新上线操作。

2. 小程序模板的可视化埋点配置

2.1 小程序模板自身的可视化埋点配置

配置方式与普通小程序应用一致。

2.2 小程序模板实例化的可视化埋点配置

1）非草稿的配置，会有“复制并发布”按钮，表示给模板某个版本对应的实例化的小程序进行可视化配置的复制并发布。

2）点击“复制并发布”按钮，弹出复制和发布浮层，用户需要选择一个模板的版本，来将模板的可视化配置复制到这个模板版本对应的实例化小程序应用内。这个复制和发布，既给模板自己复制和发布，也给模板对应的实例化小程序应用进行配置和发布。

3）如果该模板已经复制到实例化小程序，该模板的配置下线同时也会同时给小程序的配置进行下线。

2.3 查看实例化小程序应用列表

用户可以查看该小程序模板某一个确切的版本已经实例化的小程序应用有哪些，同时可以查看小程序应用的可视化配置的复制和发布进展。

三、版本历史/Version History

版本号/Version 提交日期/Update Date 提交人/Submitted by 版本注释/Comments
Ver 2.3 2020-04-09 晏紫/Yanzi 更新文档，简化描述
Ver 2.2 2020-04-08 晏紫/Yanzi XPath方案下线

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号