mirror of
https://github.com/analyticsjs/vue-baidu-analytics.git
synced 2025-04-06 03:58:00 +08:00
135 lines
3.4 KiB
Markdown
135 lines
3.4 KiB
Markdown
vue-baidu-analytics 使用说明
|
||
===
|
||
|
||
基于Vue-CLI 3.0开发的百度统计插件，支持自动上报切换路由产生的流量数据，同时对官方api进行了二次封装，简化了手动上报数据的操作。
|
||
|
||
本插件支持部署多个站点id并对应上报数据（需求背景：比如部门A和部门B合作的项目，两个部门都要加上自己的统计代码算入自己的业绩流量池…）。
|
||
|
||
## 功能
|
||
|
||
* 异步载入百度统计脚本，无需修改入口html
|
||
|
||
* 支持部署多个站点id，并对应进行数据上报
|
||
|
||
* 支持自动上报路由切换产生的pv数据（支持hash模式和history模式）
|
||
|
||
* 支持手动提交pv上报
|
||
|
||
* 支持手动提交事件分析上报
|
||
|
||
## 预览
|
||
|
||
[vue-baidu-analytics demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/ "vue-baidu-analytics demo")
|
||
|
||
## 参数
|
||
|
||
参数|是否必填|参数类型|参数说明
|
||
:-:|:-:|:-:|-
|
||
router|是|JSON Object|Vue Router，本插件基于路由使用
|
||
siteIdList|是|Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
|
||
debug|否|Boolean|是否开启debug模式，默认false<br>开启后会在控制台打印上报信息，上线前记得关闭
|
||
|
||
## 安装
|
||
|
||
在npm上安装
|
||
|
||
>npm i vue-baidu-analytics
|
||
|
||
然后在 main.js 里引入插件。
|
||
|
||
```javascript
|
||
import baiduAnalytics from 'vue-baidu-analytics'
|
||
```
|
||
|
||
## 使用
|
||
|
||
安装插件后，在 main.js 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
||
|
||
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
|
||
|
||
```javascript
|
||
Vue.use(baiduAnalytics, {
|
||
router: router,
|
||
siteIdList: [
|
||
'your siteid',
|
||
'your another siteid',
|
||
'your one more siteid',
|
||
'…'
|
||
],
|
||
debug: false
|
||
});
|
||
```
|
||
|
||
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
|
||
|
||
## api
|
||
|
||
插件目前封装了两个常用的api，可在组件里调用。
|
||
|
||
注：如果配置了多个站点id，会同时上报给所有站点。
|
||
|
||
### 手动上报PV
|
||
|
||
api名称|功能说明
|
||
:-:|-
|
||
$trackBaiduPv|手动执行PV数据上报
|
||
|
||
#### api参数
|
||
|
||
参数|是否必填|参数类型|参数说明
|
||
:-:|:-:|:-:|-
|
||
url|否|String|提交上报的url，必须是以"/"（斜杠）开头的相对路径<br>如果不填，则会默认提交为域名根目录
|
||
|
||
详细的参数使用要求请查看官方文档：
|
||
|
||
>https://tongji.baidu.com/open/api/more?p=guide_trackPageview
|
||
|
||
注：原本url是必填，插件处理了一个默认值，所以变成选填。
|
||
|
||
#### 使用示范
|
||
|
||
在template里使用
|
||
|
||
```html
|
||
<button @click="$trackBaiduPv('/test')">手动上报PV</button>
|
||
```
|
||
|
||
在method里使用
|
||
|
||
```javascript
|
||
this.$trackBaiduPv('/test');
|
||
```
|
||
|
||
### 手动上报事件分析
|
||
|
||
api名称|功能说明
|
||
:-:|-
|
||
$trackBaiduEvent|手动执行事件分析数据上报
|
||
|
||
#### api参数
|
||
|
||
参数|是否必填|参数类型|参数说明
|
||
:-:|:-:|:-:|-
|
||
category|是|String|事件名称
|
||
action|是|String|交互动作
|
||
opt_label|否|String|事件信息，默认为空
|
||
opt_value|否|Number|事件价值，默认1
|
||
|
||
详细的参数使用要求请查看官方文档
|
||
|
||
>https://tongji.baidu.com/open/api/more?p=guide_trackEvent
|
||
|
||
#### 使用示范
|
||
|
||
在template里使用
|
||
|
||
```html
|
||
<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
|
||
```
|
||
|
||
在method里使用
|
||
|
||
```javascript
|
||
this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
|
||
```
|