App Performance Management (APM) of AppGallery Connect provides minute-level app performance monitoring capabilities. You can view and analyze app performance data collected by APM to comprehensively understand the online performance of apps in real-time, helping you to quickly and accurately rectify any app performance problems and continuously improve user experience.
If you happen to need this service, this article is exactly what you are looking for.
Perform the following steps for service integration:
Enable HUAWEI Analytics.
Integrate the SDK into your iOS project.
Design the UI.
Report network events.
Enable/Disable performance data collection.
View and analyze app performance data.
Disable APM performance monitoring.
Enabling the APM ServiceThe APM service uses the capabilities of HUAWEI Analytics when reporting performance management events. Therefore, you must enable HUAWEI Analytics before integrating the APM SDK. For details, click here to view how to enable the service.
Integrating the SDKIf you are using Xcode, you need to integrate the APM SDK into your Xcode project with CocoaPods.
Add the AppGallery Connect configuration file of the app to your Xcode project.
Sign in to AppGallery Connect and click My projects.
Click your project card and select an app for SDK integration from the app drop-down list on the top.
Go to Project settings > General information and download agconnect-services.plist under App information.
Copy the agconnect-services.plist file to your app’s module directory.
{
"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"
}
Create a Podfile. Open the CLI and navigate to the location of the Xcode project. Then create a Podfile. Skip this step if a Podfile already exists.
Edit the Podfile.
Integrate the Analytics SDK, APM SDK, and Remote Configuration SDK. Edit the Podfile to add the pod dependencies of the Analytics SDK, AppGallery Connect SDK, APM SDK, and Remote Configuration SDK. https://gist.github.com/devwithzachary/22082c3bcd6657de20a46dfe4a1b0216#file-podfile
Install the pod and open the .xcworkspace file to view the project. https://gist.github.com/devwithzachary/7f6fa7c18d30af947048f94499a16972#file-pod-bash
Designing the UIYou can create a page in your Xcode project and design the UI based on the following figure, with three buttons required: one for initiating a network request, one for disabling APM performance monitoring, and one for enabling APM performance monitoring.
Reporting Network EventsYou can manually add a time-consuming cyclic log recording operation to trigger a network request, and check whether the launch duration and network performance indicators are normal on the management page of APM. The app launch and screen events are automatically reported when the app is launched. The detailed procedure is as follows:
Initialize the AppGallery Connect SDK, import the header file to the AppDelegate.m file of the project, and add the initialization code. Add a time-consuming cyclic log recording operation and change the number of cycles to observe the change of the launch duration.
2. Create a Send Network Request test button in ViewController in your app. You can tap the button to call sendNetworkRequest to trigger a network request event.
Enabling/Disabling Performance Data Collection
Create an APM Collection Off test button in ViewController in your app. You can tap the button to call the enableCollection method to disable APM performance monitoring.
2. Create an APM Collection On test button in ViewController in your app. You can tap the button to call the enableCollection method to enable APM performance monitoring.
Viewing and Analyzing App Performance Data
Sign in to AppGallery Connect and click My projects.
Click your project card and select an app from the app drop-down list on the top.
Go to Quality > APM. Click Overview. The indicator overview includes indicators such as the app launch duration (by version), freeze frame rate ratio (top 5 view controllers), and ANR-affected user rate.
Go to App analysis > App launch duration.
5. Click View details. The app launch duration details page is displayed.
6. (Optional) Select Modify threshold, set the threshold, and click Ok.
7. Go to App analysis > Native page rendering. On the page displayed, you can view the page freezing information (corresponding to ViewController) and then optimize the performance as required.
Disabling APM Performance MonitoringMethod 1: You can disable APM performance monitoring for a released app on the cloud. On the App performance management page, click the Configuration tab, find Overall switch, then disable the switch.
Method 2: You can disable the performance data reporting function for some versions. On the App performance management page, click the Configuration tab and find the app version, then click Add to add the disabled version number to the list.
Method 3: If your app allows users to enable or disable performance monitoring, use the method provided by the APM SDK. Call getInstance for initialization and call enableCollection to enable or disable performance monitoring. The priority of the disabling configuration in apps is higher than that through Remote Configuration in AppGallery Connect. If users disable performance monitoring in apps, APM does not collect performance data even if the performance monitoring function is enabled through Remote Configuration in AppGallery Connect.
SummaryYou can add the APM SDK to your app for automatically collecting app performance data without writing any code.
And you can view and analyze app performance data collected by APM in AppGallery Connect to comprehensively understand the online performance of apps in real-time, helping you quickly and accurately rectify any app performance problems and continuously improve user experience.
Reference: HUAWEI AppGallery Connect Crash documentation
Related
This article is originally from HUAWEI Developer Foum
Forum link: https://forums.developer.huawei.com/forumPortal/en/home
What is the Quick APP ?
Quick apps are different from HTML5 apps. A quick app has its own development standards and runs based on the Quick App Center. However, quick apps support HTML5 web page loading through the web component. In this way, HTML5 apps can be converted into quick apps quickly.
Quick apps are installation-free apps. At least four major Chinese manufacturers are set to deploy quick apps globally within 6 months. Quick apps support all H5 apps, all H5 games, 90% of app categories, and 90% of game categories.
Note : This article shows that how can HTML5 apps be converted into quick app.
Advantages of Quick App
Low development costs: JS/CSS: 20% of the code for an Android app
Native experience: Native GUI, and ability to access device functions
High retention: Easily added to the home screen and found
End-to-end experience
Find: Quick apps can be found from AppGallery, HiBoard, and HiSearch.
Open: Quick apps open instantly and can be used without being installed. They can update automatically and take up minimum storage.
Use: Quick apps run smoothly on user devices, provide friendly GUIs and excellent functionalities.
Leave: Once closed, they can be -easily from the home screen icon, recently used apps, and Push notifications
Quick App Project Structure
Quick App project structure is basic like other frontend technologies. We can develop Quick app with Javascript,html and css .If you want to look details of Structure, you can visit this page: Details
{
"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"
}
Manifest.json specifies the project configuration information, like name, package name, version, pages etc.
App.ux specifies public resource scripts.
UX files describe pages and components.
Huawei Quick App Ide
Huawei quick app IDE provides a complete set of capabilities that span from app development, building, debugging and testing to release. It also provides templates for different services, such as news and media, reading, food delivery, e-commerce, and early childhood education.
For details of User Guide, click here
How can we install Quick App?
We have to install Node JS
After İnstalling Node JS, we can download and install quick App IDE that Huawei provides for Windows and Mac.
Huawei Quick App Loader
We need to Quick App loader to start and debug on our mobile phone.
For this reason we need to install Huawei Quick App Loader and install it manually.
Huawei Quick App Pc Assistant
Huawei Quick App PC Assistant supports loading quick apps to multiple terminals and testing cards and hap links. After the PC Assistant is installed on the PC, you can test the functions of the quick app without using the IDE
You can download all Installation Package link
Example : Convert an H5 app into a Quick App
There are two conversion methods in Huawei Quick App.
Online Conversion : You only need to perform related configurations in AppGallery Connect. Then AppGallery Connect will automatically convert your HTML5 app into a quick app and submit it for review
Offline Conversion : You need to perform the conversion using Huawei Quick App IDE. The generated quick app package will be submitted for review.
In this article's topic online conversion and example shows that how can we convert an H5 app into a Quick App.
Online conversion
First of All we have to create quick app project whose template is HTML5 App.
Create or select an app inside AppGallery. Console > Huawei AppGallery followed this way.If there is no project, click Add project. In the displayed dialog box, enter the project name to create a project. Alternatively, click the project card to which you want to add an app.
Add app on the top of the Project Setting page
Note: We must Quick App as platform.
App and Package name is related our project.
App category includes two section
App : non-game apps (Our example is non game apps )
Game : game apps
After created Application we set app information that includes introduction, brief Introduction, app icon etc. and save all definition.
SHA-256 certificate fingerprint must be created and enter related area inside developer tab.
Note:We can follow Tools >Certificate path to generate certificate fingerprint in Quick App ide
Next step we have to specify link that is converted into a Quick App. For this reason we follow myApps > Project > Distribute > Version Information >Draft path.
We create RPK file in Software Version Area then click Generate RPK based on HTML5 page URL button. RPK file must be created to use in Huawei Quick App Pc Assistant.
-After click this button open under page and fill related area.
Finally Download RPK file from download link.
e can test using Huawei Quick App. You can visit to learn details this link
As you see after conversion operation , our conversion was occured successfully. Short video show us it.
More information like this, you can visit HUAWEI Developer Forum
Introduction
Online food ordering is process to deliver food from restaurants. In this article will do how to Integrate Analytics, App-Messaging in food applications.
Steps
1. Create App in Android.
2. Configure App in AGC.
3. Integrate the SDK in our new Android project.
4. Integrate the dependencies.
5. Sync project.
Analytics Module
Huawei Analytics will helps to understand how people using mobile application. Analytics model help you gain a deeper insight into your user, products and contents.
1. Collect and report custom events.
2. Set a maximum of 25 user attributes
3. Automate event collection and session calculation with predefined event ID’s and parameter.
Use Cases
1. Analyze user behaviour using both predefined and custom events.
2. Use audience building to tailor your marketing activity to your users’ behaviour and preferences.
3. Use dashboards and analytics to measure your marketing activity and identify areas to improve.
Function Restrictions
Device restrictions: The following automatically collected events of analytics kit depend on HMS Core (APK). Therefore, which are not supported on third-party devices where HMS Core is not installed including but not limited to Oppo, Vivo, Xiaomi, Samsung and Oneplus.
Event quantity restriction: Each app can analyze a maximum of 500 events.
Event parameter restrictions: You can define a maximum of 25 parameters for each event, and maximum of 100 event parameter for each app.
AGC Configuration
1. Create an app adding an app to the project.
2. Enable Analytics Choose My Projects> Huawei Analytics
{
"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"
}
3. Enable Analytics API Choose My Projects > Project settings > Manage APIs
Integration
Create Application in Android Studio.
App level gradle dependencies.
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
Gradle dependencies
Code:
implementation 'com.huawei.hms:hianalytics:5.0.3.300'
Root level gradle dependencies
Code:
maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
1. Create Instance for HiAnalyticsInstance in the onCreate method
Code:
HiAnalyticsTools.enableLog();
HiAnalyticsInstance instance = HiAnalytics.getInstance(this);
2. Create method for report an event.
Code:
private void reportevent() {
Bundle bundle = new Bundle();
bundle.putString("Name", signInResult.getUser().getDisplayName());
mInstance.onEvent("SIGNIN", bundle);
}
Output
App Messaging Module
Huawei App messaging is one of the power full tool to promote information to audience. This will help when you are trying to get more attention to your application. We can target active users to encourage them to use this app.
App Messaging allows to customize your messages visuals and the way they will be sent, and define events for triggering message sending to your users at the right moment.
Message Types
1. Pop-up Message: Title, body and contain an image, and up to two buttons.
2. Banner Message: Message is displayed on top of the screen, containing a thumbnail and the message title and body. user can tap the banner to access specified page.
3. Image: It contains only image. An image message can be a poster well designed to promote an activity. User can tap the image to access the activity details.
AGC Configuration
1. Enable App Messaging Api Choose My Projects > Project settings > Manage APIs
2. Enable App Messaging Choose My Projects > Growing > App Messaging Click Enable Now.
3. Click New button and enter the required information.
4. Enter required details, and then click Next button.
5. In Select Sending Target node, click New condition for matching target users.
Select conditions in Select drop-down, and then click Next
6. In Set Sending Time node, select Started and Ended drop-downs.
Select required options in Trigger event and Frequency limit, and then click Next
7. Once all the required information filled, and then click Save button
8. Navigate to Operation tab, and then click Test option to perform the App Messaging publishing
Integration
Gradle dependencies
Code:
implementation 'com.huawei.agconnect:agconnect-appmessaging:1.4.0.300'
1. Generate AAID, this AAID will help you to sending App-Messages.
Code:
private void generateAAID(){
HmsInstanceId inst = HmsInstanceId.getInstance(this);
Task<AAIDResult> idResult = inst.getAAID();
idResult.addOnSuccessListener(aaidResult -> Log.d("AAID", "getAAID success:" + aaidResult.getId() ))
.addOnFailureListener(e -> Log.d("AAID", "getAAID failure:" + e));
}
2. For displaying messages we need to call AGConnectAppMessaging Instance.
3. setFetchMessageEnable() To allow data synchronization from the app gallery connect server.
4. setDisplayEnable() To Enable message display.
5. setForceFetch() To specify that the in-app message data must be obtained from App Gallery connect server.
Code:
private void initializeInAppMessage(){
AGConnectAppMessaging appMessaging = AGConnectAppMessaging.getInstance();
appMessaging.setFetchMessageEnable(true);
appMessaging.setDisplayEnable(true);
appMessaging.setForceFetch();
}
Result:
Conclusion
In this Article, I have explained how to integrate App Messaging and Analytics Kit on food application.
Reference:
Analytics kit:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050745149
App Messaging:
https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-appmessage-introduction
{
"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"
}
IntroductionWith the help of Awareness Kit, we can have more details about the current situation of user’s device. Thus, we can develop more efficient applications and build different logics according to different situations.
Awareness Kit has many features for handling many different situations. If we briefly talk about its features, Awareness Kit has features such as Time Awareness, Location Awareness, Behavior Awareness, Beacon Awareness, Audio Device Status Awareness (Ambient Light Awareness, Weather Awareness) and Phone Status Awareness (Screen Status Awareness, Wi-Fi Status Awareness, Dark Mode Awareness, App Status Awareness).
In this article, I will only give examples about Wi-Fi Status Awareness feature. If you would like to learn more about other features, you can visit developer website to learn more details about them.
https://developer.huawei.com/consum...-Guides/service-introduction-0000001050031140
How to Integrate HMS DependenciesFirst of all, we need to create an app on AppGallery Connect and add related details about HMS Core to our project.If you don’t know about how to integrate HMS Core to our project, you can learn all details from following Medium article.
https://medium.com/huawei-developers/android-integrating-your-apps-with-huawei-hms-core-1f1e2a090e98
When we have added our hms core dependencies and created an app on AGC, we can implement Awareness Kit dependency.To implement Awareness Kit to our app, we need to add the following dependency to our project.
implementation 'com.huawei.hms:awareness:{version}'
Currently, awareness kit version is 1.0.8.301
implementation 'com.huawei.hms:awareness:1.0.8.301'
Note: Don’t forget to enable Awareness Kit on AGC.
With Android 11, making query to other apps on the device and interacting with them has been changed. If our targetSdkVersion is 30 or later, we need to make some changes on AndroidManifest.xml file.
To make query to other apps from our app and interact with them, we need to add queries to AndroidManifest.xml file.
Note: To work with Awareness Kit, our minSdkVersion should be equal to or higher than 24.
Wi-Fi Status AwarenessWith Wi-Fi Status Awareness, we can detect the Wi-Fi status of the device or we can listen Wi-Fi status changes of the device.
There are two different ways to work with Awareness. Let’s examine them:
Capture: With the Capture API, we can obtain the current situation of Wi-Fi status. For example, when user has clicked the button, we can check the Wi-Fi status of the device.
Barrier: With the Barrier API, we can detect changes on Wi-Fi status. For example, when user opened Wi-Fi option or connected to any Wi-Fi point, we can detect it.
Before starting to learn how to work with Wi-Fi Status Awareness by using Capture API, I want to talk about one use case where we can use this awareness.
If I have to give use case example for Wi-Fi Status Awareness, we can use this feature on app which users need to download something. For example, music app, app market and etc.Users make download on these kind applications. Downloading huge size of musics, app and etc. on mobile network can cause problem on our bill. It is better to check that user is connected to Wi-Fi while trying to download huge size file or app. Thus, we can show a dialog to notify the user about that device is not connected to any Wi-Fi network.
Getting PermissionBefore working with Wi-Fi Status Awareness, we need to obtain accessing wi-fi state permission in our AndroidManifest.xml file.
"android.permission.ACCESS_WIFI_STATE"
Setting Data Processing LocationWe need to set data processing location on AppGallery Connect. If we don’t set any data processing location, we will get the following error.
To set data processing location, we can open our project and on general information tab, we can find the following settings. We need to click on Set button.
After we have clicked on the button, following dialog will be shown. We can choose data processing location here and I will choose Germany.
CaptureWith Capture API, we can obtain the current status of the Wi-Fi. While working with Capture API, it returns us 3 different statuses which are Connected, Enabled and Disabled.
If we think according to use case which I have mentioned above as downloading an app or files such as music, we need to check Wi-Fi status when user has been clicked on the download button.
viewBinding.downloadButton.setOnClickListener {
Awareness.getCaptureClient(this).wifiStatus
.addOnSuccessListener { wifiStatusResponse ->
when (wifiStatusResponse.wifiStatus.status) {
WifiStatus.CONNECTED -> {
startToDownload()
}
WifiStatus.ENABLED -> {
navigateToWiFiSettings()
}
WifiStatus.DISABLED -> {
navigateToWiFiSettings()
}
}
}
.addOnFailureListener {
awarenessRequestFailed()
}
}
I want to give code sample in simplest way and that’s why I only give how to work with Capture API of Wi-Fi Status Awareness feature of Awareness Kit.As I mentioned above, there are three different statuses with Capture API.
If user has connected to any Wi-Fi network, status will be ‘Connected’.
If user has enabled the Wi-Fi but hasn’t connected to any Wi-Fi network, status will be ‘Enabled’. We can navigate user to Wi-Fi settings screen or develop different logic according to our app.
If user has not enabled the Wi-Fi settings yet, status will be ‘Disabled’. We can navigate user to Wi-Fi settings screen or develop different logic according to our app.
To navigate user to Wi-Fi settings screen of the device, we can use the following method if we won’t do any other special operations according to logic of our app.
private fun navigateToWiFiSettings() {
startActivity(Intent(Settings.ACTION_WIFI_SETTINGS))
}
Tips & Tricks
Don't forget to set data processing location. If you don't set any location, we can have an error which has error code 10008
Conclusion
These features which I have explained Wi-Fi Status Awareness feature of Huawei Awareness Kit. Huawei Awareness Kit has many more Awareness features. I recommend you to examine these features too. If you have any questions, you can reach me out from "[email protected]"
References
Huawei Awareness Kit Documentation
HMS Core GitHub - Awareness Kit Demo Repository
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
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