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
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
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
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
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
Question 1
When my app accesses a material (such as a sticker) for a user, my app displays a message indicating that the access failed due to a network error and prompting the user to try again.
When my app uses an AI capability, the following information was displayed in my app's logs: errorCode:20124 errorMsg:Method not Allowed.
Solution
1. Check whether you have configured your app authentication information. If not, do so by following step 1 in the development guide.
2. Check whether you have enabled Video Editor Kit for your app. If not, enable the service either on HUAWEI Developers or in AppGallery Connect. After the service is enabled, due to factors such as network caches, it will take some time for the service to take effect for your app.
3. Check whether the signing certificate fingerprint in the Android Studio project code of your app is consistent with that configured in AppGallery Connect. If not, or you have not configured the fingerprint in the project code or AppGallery Connect, configure the fingerprint by following the instructions here. After you configure the fingerprint, due to factors such as network caches, it will take some time for the fingerprint to take effect for your app.
4. Check whether you have allocated the material in question.
5. Check whether you have applied for the AI capability you want.
If the problem persists, submit a ticket online (including your detailed logs and app ID) for troubleshooting.
Question 2
After my app obtains a material column, the column name was either 101 or blank in my app.
Solution
1. Sign in to AppGallery Connect and select your desired project. In the navigation pane on the left, go to Grow > Video Editor Kit > App content operations > Column manager.
{
"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. Click Delete columns.
3. Click Initialize columns.
4. Uninstall and then install the app.
Question 3
When my app uses the AI filter of the fundamental capability SDK, my app receives no callback, and the Logcat window in Android Studio displays the following information: E/HVEExclusiveFilter: Failed resolution of: Lcom/huawei/hms/videoeditor/ai/imageedit/AIImageEditAnalyzerSetting$Factory;.
Cause
You did not add the dependencies necessary for the AI filter capability.
Solution
Add the following dependencies on the AI filter capability:
Code:
// Dependencies on the AI filter capability.
implementation 'com.huawei.hms:video-editor-ai-common:1.9.0.300'
implementation 'com.huawei.hms:video-editor-ai-imageedit:1.3.0.300'
implementation 'com.huawei.hms:video-editor-ai-imageedit-model:1.3.0.300'
Click here for more details.
Question 4
My app is integrated with the fundamental capability SDK. After a video asset was added to the corresponding lane, my app called getSize or getPosition but obtained a null value.
Cause
When the getSize or getPosition method is called, the calculation of the video position in the preview area is not completed.
Solution
After adding a video asset to the lane, call seekTimeLine of HuaweiVideoEditor to begin calculation of the video position in the preview area. Calling seekTimeLine is an asynchronous operation. In its callback, you can obtain or set the size and position of an asset.
Below is an example:
Code:
// Specify the position of an asset on the preview area before adding the asset.
HuaweiVideoEditor.setDisplay(videoContentLayout);
Click here for more details.
Code:
// Add a video asset to the video lane.
HVEVideoAsset mHveVideoAsset= hveVideoLane.appendVideoAsset(sourceFile.getAbsolutePath());
mEditor.seekTimeLine(0, new HuaweiVideoEditor.SeekCallback() {
@Override
public void onSeekFinished() {
Log.d(TAG, "onSeekFinished: size：" + mHveVideoAsset.getSize() + ", position: " + mHveVideoAsset.getPosition()); }
});
References
HMS Core Video Editor Kit home page
Development Guide of HMS Core Video Editor Kit