Overview

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

• Collects and reports custom events through coding.
• Sets up to 25 user attributes.
• Automatically collects events, calculates sessions, and predefines event IDs and parameters.

What You Will Create

In this codelab, you will create a demo app based on the provided demo project. After creating a demo app, you will be able to:

• Report events using the Analytics SDK.
• View event analysis reports on the cloud platform of Analytics Kit.

What You Will Learn

In this codelab, you will learn how to:

• Efficiently integrate Analytics Kit.
• Correctly use APIs of Analytics Kit.

Hardware Requirements

• A computer (desktop or laptop)
• An Android phone

Software Requirements

• Huawei Quick App IDE
• Package management tool npm and runtime environment Node.js
• Sample code used in this codelab

To integrate Analytics Kit, you must complete the following preparations:

• Create an app in AppGallery Connect.
• Integrate the Analytics SDK.
  For details, please refer to Preparations.

1. Sign in to AppGallery Connect and click My projects.
2. Find your project and select the app that needs to integrate the Analytics SDK.
3. Select any menu under HUAWEI Analytics and click Enable Analytics service. (You must have the app management permission to perform this operation.)
   
4. On the Project access settings page displayed, set the data processing location and complete other settings. Then click Finish.

In this section, you will try to build a demo with the question answering function to learn how to use the main APIs of Analytics Kit. We have prepared the code for you, meaning you only need to follow the instructions in each step below to learn how to use Analytics Kit to report the events you are interested in, such as answering questions, calculating scores, and setting user attributes.

Download

Opening the Demo Project

Starting the Demo Project

1. Connect your phone to your computer and enable the debug mode on your phone.
2. In the IDE, click compilation or press the shortcut keys Ctrl+Shift+R.
3. Upon successful startup, the quiz demo is displayed in the real-time preview window on the right of the phone and IDE.
   

Your app is so far loaded with the required functions. Next, you will use Analytics Kit to report the events that interest you.

Installing SDK Dependencies

1. In the IDE, go to Npm > Start Npm Library. The package.json and fa-toolkit tgz files will be generated.
2. Run the following command to install the SDK package:

   
     npm install –save @hw-hmscore/analytics-sdk-quickapp
               

Importing and Initializing the SDK

1. Open app.ux and add the following code:

   
     // TODO: Import necessary modules. 
     import agconnect from "@agconnect/api"; 
     import "@agconnect/instance"; 
     import "@hw-hmscore/analytics-sdk-quickapp"; 
               

2. Sign in to AppGallery Connect, click My projects, and find the app that needs to integrate the SDK. Then go to the Project settings page, and download the agconnect-services.json file.
3. Set the value of the custom variable agConnectConfig to the content of the agconnect-services.json file. Copy the agConnectConfig code snippet to the app.ux file of your project to initialize the Analytics SDK.

   
     // TODO: Initialize the Analytics Kit. 
     var agConnectConfig = {}; 
     agconnect.instance().configInstance(agConnectConfig);
               

4. Mount the Analytics Kit instance to $app so that APIs of Analytics Kit can be called from other files.

   
     // app.ux 
     module.exports = { 
       onCreate() { 
         this.$agconnect = agconnect; 
         this.$hiAnalytics = agconnect.analytics(); 
       } 
     };
               

5. Add the following code to implement the reportAnswer method (for reporting a custom event as an example):

   
     reportAnswer(answer) { 
       let answerTime = this.formatDate(); 
       let reportMessage = { 
         question: this.questions[this.currentNumber], 
         answer: answer, 
         answerTime: answerTime 
       }; 
       this.$app.$hiAnalytics.onEvent("Answer", reportMessage); 
     }    
               

6. Add the following code to implement the postScore method (for reporting a predefined event as an example):

   
     postScore() { 
       let scoreMessage = {}; 
       scoreMessage[this.$app.$agconnect.analytics.ParamName.SCORE] = this.totalScore; 
       this.$app.$hiAnalytics.onEvent(this.$app.$agconnect.analytics.EventName.SUBMITSCORE, scoreMessage); 
     }
               

Modifying Settings.vue

1. Add the following code to save user attributes:

   
     save() { 
       this.sport && this.$app.$hiAnalytics.setUserProfile("favor_sport", this.sport); 
     }

2. Add the following code to implement the function of reporting screen data during screen switching:

   
     onHide() { 
       this.$app.$hiAnalytics.pageEnd("/Settings"); 
     }, 
     onShow() { 
       this.$app.$hiAnalytics.pageStart("/Settings"); 
     }
               

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

1. In the IDE, click compilation or press the shortcut keys Ctrl+Shift+R.
2. On the initial screen, if you tap TRUE or FALSE to answer a question, the custom Answer event will be reported. If you tap POST SCORE to post your score, the predefined $SubmitScore event will be reported. If you tap NEXT, the next question will be displayed. If you tap SETTINGS, the user attribute setting screen will be displayed.
   
3. On the Settings screen, enter your favorite sport and tap CONFIRM.
   

1. Sign in to AppGallery Connect and click My projects.
2. Find your project, and click the app to view its data.
3. Go to HUAWEI Analytics > Overview > Real-time overview.
4. Check the data. For details, please refer to the Analytics Kit operation guide.
   

FAQs

How should I perform initialization?

Perform initialization at the beginning of the onCreate method in the app.ux file.

Why can't I view the analysis result of the data reported during the test?

You can only view some analysis results on the Real-time overview page. Analysis results on other pages such as Event analysis and Launch analysis are available the day after the corresponding data is processed.

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

• Integrate Analytics Kit.
• Call APIs of Analytics Kit.

For more information, please click the following link:

Related documents
To download the sample code, please click the button below:

Download