Event tracking is a technology for collecting and processing user behavior data or events, and is widely used for user behavior analysis and data processing. It helps product managers, operations personnel, and data analysts to precisely collect and analyze user behavior data, create user profiles, as well as analyze and optimize products. However, manual event tracking has high requirements in terms of technical skills, as well as requiring a huge workload and a long development period.
The visual event tracking function of Dynamic Tag Management (DTM) was created to deal with such issues. DTM provides multiple solutions for tracking visual events of web pages: common visual event tracking, tag template-based visual event tracking, and visual event tracking by HUAWEI Analytics.
This article will illustrate how to use common visual event tracking.
Prerequisites1. You have created an AppGallery Connect account and signed in to it by visiting the following URL address, click here
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.
{
"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"
}
Common Visual Event TrackingA visual event can be used as the trigger condition for reporting events to multiple third-party analytics platforms. This is applicable to scenarios where visual events and parameters need to be adjusted flexibly.
1.1 Accessing the Visual Event Tracking Page 1. Click the Visual event tab in the DTM portal.
2. Click Start on the page displayed.
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. Click the hand icon, select HUAWEI Mate Xs, and enter a parameter name to add a visual event parameter.
c. Set Triggered on to Specified pages, and add the URL rule URL Equals https://XXXXXX.XXX.
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 Adding a Tag 1. Click the Tag tab.
2. Select a tag extension template, and set Trigger condition to MateSeriesView.
3. Click OK.
4. Click Save.
1.4 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.5 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 the specified third-party analytics platform.
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
Related
Overview
In this article, I will create a demo game and integrate Huawei Analytics Kit. A developer can keep keen eyes on application usages and easily track the events such as installation and other custom events.
Service Introduction
Analytics Kit collects a user’s activity and usage of an application so that developer can analyze the user’s behaviour based on the app event.
Analytics Kit offers a rich array of preset analytics models (Event, Behaviour, Audience, Funnel, Retention, Real-Time) that help you to gain an in-depth insight into your users, products, and content. With this insight, you can then take a data-driven approach to make informed decisions for product and marketing optimizations.
HUAWEI Analytics Kit identifies users and collects statistics on users by an anonymous application identifier (AAID). The AAID is reset in the following scenarios:
1) Uninstall or reinstall the app.
2) The user clears the app data.
After the AAID is reset, the user will be counted as a new user.
There are 3 types of events: Automatically collected, predefined, and custom.
Automatically collected events are collected from the moment you enable the kit in your code. Event IDs are already reserved by HUAWEI Analytics Kit and cannot be reused.
Predefined events include their own Event IDs which are predefined by the HMS Core Analytics SDK based on common application scenarios. The ID of a custom event cannot be the same as a predefined event’s ID. If so, you will create a predefined event instead of a custom event.
Custom events are the events that you can create for your own requirements.
Prerequisite
1. Unity Engine (Installed in the system)
2. Huawei phone
3. Visual Studio 2019
4. Android SDK & NDK (Build and Run)
Integration process
1. Sign In and Create or Choose a project on AppGallery Connect portal.
{
"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"
}
2. Navigate to Project settings and download the configuration file.
3. Enable Analytics Kit from Manage APIs section.
Game Development
1. Create a new game in Unity.
2. Now add game components and let us start game development.
3. Download HMS Unity Plugin from below site.
https://github.com/EvilMindDevs/hms-unity-plugin/releases
4. Open Unity Engine and import the downloaded HMS Plugin.
Choose Assets > Import Package> Custom Package
5. Choose Huawei > App Gallery.
6. Provide the AppId and other details from agconnect-service.json file and click configure Manifest.
For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204447943331070086
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 PageHere, 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 Events1. 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 Version1. 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 Event1. 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
In the previous articles, we discussed common visual event tracking and tag template-based visual event tracking. In this article, I'll be introducing you to visual event tracking by HUAWEI Analytics.
What Is Visual Event Tracking by HUAWEI Analytics?This mode is used to add visual events for scenarios where HUAWEI Analytics is used. HUAWEI Analytics creates visual event tracking templates based on common industry scenarios. This mode is applicable to scenarios where analysis reports are viewed on HUAWEI Analytics.
1.1 Accessing the Visual Event Tracking Page1. Go to HUAWEI Analytics > Intelligent data access > Tracing by coding, and click Visual tracking next to a report.
2. In the dialog box displayed, select an app to add visual events, and click Set tracing event. The Visual event page in DTM will be displayed.
3. Select the tag template automatically generated in the Select tag template area on the left. In the Add area on the right, confirm the website URL for adding visual events and click Start.
{
"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 Events1. On the Add visual event page displayed, click Add on the right.
2. Select the element type for adding visual events.
3. Select an element on the left page. If the element is of the same type as other elements, a dialog box will be displayed.
If you click OK, all elements of the same type will be selected. If you click Cancel, only the current element is selected.
4. On the Add visual event page, select a visual event name from the Name drop-down list box.
Options for Name come from the report template in HUAWEI Analytics, and cannot be added or modified.
5. In the Parameter area, set Value for each Key, and click OK.
Options in the Key drop-down list box come from the report template in HUAWEI Analytics, and mandatory options cannot be deleted or modified.
6. (Optional) Click relevant icons next to an added visual event to pause, edit, delete, and view details about the visual event as needed.
1.3 Creating and Releasing a Version1. 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 Event1. 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 HUAWEI 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
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.
{
"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"
}
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 on the icon 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.
* 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
This article describes how to configure conversion tracking for landing pages.
First, let's see what conversion tracking for landing pages is.
When a user clicks an ad and is redirected to a specified page, user actions on this page are conversions that can be tracked.
Take Vmall as an example. After a user clicks an ad to access a product details page in Vmall, you can track the user's conversion actions, such as adding products to the shopping cart and purchasing products, on this page.
Next, let's take a look at how to configure conversion tracking for a landing page of an ad and view the conversion data.
Assume that you need to track add-to-cart events on a product details page, and the page URL is as follows:
https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094
Step 1 Create a conversion in HUAWEI Ads.
1. Sign in to HUAWEI Ads.
2. Create a conversion for the preceding landing page.
Go to Tools > Delivery assistance > Conversion tracking and click New conversion tracking.
{
"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"
}
On the page that is displayed, select Lead tracking and click Continue.
Set Conversion name, Landing page URL, and Conversion actions, and use the default values for Click attribution window and Display attribution window.
In this case, set Landing page URL to
https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html#/goods/6096094
Click Next. The message "Submitted successfully." is displayed. Copy the generated conversion ID on the displayed page, which will be used later.
3. View the status of the created conversion. The conversion will not be activated until the testing is successful.
Once you have completed the preceding operations, a conversion is created for the landing page.
Step 2 Create a configuration in DTM.
Configure the tracking code for the Add To Cart button on the landing page. The following configuration methods are provided in DTM:
Common event tracking
Visual event tracking in common mode
Visual event tracking by tag template (recommended)
1. Configure event tracking in common mode.
(1) Obtains the CSS selector path of the Add To Cart button on the web page.
Open the web page, right-click the Add to Cart button, and choose Inspect.
The selector path of the button element is selected. Right-click the selector path and choose Copy > Copy selector from the shortcut menu. Save the copied selector path for subsequent configuration in DTM.
Example: #container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1)
(2) Create a variable.
On the Variable tab, click Configure. In the dialog box displayed, select Element and click OK.
(3) Create a condition.
On the Condition tab, click Create. On the page displayed, enter a condition name, set Type to All elements and Trigger to Some clicks. Then, set Operator to Match CSS selector and Value to
#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1),#container > div.pro_detail > div.pro_meg > div.pro_meg_console > div > button:nth-child(1) *
Note: The value of the CSS selector may be different from the value copied using Copy selector. The reason is as follows:
As shown in the preceding figure, a <span> element is added to the <button> element. In this case, the add-to-cart event will be triggered either when the text contained in the <button> element or in the <span> element is clicked. To ensure that the CSS selector can match both the <button> element and its child elements, define the selector and elements as follows:
If the CSS selector of the <button> element is X, define the child element of <button> as X * and the combination of the <button> element and its child elements as X,X * (separated by a comma).
(4) Create a tag.
On the Tag tab, click Create. On the page displayed, enter a tag name, select HUAWEI Ads for Extension, and set Tracking ID to the conversion ID generated in HUAWEI Ads in the Configure section. In the Conditions section, select the created condition as the trigger condition.
You have now completed configuring event tracking in common mode.
2. Add a visual event in common mode.
(1) Access the visual event tracking page.
Click the Visual event tab, enter the URL of a web page in the Web app for visual event addition text box, and click Start to access the web page.
(2) Add a visual event.
Click Add and select the Add To Cart button on the left. A dialog box will be displayed, asking you whether to select all elements of the same type. If you need to track all elements of the same type, click OK. Otherwise, click Cancel. In this example, we will click Cancel.
Configure visual event information on the right.
Enter a name of the event to track, set Triggered on to Specified pages, and set the URLs based on the following rules:
The first rule is that the URL must include https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html
The second rule is that the URL must include goods.
Note:
The URLs are not fixed and are subject to changes, especially after the install referrer is added. Therefore, when configuring a URL rule, you are advised to use Includes instead of Equals.
(3) Create a tag.
On the Tag tab, click Create. On the page displayed, enter a tag name, select HUAWEI Ads for Extension, and set Tracking ID to the conversion ID generated in HUAWEI Ads in the Configure section. In the Conditions section, select the visual event added in the previous step as the trigger condition. Click Save to save the settings.
A visual event to track is added in common mode.
3. Add a visual event by tag template.
(1) Create a tag template.
On the Visual event tab, click Visual event tracking by tag template to access the page for adding visual events by tag template. In the Select tag template area on the left, click Create. On the Create tag page displayed, enter a visual event name, set Extension to HUAWEI Ads, and click Save.
(2) Access the visual event tracking page.
View the created tag template in the Select tag template area on the left. Enter the URL of the web page to track in the Web app for visual event addition text box on the right, and click Start to access the web page.
(3) Add a visual event.
Click Add and select the Add To Cart button on the left. A dialog box will be displayed, asking you whether to select all elements of the same type. If you need to track all elements of the same type, click OK. Otherwise, click Cancel. In this example, we will click Cancel.
Configure visual event information on the right.
Enter the name of the event to track, set Tracking ID to the conversion ID obtained from HUAWEI Ads and Triggered on to Specified pages, and set the URLs based on the following rules:
The first rule is that the URL must include https://dtm-beta.hwcloudtest.cn/dtmwebfour/dist/index.html
The second rule is that the URL must include goods.
Note:
The URLs are not fixed and are subject to changes, especially after the install referrer is added. Therefore, when configuring a URL rule, you are advised to use Includes instead of Equals.
A visual event to track is added by tag template.
Step 3 Create and release a version in DTM.
On the Version tab, click Create. In the dialog box displayed, set Name, select Create and release version, and click OK.
Step 4 Test the conversion created for the landing page.
1. Sign in to HUAWEI Ads.
Click the Test button corresponding to the created conversion.
2. Copy the URL in step 1 on the Conversion action tracking page to the address box of a browser to access the landing page.
3. Click the Add To Cart on the landing page. If the conversion action is tracked, the testing is successful, and the conversion status changes to Activated.
Note: If no conversion action is tracked, try disabling your browser's cache function, refresh the page, and click the Add To Cart button again.
Once you have completed the preceding operations, conversion testing will be complete.
To learn more, please visit:
HUAWEI Developers official website
Development Guide
Reddit to join developer discussions
GitHub or Gitee to download the demo and sample code
Stack Overflow to solve integration problems
Original Source