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:

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:

What You Will Learn

In this codelab, you will learn how to:

Hardware Requirements

A computer (desktop or laptop)

Software Requirements

  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

Importing the Demo Project Using a Development Tool

Starting the Demo Project

  1. Start the CLI, go to the hmsanalyticskitdemo directory, and run the following command to install project dependencies:
  2. npm install
  3. Run the following command:
  4. npm run dev
  5. Upon successful startup, access http://localhost:8081. You will see the quiz demo.
  6. 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

Importing and Initializing the SDK

  1. Open the main.js file and add the following code:
    // TODO: Import necessary modules. import agconnect from '@agconnect/api'; import '@agconnect/instance'; import '@hw-hmscore/analytics-web';
  2. Sign in to AppGallery Connect, click My projects, find your project, and select the app that needs to integrate the SDK. Go to Project settings, copy the agConnectConfig code snippet to your project, and initialize the SDK.
    // TODO: Replace the following code with the configuration of your app. const agConnectConfig = { // ... }; // Initialize the configuration. agconnect.instance().configInstance(agConnectConfig); // Initialize the Analytics Kit instance. let analytics = agconnect.analytics();
  3. As the sample code uses the Vue framework, mount the Analytics Kit instance 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 a custom event as an example):
    reportAnswer(answer) { // TODO: Report a custom 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 a predefined event as an example):
    postScore() { // TODO: Report a score through the 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() { 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 the function of reporting 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(); })
  3. For details about APIs, please refer to the Analytics Kit API Reference.

Run npm run dev to start the app and trigger event reporting as instructed.

  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?

How does Analytics Kit identify users?

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

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

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

For more information, please click the following link:

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

Download

Code copied