Vue项目接入极光统计埋点

前言

最近做的vue网站项目，要做埋点，客户指定极光平台，所以临时研究了下在vue项目中如何接入极光统计，目前只是对接入方式和埋点添加有所了解，没有更深的应用，做个记录吧！

具体步骤

1. 去极光官网创建应用，应用的Appkey在接入时会用到。

2. 在public\index.html中加入以下代码，引入API库

<script type="text/javascript" src="https://web-stat.jiguang.cn/web-janalytics/scripts/janalytics-web.min.js"></script>

3.  在main.js中加入以下代码，初始化API

window.JAnalyticsInterface.init({
    appkey: "", // 极光官网中创建应用后分配的 appkey，必填
    debugMode: true, // 设置是否开启 debug 模式。true 则会打印更多的日志信息。设置 false 则只会输出 w、e 级别的日志。
    channel: "default-channel", // 渠道名称，默认值为:default-channel
    loc: true, //设置是否尝试获取位置信息上报，默认为 true
    singlePage:false //设置是否为单页面，默认为 false
  });

4. 在组件中需要添加埋点的事件方法中调用web api上报（浏览事件为例）

var  BrowseEvent  = window.JAnalyticsInterface.Event.BrowseEvent;
var bEvent = new BrowseEvent("browse_id", "深圳热点新闻", "news", 30);
bEvent.addKeyValue("key1", "value1").addKeyValue("key2", "value2");
window.JAnalyticsInterface.onEvent(bEvent);

5. 接入后，可以在极光工作台事件数据页面看到埋点触发的数据统计表。 

相关网址

开发文档中心