剩余
1. 介绍
简介
使用动态标签管理器Dynamic Tag Manager（以下简称"DTM"），您可以从Web界面快速、安全、轻松地部署及更新标签配置，实现基于数据驱动的运营。
您将建立什么
在这个codelab中，您将使用已经创建好的Demo Project引用华为DTM配置好的动态标签，您可以体验到：
- 如何使用DTM上报用户事件。
- 如何利用Google Analytics的工具查看上报事件。
您将会学到什么
- 如何在AppGallery Connect上创建新的配置。
- 如何在网页中引用配置JavaScript脚本。
- 如何将事件上报到Google Analytics。
2. 您需要什么
硬件要求
开发计算机（台式机或笔记本电脑），并可以连接互联网。
软件要求
- 文本编辑器，例如VS Code。
- Google Chrome浏览器。
- 用于承载Demo示例网页的Web服务器。
需要的知识点
- Web基础开发能力
- DTM埋点能力
4. 打开相关服务
- 为了准确的上报Google Analytics的字段，需要申请跟踪ID，例如UA-000000-2，申请过程请参见设置 Google Analytics（分析）全局网站代码。
- 申请成功后，可以通过您的Google帐号，登录analytics.google.com，观察上报的数据。
- 为了方便调试，您可以使用Chrome浏览器的Tag assistant插件。安装后，在Chrome浏览器工具栏右侧将出现
的按钮。
5. 操作步骤
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事件。
6. 恭喜您
干得好，您已经成功完成了codelab并学到了：
- 如何在AppGallery Connect上创建动态标签配置。
- 如何集成配置脚本到具体的Web页。
- 如何将事件上报到Google Analytics。