可视化埋点是指您可以将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. 新建代码模板,点击“新建”按钮,跳转至新建代码页面,填写代码信息后保存;
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429140623.93541941248060103293731339607361:50520608062935:2800:77EB0D5749A70B2335DD8F6389E0194DD3D879560D2C58D48D16EC445A757354.png)
代码名称:可自定义
扩展:选择Google Analytics(分析):Universal Analytics
跟踪ID:填写Google Analytics的唯一跟踪ID,格式为UA-XXXXXXXX-X
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429140635.18443527375251881649680646876770:50520608062935:2800:93BF2EE8A6B2573C43EDFCA8F638F00B6239B4C6006B92D81845FF891C7F3D34.png)
d. 使用移动浏览器扫描二维码,根据提示打开手机App
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429140652.72947220868654842983629846953892:50520608062935:2800:458E79B32C9AE1507167EDC55846E52F16E6826F72B176FDD87D2F5DE53594B5.png)
e. 连接成功后,手机App左下角会出现“蓝色浮动框”,同时手机App当前的页面会自动同步至Web端。打开“显示可圈选组件”开关后会以红色框展示出可添加埋点的组件。
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429140707.21403396931624851853894329932873:50520608062935:2800:9EB0751095FF45A42C5C369740D6DB4D4393568E28B8A69D386481B98108263D.png)
2. 添加元素埋点
下面将介绍对“加入购物车”按钮进行可视化埋点。
a. 点击“加入购物车”对应的红色框
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429140721.00953677914748202649952773039015:50520608062935:2800:89F2D34EC76D4724A5764A0780144B3689D097045F5C37810797CDCC7EBC7F7E.png)
b. 在弹出的“添加埋点”提示框中选择”当前位置”,点击确定;
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429141607.92907790381641347695014774840462:50520608062935:2800:AA89E0633C8D67FEC50498232D9B074F764C195B8D147F3FE58081AB8F590AC6.png)
c. 在页面右侧添加埋点的信息
埋点名称:填写“Add2Cart”
上报类型:选择“事件上报”
事件类别:填写“Click”
事件操作:填写“Add2Cart”
事件标签:通过右边的小手将产品描述对应的文本作为参数值
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429141621.56377807802697475628258830179069:50520608062935:2800:B6B53ADC02554737704113D32667BB78FF9E2E3834E292EFC53AEAD6A9D71B3E.png)
d. 点击确定按钮,保存埋点。
3. 预览草稿版本
a. 点击可视化埋点页面右上角的“预览”按钮,进入版本预览页面,可以预览当前工作区的配置(不需要创建DTM版本);
b. 扫描二维码开始预览。
4. 查看可视化埋点事件
在App中点击加入购物车按钮,触发上报可视化埋点事件,然后到Google Analytics上查看数据。
在导航栏中的“实时”->“事件”里面,查看最近上报的数据:
![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20210429141637.72811636241198045343699743476899:50520608062935:2800:7F15E8AA0E1593F5C27AC7EB970D729639E4F76E0F47F2A1579E0EA5C1743B6E.png)
可以看到上报的事件中,事件类别为“Click”,事件操作为“Add2Cart”,说明可视化埋点已生效。
详情请参考DTM可视化埋点操作流程。
欲了解HMS Core更多详情,请参阅:
>>华为开发者联盟官网
>>获取开发指导文档
>>参与开发者讨论请到CSDN社区或者Reddit社区
>>下载demo和示例代码请到Github或者Gitee
>>解决集成问题请到Stack Overflow
原文链接:https://developer.huawei.com/...
原作者:胡椒