Overview

HUAWEI Analytics Kit predefines rich analytics models to help you clearly understand user behavior and gain in-depth insights into users, products, and content. As such, you can carry out data-driven operations and make strategic decisions about app marketing and product optimization.
Analytics Kit implements the following functions using data collected from apps:

What You Will Create

In this codelab, you can call APIs in the specified way to collect and report the following user device information to the Analytics Kit cloud: app name, package name, browser version, system language, screen width, screen height, and operation time (some of the information is automatically collected by internal APIs of the HMS Core Analytics SDK). Analytics Kit then conducts big data analytics based on the collected information.

What You Will Learn

In this codelab, you will learn how to:

Hardware Requirements

Software Requirements

To integrate HUAWEI HMS Core services, you must complete the following preparations:

For details, please refer to Integrating the HMS Core SDK.

  1. Sign in to AppGallery Connect and select My projects.
  2. Click the app for which you need to enable Analytics Kit.
  3. Select any menu under HUAWEI Analytics and click Enable Analytics service. (You need the management permission to perform this operation.)
  4. Turn on Enable the API permission. This option is selected by default. If you deselect this option, data will not be reported. If you do not enable the API permission here but the API permission is required later, go to Project Setting > Manage APIs and manually enable the API permission for Analytics Kit.

In the previous section, you have successfully integrated Analytics Kit. In this section, you will try to write a demo with the question answering function to learn how to use main APIs of Analytics Kit. You do not need to care about service logic. We have prepared ready-made code for you. You only need to follow the instructions in each step below to learn how to use Analytics Kit to report the events you care about, such as answering questions, calculating scores, and setting user attributes.

Downloading the Source Code

Download source code

Importing the Sample Code Project Using the Development Tool

Starting the Sample Code Project

Go to the hmsanalyticskitdemo directory, and run the following command to install dependencies of the project:

npm install

Run the following command to start the run device:

npm run dev

Upon successful startup, access http://localhost:8081. You will see the quiz demo.

So far, your app has integrated the required service functions. Next, you will need to use Analytics Kit to collect events that you are concerned about.

Installing SDK Dependencies

Because npm is used as the package management tool, you can run related npm install commands to install the required dependencies when integrating HUAWEI Analytics SDK. In this codelab, the SDK dependencies have been added to the package.json file, and the SDK has been installed by the npm install command executed when starting the sample code project. You can need to check the dependency configuration, or you can manually run the following commands to reinstall the dependencies:

npm install --save @hmscore/analytics-web

Importing and Initializing the SDK

  1. Open the main.js file and add the following code:
    // TODO: import necessary sdks import agconnect from '@agconnect/api'; import '@agconnect/instance'; import '@hmscore/analytics-web';
  2. Sign in to AppGallery Connect, choose My projects, and click the app for which you want to integrate the SDK. Go to the Project Setting, copy agConnectConfig to your code project, and initialize the SDK.
    // TODO: Initiate Analytics Kit var agConnectConfig = { "agcgw":{ "backurl":"connect-drcn.dbankcloud.cn", "url":"connect-drcn.hispace.hicloud.com" }, "client":{ "cp_id":"890086000000104905", "product_id":"98341621547935447", "client_id":"307729481613714944", "client_secret":"163EDBB0569E342BF5B25D90728F0CE289EDE245AE9A5ADC81489F18DA100513", "app_id":"98654408178752488", "api_key":"CgB6e3x9Eyj0GRw1M4ehr+Sj6HkfrJAMS2fZGqWxHz5c7eVhwyQKpwbCsZ30nn2WmqEg5sCuk9oyiaxsXkHe/K+0" }, "service":{ "analytics":{ "collector_url":"datacollector-drcn.dt.hicloud.com,datacollector-drcn.dt.dbankcloud.cn", "resource_id":"p1", "channel_id":"" }, "cloudstorage":{ "storage_url":"https://agc-storage-drcn.platform.dbankcloud.cn" }, "ml":{ "mlservice_url":"ml-api-drcn.ai.dbankcloud.com,ml-api-drcn.ai.dbankcloud.cn" } }, "region":"CN", "configuration_version":"1.0" }; agconnect.instance().configInstance(aGConnectServicesConfig);
  3. Because the sample code uses the Vue framework, mount it to the Vue prototype so that APIs of Analytics Kit can be called from other files.
    Vue.prototype.$hiAnalytics = agconnect.analytics();
  4. Open the AnswerDemo.vue file, and add the following code to import the dependencies:
    import agconnect from '@agconnect/api';
  5. Add the following code to implement the reportAnswer method for reporting custom events:
    reportAnswer(answer) { // TODO Report a customized Event let answerTime = this.formatDate(); let reportMessage = { question: this.questions[this.currentNumber], answer: answer, answerTime: answerTime } this.$hiAnalytics.onEvent("Answer", reportMessage); }
  6. Add the following code to implement the postScore method for reporting predefined events:
    postScore() { // TODO Report score by using SUBMITSCORE Event let scoreMessage = { 'SCORE': this.score } this.$hiAnalytics.onEvent(agconnect.analytics.EventName.SUBMITSCORE, scoreMessage); }

Modifying Settings.vue

  1. Add the following code to save user attributes:
    save() { // TODO set some userProfiles this.sport && this.$hiAnalytics.setUserProfile('favor_sport', this.sport); this.$hiAnalytics.setUserProfile('sex', this.sex); this.$router.push({ name: 'answerDemo'}); }
  2. Open the router.js file, and add the following code to implement reporting of page data during page switching:
    router.beforeEach((to, from, next) => { if (to.name && from.name) { router.app.$hiAnalytics.pageEnd(window.location.host + '/#' + from.path); router.app.$hiAnalytics.pageStart(window.location.host + '/#' + to.path); } next(); })

For details about APIs, please refer to HUAWEI Analytics Kit API Reference.

Run the npm run dev command to start the app.

Tap buttons to trigger event reporting.

  1. Sign in to AppGallery Connect and click My projects.
  2. Click the app to manage.
  3. Go to HUAWEI Analytics > Overview > Real-time monitoring.
  4. Check the data. For details, please refer to HUAWEI Analytics Kit Operation Guide.

App debugging is not supported for web apps currently.

FAQs

1. When should I perform initialization?

Answer:
Initialize Analytics Kit in main.js or beginning of the script. Otherwise, the processing of lifecycle events on the automatic collection page may be affected.

2. How does Analytics Kit identify users?

Answer:
Analytics Kit identifies users by their AAID.

3. When will the AAID be reset? How does Analytics Kit collect user statistics after AAID reset?

Answer:
The AAID will be reset in the following cases:
(1) The AAID expires.
(2) The user clears the web app data.
A user is counted as a new user after the AAID is reset.

4. What permissions are required for using Analytics Kit?

Answer:
Analytics Kit requires the following permissions, which have been predefined. You do not need to apply for permissions.

5. Why cannot I view the analysis result of the data reported during the test?

Answer:

You can only view some analysis results on the Real-time monitoring page. Analysis results on the Event analysis and Activity analysis are available only after the corresponding data is processed on the next day.

Well done! You have successfully completed this codelab and learned how to:

For more information, please click the following link:

Documentation

You can click the button below to download the source code:

Download source code

Code copied