How to Use Visual Event Tracking of DTM Web to Report Events to Google Analytics

4 min readJun 1, 2021

The click-through rate of a web page is a critical indicator for operations personnel to understand user behavior and analyze which product content users are interested in. However, tracking events of web pages requires a lot of technical skills — skills which most operations personnel or beginners may not have. In addition, modifying tracking events can also be time consuming and difficult process. There is therefore a need to visualize and simplify event tracking, and prevent the need to frequently release new website versions when events to report are added, reduced, or modified, which has a negative impact on user experience.

This article illustrates how to use the tag template-based visual event tracking feature of DTM Web to report events in your website to Google Analytics. The following uses the example of reporting events about user’s viewing of HUAWEI Mate series product details to Google Analytics, to obtain information such as the click-through rate.

Prerequisites

1. You have created an AppGallery Connect account and signed in to it by visiting the following URL address:

https://developer.huawei.com/consumer/en/service/josp/agc/index.html

2. You have created a web app and its DTM configuration.

3. You have created your website and integrated the DTM configuration script into it. To integrate the DTM configuration script, perform the following:

a. Click the Configuration tab and then View in the DTM portal.

b. Copy the code snippet below and paste it to the top of the <head> section of each web page to track, so that the code snippet takes effect in a timely manner.

Accessing the Visual Event Tracking Page

1. Click the Visual event tab in the DTM portal.

2. Click Visual event tracking by tag template in the upper right corner.

3. Click Create in the Select tag template area, set relevant parameters as follows, and click Save.

a. Enter a tag name.

b. Set Extension to Google Analytics: Universal Analytics.

c. Enter the tracking ID. (The ID is obtained from Google Analytics, and is in UA-xxxxxxxxx-x format.)

d. Use default values for other parameters.

4. Select the created tag template, and click Start in the Add area on the right.

Adding a Visual Event

1. On the Add visual event page displayed, click Add on the right.

2. Select Button or link under Select element for visual event addition. (This option is selected by default.)

3. Select the Detail button under HUAWEI Mate Series on the left page.

Click OK in the displayed dialog box asking you whether to select elements of the same type.

4. Configure visual event information.

a. Enter a visual event name.

b. Set Tracking type to Event.

c. Set Event type to {{Event}} (reference to the preset variable Event).

d. Set Event operation to Detail. (Click the hand icon next to Event type and select Detail under HUAWEI Mate Series as a same-type element parameter.)

e. Set Event label to HUAWEI Mate Xs. (Click the hand icon next to Event label and select a product name under HUAWEI Mate Series as a same-type element parameter.)

f. Use default values for other parameters.

5. Click OK to save the visual event.

6. Click the

icon on the right of a visual event to expand it.

7. Click the

icon in the upper left corner to exit the visual event tracking page.

Creating and Releasing a Version

1. Click Create on the Version tab page.

2. On the Create version page, enter a version name and description.

3. Select Create and release version.

4. Click OK.

Triggering a Visual Event

1. Refresh the tested website and download the latest DTM configuration.

Note: By default, the DTM JavaScript SDK downloads the latest DTM configuration to the cache every 15 minutes. To download the latest DTM configuration immediately, disable the browser cache and refresh the tested website again.

2. Click any Detail button under HUAWEI Mate Series.

Viewing Reported Data on Google Analytics

Go to Realtime > Events and view the latest reported data.