分析服务（Web）

简介

华为分析服务预置大量分析模型，可帮助您清晰地了解用户的行为方式。从而实现用户、产品、内容的深度洞察，让您实现基于数据驱动的运营，可以就应用营销和产品优化制定明智的决策。
HUAWEI Analytics Kit采集端侧数据，用于支持Analytics功能：

提供埋点与上报接口，支持代码级自定义事件埋点与上报
支持用户属性设置，最多保存25个用户属性
支持自动事件采集与Session计算，预置事件ID与事件参数

您将建立什么

在这个codelab中，您将基于我们提供的Demo project，创建一个Demo App。通过Demo App您可以体验到：

使用HUAWEI Analytics SDK上报用户事件。
在华为分析服务平台查看事件分析报告。

您将会学到什么

如何高效地集成HUAWEI Analytics Kit能力
如何正确使用HUAWEI Analytics Kit的各个接口

硬件要求

开发计算机（台式机或笔记本电脑）

软件要求

Web应用IDE开发工具，例如Visual Studio Code、Sublime Text、WebStorm
包管理工具npm，运行环境Node.js
浏览器，例如Chrome
codelab sample code

集成HUAWEI HMS Core能力，需要完成以下准备工作

如何在AppGallery Connect上创建应用。
集成分析服务SDK。
具体操作，请按照《开发准备》中详细说明来完成。

需要通过注册成开发者才能完成集成准备中的操作。

登陆AppGallery Connect网站，单击"我的项目"图标
选择需要集成分析服务SDK的应用。
单击"华为分析"下的任意菜单可开通分析服务。（注：需拥有产品管理权限才可开通服务）
进入"项目接入设置"页面，设置数据处理位置、选择是否开启"产品改进"功能、完善更多设置的信息。点击"完成"，即完成Analytics Kit服务开通。

本小节您将尝试编写一个Demo，学会如何使用 HUAWEI Analytics Kit的主要接口。这是一个具有答题功能的Demo，您可以不用关心业务逻辑，我们为您准备了现成的代码，您只需要按照下文每一步的提示，学会如何利用HUAWEI Analytics Kit将您所关心的事件，如"回答问题"、"计算分数"、"设置用户属性"等，上报即可。

源码下载

使用开发工具导入示例代码工程

启动示例代码工程

启动命令终端进入hmsanalyticskitdemo目录，首先运行以下命令安装工程相关的依赖。


npm install

执行如下命令。


npm run dev

启动成功后，打开网页http://localhost:8081，会看到答题功能的demo。

截止目前，您的应用已经具备了所需的业务功能，接下来将使用HUAWEI Analytics Kit上报您所关心的事件。

安装SDK依赖

我们需要将Analytics SDK引入到应用工程中，由于使用npm作为工程的包管理工具，可以通过npm install命令来安装所需的依赖，对于这个codelab，我们已经在package.json中加入了SDK相关的依赖，在前一步执行npm install后，相应的SDK已安装，您也可以再次检查或者手动执行如下命令安装所需依赖。


npm install –save @hw-hmscore/analytics-web

导入并初始化SDK

打开main.js，添加如下代码。


// TODO: Import necessary modules. 
  import agconnect from '@agconnect/api'; 
  import '@agconnect/instance'; 
  import '@hw-hmscore/analytics-web';

登录AppGallery Connect网站，选择"我的项目"，在项目中找到需要集成SDK的应用，然后切换到"项目设置"页面，拷贝agConnectConfig到您的代码工程中，并完成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();

sample code使用的是Vue框架，为了方便在组件中调用Analytics Kit的接口，可以将分析服务实例挂载到Vue的原型上，方便在其他文件中调用。


Vue.prototype.$hiAnalytics = agconnect.analytics();

打开AnswerDemo.vue，添加以下代码以导入相关依赖。


import agconnect from '@agconnect/api';

添加以下代码以完成reportAnswer方法（示例上报自定义事件）。


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); 
}

添加以下代码以完成postScore方法（示例上报预置事件）。


postScore() { 
  // TODO: Report a score through the SUBMITSCORE event. 
  let scoreMessage = { 
     'SCORE': this.score 
  } 
  this.$hiAnalytics.onEvent(agconnect.analytics.EventName.SUBMITSCORE, scoreMessage); 
}

修改Settings.vue

添加以下代码以保存用户属性。


save() { 
  this.sport && this.$hiAnalytics.setUserProfile('favor_sport', this.sport); 
  this.$hiAnalytics.setUserProfile('sex', this.sex); 
  this.$router.push({ name: 'answerDemo'}); 
}

打开router.js，修改以下代码，实现在切换页面时上报页面数据。


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(); 
})

关于API简介，请参见《HUAWEI Analytics API参考》。

执行npm run dev 启动应用，根据界面引导操作报告事件。