Web页面如何进行可视化埋点（一）

时间 2021-05-25

标签 html web 浏览器缓存并发 ide 测试优化网站栏目 HTML 繁體版

原文原文链接

埋点是一种采集、处理用户行为或事件的一种技术，如今广泛用于用户行为分析、数据处理，助力产品经理、运营人员、数据分析师精准采集分析用户行为，创建用户画像，进行产品分析和优化。然而，手动埋点技术门槛高、工做量大、开发周期长。html

动态标签管理服务（简称“DTM”）埋点功能应运而生。目前针对Web页面的数据采集及分析，DTM提供多种埋点的方案，分别是普通埋点、按Tag埋点、结合华为分析跳转埋点。web

本文将详细介绍普通埋点的方式及具体操做教程。浏览器

前提条件

1) 建立AGC帐号并登陆：缓存

2) 建立Web应用以及DTM配置。ide

3) 建立本身的web网站并集成DTM配置脚本。测试

a. 您可点击“配置管理”，而后点击“查看”按钮来获取导入脚本。优化

b. 复制以下代码片断并将其拷贝到网站上每一个须要配置代码的网页的<head>部分中，并使其靠近最顶部位置，以便及时使代码生效。网站

普通埋点
一个埋点条件能够应用于多个三方平台的触发条件，适合须要对埋点条件和参数灵活调用的场景。

1.1创建可视化链接
1) 选择“可视化埋点”页签，进入可视化埋点。ui

2) 点击页面的 “开始埋点”。

1.2添加埋点
1) 系统跳转至“添加埋点”页面，点击右侧的“添加埋点”按钮。

2) 元素类型默认“按钮或连接”。

3) 选择左侧页面HUAWEI Mate系列模块的“查看详情”按钮。

您是否要选择同类元素？ - 肯定

4) 配置埋点相关信息

a) 输入“名称”。

b) 添加参数：小手选择“HUAWEI Mate Xs”，输入参数名称

c) 触发事件：“指定页面”“URL等于”https://XXXXXX.XXX。

5) 点击“肯定”保存埋点。

6) 查看埋点：点击埋点右侧的“∨”图标展开埋点。

7) 退出链接：点击页面左上角“‹”退出可视化链接。

1.3添加代码
1）点击“代码管理”。

2）添加代码扩展类型，触发条件选择“Mate系列详情查看”

3）点击“肯定”。

3）点击“保存”。

1.4建立及发布版本
1) 进入“版本管理”页面，点击“新建”按钮。

2) 在“建立版本”页面输入版本名称和描述。

3) 选择“建立并发布此版本”选项。

4) 点击“肯定”。

1.5触发可视化事件
1) 下载新版本：在浏览器中刷新测试网站下载最新的DTM配置

注：默认状况下，DTM JSSDK下载最新版本的缓存时间间隔是15分钟，若是想要当即下载最新版本，能够禁用浏览器缓存，并从新刷新测试网站。

2) 点击HUAWEI Mate系列模块中任一“查看详情”按钮。

3) 在对应的三方平台上查看数据。

更多关于动态标签管理服务请点击>>

欲了解HMS Core更多详情，请参阅：

华为开发者联盟官网

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

原文连接：https://developer.huawei.com/...原做者：胡椒