简介

使用华为动态标签管理器Dynamic Tag Manager(DTM),您可以从Web界面快速、安全、轻松地部署及更新标签配置,实现基于数据驱动的运营。

您将建立什么

在这个Codelab中,你将使用已经创建好的Demo Project 引用华为Dynamic Tag Manager配置好的动态标签,你可以体验到:

您将会学到什么

硬件要求

软件要求

配置之前需要相关的准备工作:

Demo实现

创建配置

  1. 登录AppGallery Connect网站,点击"我的项目"图标。
  2. 选择需要查看的动态标签管理数据的应用。
  3. 点击"增长 > 动态标签管理"进入创建配置页面,创建配置需要您首先点击"开通分析服务"按钮,开通分析服务。
  4. 如果您已经开通分析服务,那么您可以直接点击"创建配置"按钮,通过创建配置来设置配置名称,网址以及修改操作记录储存时间。
  5. 当您配置完成后,点击"确定"按钮,进入"配置管理"页面,提示您安装DTM-WEB端跟踪代码。
  6. 创建成功后,您可以在"配置管理"界面中查看到已创建的配置。
  7. 将DTM-WEB端跟踪代码复制到Demo页面<head>部分中,并使其靠近最顶部位置,以便及时使代码生效。示例如下:
  8. 启动Web服务(如果您没有合适的web服务,请参考"软件要求"中的说明)。

创建变量

  1. 在"变量管理"页面,点击"配置"按钮。
  2. 在弹出的"配置预设变量"页面中,选中待创建的预设变量,点击"确定"。
  3. 在"变量管理"页面,点击"新建"按钮,创建自定义变量ga,设置变量类型及跟踪ID,并单击"保存"。

创建条件

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

创建代码

  1. 在"代码管理"页面,点击"新建"按钮。
  2. 在"新建代码"页面中输入代码名称,选择代码扩展类型并输入对应的参数。
  3. 在"新建代码"页面中设置代码的"触发条件"和"例外条件"。
    • "触发条件"满足时将上报事件至分析平台。
    • "例外条件"满足时将阻止事件上报。
  4. 设置完成后,点击"保存"按钮。

创建版本

  1. 进入"版本管理"页面,点击"新建"按钮。
  2. 输入版本名称及版本描述创建版本,点击"确定"。

发布版本

  1. 在"版本详情"页面,点击"发布"按钮。
  2. 确认对话框中待发布版本信息后,点击"确定"按钮。
  3. 发布成功后,在"版本管理"页面会展示在线版本及发布时间。

触发事件

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

  5. 触发成功后,请用浏览器输入网址:https://analytics.google.com,并点击左侧菜单"Real-Time"下的"Events"。
  6. 您将看到刚才触发并上报的Events事件。

干得好,您已经成功完成了Codelab并学到了:

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

本Codelab中的demo源码下载地址如下:

Web项目源码下载

已复制代码