可视化埋点是指您可以将 App界面同步至 Web端，并在 Web端通过可视化点击的方式添加埋点事件，相比于手动埋点，可视化埋点有以下优势：

•  研发人员仅需要完成 SDK集成，免去手动添加埋点的开发成本。

•  技术门槛低，可以直接在 Web界面上点击添加埋点事件，适合运营人员直接使用。

•    在应用发布后仍然可以灵活的添加埋点事件，解决前期埋点不充分的问题。

接下来介绍如何在通过 DTM进行可视化埋点，并将可视化埋点事件上报到 Google Analytics：

前提条件 ：

1.      创建 AGC账号并登录：

https://developer.huawei.com/consumer/cn/service/josp/agc/index.html

2.      创建 Android应用以及 DTM配置；

3.      应用已集成 DTM SDK。

操作步骤 ：

1.      建立可视化埋点连接

a.      点击“可视化埋点”页签，进入可视化埋点页面

b.      点击右上角“按 Tag模板埋点”跳转至 Tag模板页

c.      新建代码模板，点击“新建”按钮，跳转至新建代码页面，填写代码信息后保存；

代码名称 ：可自定义

扩展 ：选择 Google Analytics（分析）： Universal Analytics

跟踪 ID ：填写 Google Analytics的唯一跟踪 ID，格式为 UA-XXXXXXXX-X

d.      使用移动浏览器扫描二维码，根据提示打开手机 App

e.      连接成功后，手机 App左下角会出现“蓝色浮动框”，同时手机 App当前的页面会自动同步至 Web端。打开“显示可圈选组件”开关后会以红色框展示出可添加埋点的组件。

2.      添加元素埋点

下面将介绍对“加入购物车”按钮进行可视化埋点。

a.      点击“加入购物车”对应的红色框

b.      在弹出的“添加埋点”提示框中选择 ”当前位置 ”，点击确定；

c.      在页面右侧添加埋点的信息

埋点名称：填写“ Add2Cart”

上报类型：选择“事件上报”

事件类别：填写“ Click”

事件操作：填写“ Add2Cart”

事件标签：通过右边的小手将产品描述对应的文本作为参数值

d.      点击确定按钮，保存埋点。

3.      预览草稿版本

a.      点击可视化埋点页面右上角的“预览”按钮，进入版本预览页面，可以预览当前工作区的配置（不需要创建 DTM版本）；

b.      扫描二维码开始预览。

4.      查看可视化埋点事件

在 App中点击加入购物车按钮，触发上报可视化埋点事件，然后到 Google Analytics上查看数据。

在导航栏中的“实时” ->“事件”里面，查看最近上报的数据：

可以看到上报的事件中，事件类别为“ Click”，事件操作为“ Add2Cart”，说明可视化埋点已生效。

详情请参考 DTM 可视化埋点 操作流程。

欲了解 HMS Core 更多详情，请参阅：
>> 华为开发者联盟官网

>> 获取开发指导文档
>>参与开发者讨论请到 CSDN社区 或者 Reddit 社区
>>下 载demo 和示例代码请到 Github 或者 Gitee
>>解决集成问题请到 Stack Overflow

原文链接： https://developer.huawei.com/consumer/cn/forum/topic/0201550884317730195?fid=18

原作者：胡椒