Overview

With Dynamic Tag Manager (DTM), you can deploy and update your tag configuration easily and securely on a web-based UI, and realize data-driven operations.

What You Will Create

In this codelab, you will reference dynamic tags created on HUAWEI DTM in the demo project and experience how to:

What You Will Learn

In this codelab, you will learn how to:

Hardware Requirements

A (desktop or laptop) computer that can connect to the Internet

Software Requirements

Required Knowledge

Before configuration, you must complete the following preparations:

Implementing the Demo App

Enabling Required Services

  1. Sign in to AppGallery Connect and click My projects.
  2. Find your app project, and click the desired app name.
  3. Go to Grow > Dynamic Tag Manager and click Enable Dynamic Tag Manager to enable DTM.
  4. In the dialog box displayed, enter a configuration name, and set Operation record.
  5. Click OK. The Configuration page is displayed, asking you to install the DTM-Web tracking code snippet.
  6. View the created configuration on the Configuration page.
  7. Copy the tracking code snippet to the top of the page <head> block so that it can take effect immediately. The screenshot below shows an example.
  8. Start your web server. (If you do not have a proper web server, please refer to Software Requirements.)

Creating a Variable

  1. Go to Workspace > Variable, and click Configure.
  2. On the Configure preset variable page displayed, select the preset variable to be created and click OK.
  3. Click Create on the Variable page. On the Create custom variable page displayed, enter GA in the Name text box, set Type and other parameters, and click Save.

Creating a Condition

  1. Go to Workspace > Condition, and click Create.
  2. On the Create condition page displayed, enter a condition name, select a condition type, and set other related parameters.
  3. Set Variable, Operator, and Value for a trigger if you select a condition type and set Trigger to Some xx (for example, Some clicks). You can click Add to add multiple triggers.
  4. Click Save.

Creating a Tag

  1. Go to Workspace > Tag, and click Create.
  2. On the Create tag page, enter a tag name, select a value for Extension and set related parameters, set Trigger condition and Exception condition, and click Save.
    • When the specified trigger condition is met, events will be reported to the analytics platform.
    • When the specified exception condition is met, events will be blocked and not be reported to the analytics platform.

Creating a Version

  1. Click the Workspace tab and then click Create version.
  2. On the Create version page displayed, enter a version name and description, select Create version or Create and release version, and click OK.

Releasing a Version

  1. On the Version tab page, click a version name to go to the Version details page.

  2. Click Release, and then click OK on the Release page displayed.

Triggering an Event

  1. Open the Chrome browser, enter the demo web app URL in the browser address box, and press Enter.
  2. Click in the toolbar of the Chrome browser to start Tag Assistant, and click Enable.
  3. Refresh the web page, click the click here button to trigger tag execution, and click the Tag Assistant icon in the browser toolbar. If information in the screenshot below is displayed, the relevant event has been triggered and reported.

Viewing the Reported Event

  1. Sign in to Google Analytics and go to Realtime > Events on the left.
  2. View the reported event on the Events page.

Well done. You have successfully completed this codelab and learned how to:

For more information, please click the following link:

Related Documents
You can click the button below to download the source code:

Sample Code for Web Projects

 Code copied