Integration of Huawei Analytics into Ionic Application
Huawei analytic allows developer to know how their app is used by the user, which pages get more traffic, on which page customer leaves the app.
Understanding user’s habits will help you to make your app better. If your app is at a certain level or you want to move your app and business forward, you need to use analytics.
To date, there are many services that offer solutions for analytics. Huawei handled analytics as a priority on HMS.
Features
1. Easy to integrate and use
It is very easy to integrate and use the analytics dashboard after integrating Huawei Analytics.
Moreover, you can customize your tables on the dashboard as you wish and you can easily see the data, not imposed on you.
2. Reach Huawei users
As you know, google services are not used in the latest Huawei devices. When you integrate Huawei Analytics, you will reach all Huawei users and all other devices users. So Huawei Analytics a connective, not a divider.
3. Power of HMS Core
Analytics gets its power from HMS Core.
It is very easy to reach all the documents you need for integration or usage of dashboard. When there is a technical problem you can find technical support very easily.
4. Powerful Analysis Capabilities
Ionic Framework
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript with integrations for popular frameworks like Angular and React.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you should get with a native SDK on Android or iOS but didn’t really exist before on the web.
Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or Capacitor in order to run as a native app.
Here we will use Ionic framework with Angular and Capacitor as native wrapper.
Usecase
1. We will use simple app which will have Sign in with Huawei ID button. Once user sign in successfully, app will navigate to result page showing user information returned through an AuthHuaweiID object.
Refer below post to learn how to integrate Huawei Account kit into ionic application.
https://rchancha.medium.com/integration-of-huawei-account-kit-into-ionic-application-518428522cd8
2. Using Huawei Analytics kit, we will record predefined events like SIGNIN, SIGNOUT into AppGallery Dashboard. Also we will record custom event, setuserProfile into dashboard.
Prerequisite
1. Must have a Huawei Developer Account.
2. Must have a Huawei phone with latest HMS core installed.
3. Must install node in the system.
4. Must have any IDE. I have user visual studio code.
5. Must install Ionic in the system using below command.
Things need to be done
1. Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2. Create an app in the Huawei AppGallery connect and enable Analytics Kit in Manage API section.
3. Provide the SHA Key in App Information Section.
4. Provide storage location.
5. Download the agconnect-services.json and store it somewhere on our computer.
6. Create a blank Ionic Project using below command.
7. Download the Cordova Analytics Kit Plugin. Run the following command in the root directory of your Ionic project to install it through npm.
8. If you want full Ionic support with code completion etc., install @ionic-native/core in your project.
9. Copy the “ionic/dist/hms-analytics” folder from library to “node_modules/@ionic-native” folder under your Ionic project.
10. Run the following command to compile the project.
appName is the name of your app, and appId is package_name in your agconnect-services.json file (example: com.example.app).
11. Run the following command to add android platform to your project.
12. Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below.
13. Make sure your project has a build.gradle (root level) file with a maven repository address and agconnect service dependencies.
14. Add the Signing certificate configuration to the build.gradle file in the app directory.
15. Add plugin to the build.gradle file in the app directory.
16. Add analytics kit dependencies to the build.gradle file in the app directory.
17. To update dependencies, and copy any web assets to your project.
Using Debug Mode
1. During the development, you can enable the debug mode to view the event records in real time, observe the results, and adjust the event reporting policies.
2. Enabled Debug Mode and after then the data is successfully reported, you can go to HUAWEI Analytics > App debugging to view the reported data, as shown in the following figure.
Run the following command to enable the debug mode:
Viewing Debugging Event Details (Real-time Update)
1. Sign in to AppGallery Connect and click My projects.
2. Find your project, and click the app for which you want to view analytics data.
3. Navigate to HUAWEI Analytics > App debugging.
The App debugging page displays events reported by the app in the last 60 seconds or last 30 minutes.
What is AAID(Anonymous Application ID)?
Anonymous device ID opened to third-party apps. Each app is allocated with a unique AAID on the same device so that statistics can be collected and analyzed for different apps (for example, statistics on the number of active users). In addition, personal data from different apps is isloated to protect user data privacy and security.
Records predefined event
Such events have been predefined by the HMS Core Analytics SDK based on common application scenarios. It is recommended you use predefined event IDs for event collection and analysis.
In our app, we will record predefined SIGNIN and SIGNOUT event.
Records custom event
Such events can be used to meet personalized analysis requirements that cannot be met by automatically collected events and predefined events.
In our case, we will record user info as custom event.
Note: The ID of a custom event cannot be the same as that of a predefined event. Otherwise, the custom event will be identified as a predefined event.
Setting User Profiles
Sets user attributes. The values of user attributes remain unchanged throughout the app lifecycle and during each session.
Note: A maximum of 25 user attributes are supported. If the name of an attribute set later is the same as that of an existing attribute, the value of the existing attribute is updated.
Analytics event on Dashboard
- Predefined event.
2. Custom event
3. User profile setting
Tips and Tricks
- Once you have copied the “ionic/dist/hms-analytics” folder from library to “node_modules/@ionic-native” folder under your Ionic project. Make sure to add HmsAnalytics inside providers in app.module.ts
2. The ID of a custom event cannot be the same as that of a predefined event. Otherwise, the custom event will be identified as a predefined event.
Conclusion
In this article you have learned how to integrate HMS Analytics into ionic application, record custom events and monitor them in AppGallery Connect. You can use custom events with user attributes in your apps to see user behaviours, so that you can improve your app depend on them.
