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

• Cocos Creator
• Visual Studio Code
• Huawei Quick App IDE v3.1.1 or later
• Android SDK
• NDK

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. Go to Project > Build....
3. To release a runtime quick game, perform the following operations:
   a) In the Build... dialog box displayed, set Platform to Huawei Quick Game and click Build. After the build is complete, click Play.
   b) In the QuickGame Devtools dialog box displayed, click ▶ to run the project.
4. To release an HTML5 quick game, perform the following operations:
   a) In the Build... dialog box displayed, set Platform to Web Mobile and click Build. After the build is complete, click Play.
   b) After a successful startup, use Quick App IDE to open and run the HTML5 quick game project.
   c) Refer to the precautions for using SSL certificates to deal with the SSL error.
5. After a successful startup, you will see a demo with the question answering function on the mobile phone.
   

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

Place the hw-hmscore-analytics-sdk-quickgame-xx.xx.xx.esm.js and agconnect-quickgame-xx.xx.xx-min.js files in the assets/Lib directory, and import the files as plugins in Cocos Creator.

• To download hw-hmscore-analytics-sdk-quickgame-xx.xx.xx.esm.js, click Quick Game SDK Download.
• To download agconnect-quickgame-xx.xx.xx-min.js, click the link in the following table.

Importing and Initializing the SDK

1. 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.
2. Assign the file content to the aGConnectServicesConfig variable in the Analytics.js file. If the Analytics.js file does not exist, create one or copy it from the demo.

   // TODO: Initialize Analytics Kit.  
   var aGConnectServicesConfig = {}; 
   

3. Bind the Analytics.js file to the root objects (usually the Canvas objects) of all scene files.
4. Add the following code to the Question.js file 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. questionIndex],  
        answer: answer,  
        answerTime: answerTime  
      };  
      window.analytics.onEvent("Answer", reportMessage);  
    }
   

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

   postScore() {  
      let scoreMessage = {};  
      scoreMessage[agconnect.analytics.ParamName.SCORE] = this.score;  
      window.analytics.onEvent(agconnect.analytics.EventName.SUBMITSCORE, scoreMessage); 
    }
   

Modifying the Setting.js File

Add the following code to save user attributes:

clickBtnConfirm() {  
   this.sport && window.analytics.setUserProfile("favor_sport", this.sport);  
 }

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

1. In the QuickGame Devtools dialog box displayed, click ▶ to run the project.
2. On the initial screen, if you tap True or False to answer a question, the custom Answer event will be reported. After finishing all questions, if you tap POST SCORE to post your score, the predefined $SubmitScore event will be reported; if you tap SETTINGS, the user attribute setting screen will be displayed.
   
3. On the SETTING 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?

Bind the Analytics.js file to the root objects (usually the Canvas objects) of all scene files.

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