[Huawei Developers] shikkerimath:
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.

View attachment 5327301

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.

View attachment 5327303

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.

View attachment 5327319

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.

View attachment 5327321

View attachment 5327323

5. Click OK to save the visual event.

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

View attachment 5327325

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.

View attachment 5327327

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.

View attachment 5327331

View attachment 5327333

* Data is for reference only.

To learn more about DTM, click here.

For more details, you can go to:

l Our Development Documentation page, to find the documents you need

l Reddit to join our developer discussion

l GitHub to download demos and sample codes

l Stack Overflow to solve any integration problems

Check out in forum