【DTM】Visual Event Tracking for Web Pages (Two) - Huawei Developers

In the previous article, we discussed the common visual event tracking function of DTM. In this article, I'll introduce how to use tag template-based visual event tracking.
What Is Tag Template-based Visual Event Tracking?​Tag template-based visual event tracking adds visual events based on a tag template that is preset for a third-party analytics platform, and is a convenient way to report events to a fixed third-party analytics platform.
1.1 Accessing the Visual Event Tracking Page​Here, Google Analytics is used as an example. Perform the following:
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.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1.2 Adding Visual Events​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.
1.3 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.
1.4 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.
3. View reported data on Google Analytics.
To learn more about DTM, click here.
For more details, you can go to:
Reddit to join our developer discussion
GitHub to download demos and sample codes
Stack Overflow to solve any integration problems
Original Source