动态标签管理服务

简介

使用动态标签管理器Dynamic Tag Manager（以下简称"DTM"），您可以从Web界面快速、安全、轻松地部署及更新标签配置，实现基于数据驱动的运营。

您将建立什么

在这个codelab中，您将使用已经创建好的Demo Project引用华为DTM配置好的动态标签，您可以体验到：

如何使用DTM上报用户事件。
如何利用Google Analytics的工具查看上报事件。

您将会学到什么

如何在AppGallery Connect上创建新的配置。
如何在网页中引用配置JavaScript脚本。
如何将事件上报到Google Analytics。

硬件要求

开发计算机（台式机或笔记本电脑），并可以连接互联网。

软件要求

文本编辑器，例如VS Code。
Google Chrome浏览器。
用于承载Demo示例网页的Web服务器。

需要的知识点

Web基础开发能力
DTM埋点能力

配置之前需要完成以下准备工作：

创建AppGallery Connect应用
创建Web网站

为了准确的上报Google Analytics的字段，需要申请跟踪ID，例如UA-000000-2，申请过程请参见设置 Google Analytics（分析）全局网站代码。
申请成功后，可以通过您的Google帐号，登录analytics.google.com，观察上报的数据。
为了方便调试，您可以使用Chrome浏览器的Tag assistant插件。安装后，在Chrome浏览器工具栏右侧将出现的按钮。

Demo实现

开通服务

登录AppGallery Connect网站，点击"我的项目"图标。
选择需要查看的动态标签管理数据的应用。
选择"增长 > 动态标签管理"进入开通服务页面。点击"开通服务"按钮来开通动态标签管理服务。
在弹出的窗口中设置"配置名称"，修改"操作记录"的储存时间。
当配置完成后，点击"确定"按钮，进入"配置"页面，提示安装DTM-WEB端跟踪代码。
创建成功后，在"配置"界面中可以查看到已创建的配置。
将DTM-WEB端跟踪代码复制到Demo页面<head>部分中，并使其靠近最顶部位置，以便及时生效代码。示例如下：
启动Web服务（如果没有合适的Web服务，请参见"软件要求"中的相关说明）。

创建变量

在"工作区"下的"变量"页面，点击"配置"按钮。
在弹出的"配置预设变量"页面中，选中待创建的预设变量，点击"确定"。
在"变量"页面，点击"新建"按钮，创建自定义变量GA，设置"变量类型"及其他配置项，并点击"保存"。

创建条件

在"工作区"下的"条件"页面，点击"新建"按钮。
在"新建条件"页面中输入"条件名称"，选择"条件类型"并输入对应的参数。
若选定条件类型后并设置触发条件为"部分"事件，此时依次选择"此条件的触发条件"的变量和操作符，并填写触发条件需要的属性值。如果需要填写多个触发条件，点击"添加"按钮可增加条件输入框。
填写完成后，点击"保存"。

创建代码

在"工作区"下的"代码"页面，点击"新建"按钮。
在"新建代码"页面中输入"代码名称"，选择代码扩展类型并输入对应的参数，并设置"触发条件"和"例外条件"，设置完成后，点击"保存"按钮。
- 触发条件：满足时将上报事件至分析平台。
- 例外条件：满足时将阻止事件上报。

创建版本

选择"工作区"页签，点击"创建版本"按钮。
在"创建版本"页面输入版本名称和描述后，选择"创建版本"或"创建并发布此版本"，点击"确定"。

发布版本

在"版本"页面，点击对应版本名称，进入版本详情页面。
在"版本详情"页面，点击"发布"，在弹出的"发布"页面点击"确定"。

触发事件

在Chrome浏览器地址栏中输入Demo页面的网址，按"Enter"键加载。
在Chrome浏览器中启动Tag Assistant（即点击浏览器工具栏的），点击"Enable"。
刷新网页，点击网页中"click here"按钮，以触发代码执行。点击浏览器工具栏上的"Tag Assistant"（即），您将看到如下信息，说明事件已触发并上报。

展示上报事件

触发成功后，请用浏览器输入网址：https://analytics.google.com，在左侧菜单选择"Realtime > Events"。
查看如上触发并上报的Events事件。

干得好，您已经成功完成了codelab并学到了：

如何在AppGallery Connect上创建动态标签配置。
如何集成配置脚本到具体的Web页。
如何将事件上报到Google Analytics。

您可以阅读下面链接，了解更多相关的信息。

相关文档
本codelab中的Demo源码下载地址如下：

Web项目源码下载

Code copied