chore: rename some files

This commit is contained in:
程沛权 2021-06-15 17:50:13 +08:00
parent ed3e666286
commit cb18c6892e
4 changed files with 415 additions and 415 deletions

313
README.en.md Normal file
View File

@ -0,0 +1,313 @@
<p align='center'>
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/04/20210404235335.png" alt="vue-baidu-analytics" />
</p>
<p align='center'>
<a href='https://www.npmjs.com/package/vue-baidu-analytics'>
<img src="https://img.shields.io/npm/v/vue-baidu-analytics?color=41b883&label=npm" />
</a>
</p>
<br>
<br>
[简体中文](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/README.md) | English
Only 3 kB, this plugin base on the Baidu analytics, it can help you quickly to collect the page views on your website, including single page web application.
Projects using this plugin need to be import [Vue Router](https://router.vuejs.org/) .
>Since the version v2.0.0, it supports the Vue 3.0, and is compatible with the Vue 2.0, you can see the live demo to learn more.<br>If you havent started using Vue 3.0, welcome to read the tutorial [learning Vue3](https://vue3.chengpeiquan.com/) .
## Features
* Asynchronously load the Baidu analytics scripts, no need to modify the entry HTML.
* Support the deployment of multiple site IDs and corresponding data reporting.
* Supports automatic reporting of PV data generated by route switching (supports hash mode and history mode).
* Support manual submission of page views reports.
* Support manual submission of event reports.
* Since the version v2.0.0, the plugin can automatically recognize the Vue version at Vue 2.0 or Vue 3.0 .
* Since the version v2.1.0, Hooks API is provided (So the usage of CDN installation is slightly adjusted)
## Project
As long as Vue and Vue Router are introduced, the projects can be used normally, no matter what method is used to develop your project, e.g. :
* Vue-CLI scaffolding project
* Vite project
* Introduce the HTML page of Vue related CDN
* VuePress project
It is not limited to SPA single page projects, it can also be used in SSG / SSR projects.
## Preview
Both live demos have enabled debug mode, and you can open the console to view the report.
Vue 2.0 [vue-baidu-analytics demo for Vue 2.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
Vue 3.0 [vue-baidu-analytics demo for Vue 3.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
## Options
Option|Required|Type|Description
:-:|:-:|:-:|-
router|true|object|Vue Router, this plugin is based on Vue Router.
siteIdList|true|string[]|The site ids for Baidu analytics, if only one site needs to be reported, just keep one item in the array.
isDebug|false|boolean|if `true`, it will open the debug modeyou can see the log in the console.
Tips: Please remember to turn off the debug mode before publish.
## Install
You can install the plugin from NPM.
```bash
npm install vue-baidu-analytics --save-dev
```
Can also use the CDN URL in your HTML.
```html
<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
```
## Usage
If use NPM, you must import the plugin in `main.js` .
```js
import baiduAnalytics from 'vue-baidu-analytics'
```
Then, refer to the sample code in Vue 2.0 and Vue 3.0 below to use it.
When the route is switched, the new URL address will be reported to Baidu analytics after the visit.
### Use in the Vue 2.0
See[main.js - Vue 2.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
>Since the version v2.1.0, if you use CDN in your HTML, must be use `baiduAnalytics.default` to use the plugin.
```js
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb'
],
isDebug: false
});
```
### Use in the Vue 3.0
See[main.js - Vue 3.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
>Since the version v2.1.0, if you use CDN in your HTML, must be use `baiduAnalytics.default` to use the plugin.
```js
createApp(app)
.use(router)
.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb'
],
isDebug: false
})
.mount('#app');
```
### Use in the VuePress
The plugin can also be used in [VuePress](https://vuepress.vuejs.org/zh/) project.
In the `/docs/.vuepress` folder under the project, create a file named `enhanceApp.js`, and write the following code in this file.
You can see [App Level Enhancements - VuePress](https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements) to learn more.
```js
import baiduAnalytics from 'vue-baidu-analytics'
export default ({ Vue, router }) => {
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb',
'ccccccccccccccccccc'
],
isDebug: false
});
};
```
You can turn on the debug mode in the development environment to learn about related reports (remember to turn off debug before going online).
## API
Since the version v2.1.0, you can use the Global API `$pushBAIDU` and the Hooks API `usePush` in your project, they both support the Vue 2.0 and 3.0.
>The APIs can't be used directly, it needs to cooperate with the [Methods](#Methods) to operate the specific functions.
### The Global API
In the Vue 2.0:
```js
// xxx.vue in Vue 2.0
export default {
// ...
mounted () {
this.$pushBAIDU.pv('/example-url/');
},
// ...
}
```
In the Vue 3.0, you can use the Global Properties:
```js
// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'
export default {
setup () {
const app = getCurrentInstance();
app.appContext.config.globalProperties.$pushBAIDU.pv('/example-url/');
}
}
```
You can also import the proxy component in the current instance to operate:
```js
// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { proxy } = getCurrentInstance();
proxy.$pushBAIDU.pv('/example-url/');
}
}
```
### The Hooks API
In the Vue 2.0:
```js
// xxx.vue in Vue 2.0
import { usePush } from 'vue-baidu-analytics'
export default {
// ...
data () {
return {
baidu: usePush()
}
},
mounted () {
this.baidu.pv('/example-url/');
},
// ...
}
```
In the Vue 3.0, just use it as if you were using the route `const router = useRouter();`.
```js
// xxx.vue in Vue 3.0
import { usePush } from 'vue-baidu-analytics'
export default {
setup () {
const baidu = usePush();
baidu.pv('/example-url/');
}
}
```
If the name of the hook API has already been declared, you can rename it when import.
```js
import { usePush as useBaidu } from 'vue-baidu-analytics'
const baidu = useBaidu();
```
## Methods
All methods are needs to be triggered through the API, and the methods supported by the Global API and the Hooks API are exactly the same.
Method|Description
:--|:--
Manually report the page views|[Click here to see.](#manually-report-the-page-views)
Manually report the event analysis|[Click here to see.](#manually-report-the-event-analysis)
>Since there are still many users of Vue 2.0, the following examples only use the operation method of Vue 2.0 to demonstrate. Vue 3.0 can call specific methods according to the description of the Hooks API.
Tips: If multiple site IDs are configured, the data will be reported to all sites at the same time.
### Manually report the page views
If you switch content rendering on some pages through Tab, but you need to report access data, you can use this method to manually report.
Method|Description
:-:|-
pv|Manually perform PV data reporting.
**Params**
Param|Required|Type|Description
:-:|:-:|:-:|-
pageUrl|false|string|The URL submitted for the report must be a relative path starting with `/`, if not filled, it will be submitted as the domain name root directory by default.
**Example**
```js
this.$pushBAIDU.pv('/example-url/');
```
### Manually report the event analysis
For example, there is a "exchange" function button on your page. If you want to count the clicks of this button, you can perform click analysis by binding the button to report events.
Method|Description
:-:|-
event|Manually perform event analysis data reporting.
**Params**
Param|Required|Type|Description
:-:|:-:|:-:|-
category|true|string|The name of the location where the event occurred, e.g. `banner`
action|true|string|The description of the behavior that generated the event, e.g. `click`
label|false|string|The name of the label that generated the event can be used to record the event sub-id, e.g. `bannerId_123`. (@default: '')
value|false|number|The score of the event. (@default: 0)
**Example**
```js
this.$pushBAIDU.event(
this.category,
this.action,
this.label,
this.value
);
```
## License
[MIT License](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/LICENSE) © 2019 [chengpeiquan](https://github.com/chengpeiquan)

184
README.md
View File

@ -10,95 +10,94 @@
<br>
<br>
English | [简体中文](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/README.zh-CN.md)
简体中文 | [English](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/README.en.md)
Only 3 kB, this plugin base on the Baidu analytics, it can help you quickly to collect the page views on your website, including single page web application.
一个只有 3 kB 大小的插件,可以帮你轻松解决 SPA 单页面项目浏览数据不准确的问题,基于 Vue 路由访问轨迹自动向百度统计平台上报 PV / 事件数据,使用本插件的项目需要引入 [Vue Router](https://router.vuejs.org/) 。
Projects using this plugin need to be import [Vue Router](https://router.vuejs.org/) .
>本插件自 v2.0.0 开始,最新版插件支持在 Vue 3.0 项目下使用,同时兼容 Vue 2.0 项目的使用,具体使用方法请看下方说明以及在线 demo 。<br>对 Vue 3.0 感兴趣,但还在观望的同学,欢迎阅读我踩坑总结的:[Vue3.0学习教程与实战案例](https://vue3.chengpeiquan.com/) 持续更新ing
>Since the version v2.0.0, it supports the Vue 3.0, and is compatible with the Vue 2.0, you can see the live demo to learn more.<br>If you havent started using Vue 3.0, welcome to read the tutorial [learning Vue3](https://vue3.chengpeiquan.com/) .
## 功能
## Features
* 异步载入百度统计脚本,无需修改入口 HTML
* Asynchronously load the Baidu analytics scripts, no need to modify the entry HTML.
* 支持部署多个站点 ID ,并对应进行数据上报(跨部门合作项目,双方均要收集数据时非常有用)
* Support the deployment of multiple site IDs and corresponding data reporting.
* 支持自动上报路由切换产生的 PV 数据(支持 hash 模式和 history 模式的地址)
* Supports automatic reporting of PV data generated by route switching (supports hash mode and history mode).
* 支持手动提交 PV 上报
* Support manual submission of page views reports.
* 支持手动提交事件分析上报
* Support manual submission of event reports.
* 自动识别 Vue 版本,自动适配 Vue 2.0 / Vue 3.0 使用(本插件 v2.0.0 版本新增)
* Since the version v2.0.0, the plugin can automatically recognize the Vue version at Vue 2.0 or Vue 3.0 .
* 提供了 Hooks API本插件 v2.1.0 版本新增,因此 CDN 安装的用法略有调整,请留意使用说明)
* Since the version v2.1.0, Hooks API is provided (So the usage of CDN installation is slightly adjusted)
## 项目
## Project
理论上只要引入了 Vue 和 Vue Router 的项目均可以正常使用,包括但不限于以下类型:
As long as Vue and Vue Router are introduced, the projects can be used normally, no matter what method is used to develop your project, e.g. :
* Vue-CLI 脚手架项目
* Vue-CLI scaffolding project
* Vite 项目
* Vite project
* 引入 Vue 相关 CDN 的 HTML 页面
* Introduce the HTML page of Vue related CDN
* VuePress 项目
* VuePress project
也不仅限于 SPA 单页面项目,在 SSG / SSR 项目里也可以使用。
It is not limited to SPA single page projects, it can also be used in SSG / SSR projects.
## 预览
## Preview
两个在线 demo 均已开启 debug 模式,可开启控制台查看上报情况。
Both live demos have enabled debug mode, and you can open the console to view the report.
Vue 2.0 版本:[vue-baidu-analytics demo for Vue 2.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
Vue 2.0 [vue-baidu-analytics demo for Vue 2.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
Vue 3.0 版本:[vue-baidu-analytics demo for Vue 3.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
Vue 3.0 [vue-baidu-analytics demo for Vue 3.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
## 选项
## Options
Option|Required|Type|Description
选项|是否必填|选项类型|选项说明
:-:|:-:|:-:|-
router|true|object|Vue Router, this plugin is based on Vue Router.
siteIdList|true|string[]|The site ids for Baidu analytics, if only one site needs to be reported, just keep one item in the array.
isDebug|false|boolean|if `true`, it will open the debug modeyou can see the log in the console.
router|是|object|Vue Router本插件基于路由使用
siteIdList|是|string[]|百度统计的站点 id 列表,只有一个站点需要上报就保留一个 id 即可
isDebug|否|boolean|是否开启 debug 模式,默认 `false`,开启后会在 F12 控制台打印上报信息
Tips: Please remember to turn off the debug mode before publish.
友情提示:上线前记得关闭 debug 模式。
## Install
## 安装
You can install the plugin from NPM.
方式一:通过 NPM 安装
```bash
npm install vue-baidu-analytics --save-dev
```
Can also use the CDN URL in your HTML.
方式二:通过 CDN 安装
```html
<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
```
## Usage
## 启用
If use NPM, you must import the plugin in `main.js` .
通过 NPM 安装的项目,需要先在 main.js 里引入插件(通过 CDN 则无需该步骤)。
```js
import baiduAnalytics from 'vue-baidu-analytics'
```
Then, refer to the sample code in Vue 2.0 and Vue 3.0 below to use it.
安装插件后,在 main.js 引入以下代码(注意 Vue 2.0 和 Vue 3.0 的用法区别),即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
When the route is switched, the new URL address will be reported to Baidu analytics after the visit.
后续在路由切换过程中,也会根据路由的切换提交相应的 URL 信息到百度统计。
### Use in the Vue 2.0
### 在 Vue 2.0 里使用
See[main.js - Vue 2.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
可参考demo[main.js - Vue 2.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
>Since the version v2.1.0, if you use CDN in your HTML, must be use `baiduAnalytics.default` to use the plugin.
>自 v2.1.0 版本开始,如果是通过 CDN 安装,需要使用 `baiduAnalytics.default` 去激活插件,通过 NPM 安装的脚手架项目则使用 `baiduAnalytics` 就可以
```js
// 启动插件
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
@ -109,15 +108,21 @@ Vue.use(baiduAnalytics, {
});
```
### Use in the Vue 3.0
### 在 Vue 3.0 里使用
See[main.js - Vue 3.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
可参考demo[main.js - Vue 3.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
>Since the version v2.1.0, if you use CDN in your HTML, must be use `baiduAnalytics.default` to use the plugin.
>自 v2.1.0 版本开始,如果是通过 CDN 安装,需要使用 `baiduAnalytics.default` 去激活插件,通过 NPM 安装的脚手架项目则使用 `baiduAnalytics` 就可以
```js
/**
* 初始化Vue
*/
createApp(app)
// 启动路由
.use(router)
// 启动插件
.use(baiduAnalytics, {
router: router,
siteIdList: [
@ -126,16 +131,18 @@ createApp(app)
],
isDebug: false
})
// 挂载到节点上
.mount('#app');
```
### Use in the VuePress
### 在 VuePress 里使用
The plugin can also be used in [VuePress](https://vuepress.vuejs.org/zh/) project.
插件也支持在Vue的静态文档 [VuePress](https://vuepress.vuejs.org/zh/) 项目里使用。
In the `/docs/.vuepress` folder under the project, create a file named `enhanceApp.js`, and write the following code in this file.
在项目下的 `/docs/.vuepress` 文件夹下,创建一个 `enhanceApp.js`,按照下面的方式引入即可启动数据上报功能。
You can see [App Level Enhancements - VuePress](https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements) to learn more.
官方文档传送门:[应用级别的配置 - VuePress](https://vuepress.vuejs.org/zh/guide/basic-config.html#%E5%BA%94%E7%94%A8%E7%BA%A7%E5%88%AB%E7%9A%84%E9%85%8D%E7%BD%AE)
```js
import baiduAnalytics from 'vue-baidu-analytics'
@ -153,17 +160,19 @@ export default ({ Vue, router }) => {
};
```
You can turn on the debug mode in the development environment to learn about related reports (remember to turn off debug before going online).
可在开发环境打开 debug 模式了解相关的上报情况(上线前记得关闭 debug )。
## API
Since the version v2.1.0, you can use the Global API `$pushBAIDU` and the Hooks API `usePush` in your project, they both support the Vue 2.0 and 3.0.
自 v2.1.0 版本开始,插件支持直接调用的全局 API `$pushBAIDU` 和按需导入的钩子 API `usePush` 两种方式。
>The APIs can't be used directly, it needs to cooperate with the [Methods](#Methods) to operate the specific functions.
这两种方式在 Vue 2.0 和 3.0 里均可以使用,只不过按照使用习惯和从 Vue 官方推荐的角度来说,全局 API 更适合 Vue 2.0 项目,钩子 API 更适合 Vue 3.0 项目。
### The Global API
> 插件的 API 不可以直接使用,需要配合 API 里面的 [方法](#方法) 才可以操作到具体功能。
In the Vue 2.0:
### 全局 API
在 Vue 2.0 里,只需要通过我们熟悉的 `this` 去操作即可:
```js
// xxx.vue in Vue 2.0
@ -176,7 +185,7 @@ export default {
}
```
In the Vue 3.0, you can use the Global Properties:
在 Vue 3.0 里,可以按照官方文档的推荐,导入当前实例变量,通过当前实例变量去操作全局方法:
```js
// xxx.vue in Vue 3.0
@ -190,7 +199,7 @@ export default {
}
```
You can also import the proxy component in the current instance to operate:
也可以导入当前实例里的代理组件去操作:
```js
// xxx.vue in Vue 3.0
@ -204,9 +213,11 @@ export default {
}
```
### The Hooks API
### 钩子 API
In the Vue 2.0:
>钩子 API 需要在用到的组件里 import 导入才可以使用。
在 Vue 2.0 里,你可以绑定一个钩子变量去使用:
```js
// xxx.vue in Vue 2.0
@ -216,17 +227,19 @@ export default {
// ...
data () {
return {
// 创建钩子变量
baidu: usePush()
}
},
mounted () {
// 通过钩子变量去触发方法
this.baidu.pv('/example-url/');
},
// ...
}
```
In the Vue 3.0, just use it as if you were using the route `const router = useRouter();`.
在 Vue 3.0 里,就像在使用路由 `const router = useRouter();` 一样去使用就可以。
```js
// xxx.vue in Vue 3.0
@ -234,70 +247,73 @@ import { usePush } from 'vue-baidu-analytics'
export default {
setup () {
// 创建钩子变量
const baidu = usePush();
// 通过钩子变量去触发方法
baidu.pv('/example-url/');
}
}
```
If the name of the hook API has already been declared, you can rename it when import.
另外,如果 API 与其他插件冲突的话(比如你同时使用了 [vue-cnzz-analytics](https://github.com/analyticsjs/vue-cnzz-analytics)),你可以在导入的时候重命名:
```js
import { usePush as useBaidu } from 'vue-baidu-analytics'
const baidu = useBaidu();
```
## Methods
## 方法
All methods are needs to be triggered through the API, and the methods supported by the Global API and the Hooks API are exactly the same.
方法需要通过 API 去触发,全局 API 和 钩子 API 支持的方法都是完全一样的。
Method|Description
方法功能|使用说明
:--|:--
Manually report the page views|[Click here to see.](#manually-report-the-page-views)
Manually report the event analysis|[Click here to see.](#manually-report-the-event-analysis)
手动上报页面 PV|[点击查看](#手动上报页面PV)
手动上报事件分析|[点击查看](#手动上报事件分析)
>Since there are still many users of Vue 2.0, the following examples only use the operation method of Vue 2.0 to demonstrate. Vue 3.0 can call specific methods according to the description of the Hooks API.
> 由于目前 Vue 2.0 的使用者还比较多,下面的举例均只用 Vue 2.0 的操作方法进行演示Vue 3.0 可根据钩子 API 的说明去调用具体的方法。
Tips: If multiple site IDs are configured, the data will be reported to all sites at the same time.
注:如果配置了多个站点 ID ,数据都会同时上报给所有站点。
### Manually report the page views
### 手动上报页面 PV
If you switch content rendering on some pages through Tab, but you need to report access data, you can use this method to manually report.
如果你有些页面是通过 Tab 切页进行内容渲染切换,但又需要上报访问数据的话,就可以使用这个方法来进行手动上报。
Method|Description
方法名称|功能说明
:-:|-
pv|Manually perform PV data reporting.
pv|手动执行 PV 数据上报
**Params**
**参数**
Param|Required|Type|Description
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
pageUrl|false|string|The URL submitted for the report must be a relative path starting with `/`, if not filled, it will be submitted as the domain name root directory by default.
pageUrl|否|string|提交上报的 URL ,必须是以 `/` 开头的相对路径,如果不填,则会默认提交为域名根目录
**Example**
**使用示范**
```js
this.$pushBAIDU.pv('/example-url/');
```
### Manually report the event analysis
### 手动上报事件分析
For example, there is a "exchange" function button on your page. If you want to count the clicks of this button, you can perform click analysis by binding the button to report events.
比如你的页面上有个 “换一换” 的功能按钮,想要统计这个按钮的点击情况,就可以通过给按钮绑定上报事件来进行点击情况分析。
Method|Description
方法名称|功能说明
:-:|-
event|Manually perform event analysis data reporting.
event|手动执行事件分析数据上报
**Params**
**参数**
Param|Required|Type|Description
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
category|true|string|The name of the location where the event occurred, e.g. `banner`
action|true|string|The description of the behavior that generated the event, e.g. `click`
label|false|string|The name of the label that generated the event can be used to record the event sub-id, e.g. `bannerId_123`. (@default: '')
value|false|number|The score of the event. (@default: 0)
category|是|string|产生该事件的位置名称,比如 `首页banner`
action|是|string|产生该事件的行为描述,比如 `点击`
label|否|string|产生该事件的标签名称,可以用来记录事件子 id比如 `bannerId_123`,默认为空
value|否|number|该事件的分值,默认 0
**Example**
**使用示范**
```js
this.$pushBAIDU.event(

View File

@ -1,329 +0,0 @@
<p align='center'>
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/04/20210404235335.png" alt="vue-baidu-analytics" />
</p>
<p align='center'>
<a href='https://www.npmjs.com/package/vue-baidu-analytics'>
<img src="https://img.shields.io/npm/v/vue-baidu-analytics?color=41b883&label=npm" />
</a>
</p>
<br>
<br>
[English](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/README.md) | 简体中文
一个只有 3 kB 大小的插件,可以帮你轻松解决 SPA 单页面项目浏览数据不准确的问题,基于 Vue 路由访问轨迹自动向百度统计平台上报 PV / 事件数据,使用本插件的项目需要引入 [Vue Router](https://router.vuejs.org/) 。
>本插件自 v2.0.0 开始,最新版插件支持在 Vue 3.0 项目下使用,同时兼容 Vue 2.0 项目的使用,具体使用方法请看下方说明以及在线 demo 。<br>对 Vue 3.0 感兴趣,但还在观望的同学,欢迎阅读我踩坑总结的:[Vue3.0学习教程与实战案例](https://vue3.chengpeiquan.com/) 持续更新ing
## 功能
* 异步载入百度统计脚本,无需修改入口 HTML
* 支持部署多个站点 ID ,并对应进行数据上报(跨部门合作项目,双方均要收集数据时非常有用)
* 支持自动上报路由切换产生的 PV 数据(支持 hash 模式和 history 模式的地址)
* 支持手动提交 PV 上报
* 支持手动提交事件分析上报
* 自动识别 Vue 版本,自动适配 Vue 2.0 / Vue 3.0 使用(本插件 v2.0.0 版本新增)
* 提供了 Hooks API本插件 v2.1.0 版本新增,因此 CDN 安装的用法略有调整,请留意使用说明)
## 项目
理论上只要引入了 Vue 和 Vue Router 的项目均可以正常使用,包括但不限于以下类型:
* Vue-CLI 脚手架项目
* Vite 项目
* 引入 Vue 相关 CDN 的 HTML 页面
* VuePress 项目
也不仅限于 SPA 单页面项目,在 SSG / SSR 项目里也可以使用。
## 预览
两个在线 demo 均已开启 debug 模式,可开启控制台查看上报情况。
Vue 2.0 版本:[vue-baidu-analytics demo for Vue 2.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
Vue 3.0 版本:[vue-baidu-analytics demo for Vue 3.x](https://analyticsjs.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
## 选项
选项|是否必填|选项类型|选项说明
:-:|:-:|:-:|-
router|是|object|Vue Router本插件基于路由使用
siteIdList|是|string[]|百度统计的站点 id 列表,只有一个站点需要上报就保留一个 id 即可
isDebug|否|boolean|是否开启 debug 模式,默认 `false`,开启后会在 F12 控制台打印上报信息
友情提示:上线前记得关闭 debug 模式。
## 安装
方式一:通过 NPM 安装
```bash
npm install vue-baidu-analytics --save-dev
```
方式二:通过 CDN 安装
```html
<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
```
## 启用
通过 NPM 安装的项目,需要先在 main.js 里引入插件(通过 CDN 则无需该步骤)。
```js
import baiduAnalytics from 'vue-baidu-analytics'
```
安装插件后,在 main.js 引入以下代码(注意 Vue 2.0 和 Vue 3.0 的用法区别),即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
后续在路由切换过程中,也会根据路由的切换提交相应的 URL 信息到百度统计。
### 在 Vue 2.0 里使用
可参考demo[main.js - Vue 2.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
>自 v2.1.0 版本开始,如果是通过 CDN 安装,需要使用 `baiduAnalytics.default` 去激活插件,通过 NPM 安装的脚手架项目则使用 `baiduAnalytics` 就可以
```js
// 启动插件
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb'
],
isDebug: false
});
```
### 在 Vue 3.0 里使用
可参考demo[main.js - Vue 3.0 demo](https://analyticsjs.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
>自 v2.1.0 版本开始,如果是通过 CDN 安装,需要使用 `baiduAnalytics.default` 去激活插件,通过 NPM 安装的脚手架项目则使用 `baiduAnalytics` 就可以
```js
/**
* 初始化Vue
*/
createApp(app)
// 启动路由
.use(router)
// 启动插件
.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb'
],
isDebug: false
})
// 挂载到节点上
.mount('#app');
```
### 在 VuePress 里使用
插件也支持在Vue的静态文档 [VuePress](https://vuepress.vuejs.org/zh/) 项目里使用。
在项目下的 `/docs/.vuepress` 文件夹下,创建一个 `enhanceApp.js`,按照下面的方式引入即可启动数据上报功能。
官方文档传送门:[应用级别的配置 - VuePress](https://vuepress.vuejs.org/zh/guide/basic-config.html#%E5%BA%94%E7%94%A8%E7%BA%A7%E5%88%AB%E7%9A%84%E9%85%8D%E7%BD%AE)
```js
import baiduAnalytics from 'vue-baidu-analytics'
export default ({ Vue, router }) => {
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb',
'ccccccccccccccccccc'
],
isDebug: false
});
};
```
可在开发环境打开 debug 模式了解相关的上报情况(上线前记得关闭 debug )。
## API
自 v2.1.0 版本开始,插件支持直接调用的全局 API `$pushBAIDU` 和按需导入的钩子 API `usePush` 两种方式。
这两种方式在 Vue 2.0 和 3.0 里均可以使用,只不过按照使用习惯和从 Vue 官方推荐的角度来说,全局 API 更适合 Vue 2.0 项目,钩子 API 更适合 Vue 3.0 项目。
> 插件的 API 不可以直接使用,需要配合 API 里面的 [方法](#方法) 才可以操作到具体功能。
### 全局 API
在 Vue 2.0 里,只需要通过我们熟悉的 `this` 去操作即可:
```js
// xxx.vue in Vue 2.0
export default {
// ...
mounted () {
this.$pushBAIDU.pv('/example-url/');
},
// ...
}
```
在 Vue 3.0 里,可以按照官方文档的推荐,导入当前实例变量,通过当前实例变量去操作全局方法:
```js
// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'
export default {
setup () {
const app = getCurrentInstance();
app.appContext.config.globalProperties.$pushBAIDU.pv('/example-url/');
}
}
```
也可以导入当前实例里的代理组件去操作:
```js
// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { proxy } = getCurrentInstance();
proxy.$pushBAIDU.pv('/example-url/');
}
}
```
### 钩子 API
>钩子 API 需要在用到的组件里 import 导入才可以使用。
在 Vue 2.0 里,你可以绑定一个钩子变量去使用:
```js
// xxx.vue in Vue 2.0
import { usePush } from 'vue-baidu-analytics'
export default {
// ...
data () {
return {
// 创建钩子变量
baidu: usePush()
}
},
mounted () {
// 通过钩子变量去触发方法
this.baidu.pv('/example-url/');
},
// ...
}
```
在 Vue 3.0 里,就像在使用路由 `const router = useRouter();` 一样去使用就可以。
```js
// xxx.vue in Vue 3.0
import { usePush } from 'vue-baidu-analytics'
export default {
setup () {
// 创建钩子变量
const baidu = usePush();
// 通过钩子变量去触发方法
baidu.pv('/example-url/');
}
}
```
另外,如果 API 与其他插件冲突的话(比如你同时使用了 [vue-cnzz-analytics](https://github.com/analyticsjs/vue-cnzz-analytics)),你可以在导入的时候重命名:
```js
import { usePush as useBaidu } from 'vue-baidu-analytics'
const baidu = useBaidu();
```
## 方法
方法需要通过 API 去触发,全局 API 和 钩子 API 支持的方法都是完全一样的。
方法功能|使用说明
:--|:--
手动上报页面 PV|[点击查看](#手动上报页面PV)
手动上报事件分析|[点击查看](#手动上报事件分析)
> 由于目前 Vue 2.0 的使用者还比较多,下面的举例均只用 Vue 2.0 的操作方法进行演示Vue 3.0 可根据钩子 API 的说明去调用具体的方法。
注:如果配置了多个站点 ID ,数据都会同时上报给所有站点。
### 手动上报页面 PV
如果你有些页面是通过 Tab 切页进行内容渲染切换,但又需要上报访问数据的话,就可以使用这个方法来进行手动上报。
方法名称|功能说明
:-:|-
pv|手动执行 PV 数据上报
**参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
pageUrl|否|string|提交上报的 URL ,必须是以 `/` 开头的相对路径,如果不填,则会默认提交为域名根目录
**使用示范**
```js
this.$pushBAIDU.pv('/example-url/');
```
### 手动上报事件分析
比如你的页面上有个 “换一换” 的功能按钮,想要统计这个按钮的点击情况,就可以通过给按钮绑定上报事件来进行点击情况分析。
方法名称|功能说明
:-:|-
event|手动执行事件分析数据上报
**参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
category|是|string|产生该事件的位置名称,比如 `首页banner`
action|是|string|产生该事件的行为描述,比如 `点击`
label|否|string|产生该事件的标签名称,可以用来记录事件子 id比如 `bannerId_123`,默认为空
value|否|number|该事件的分值,默认 0
**使用示范**
```js
this.$pushBAIDU.event(
this.category,
this.action,
this.label,
this.value
);
```
## License
[MIT License](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/LICENSE) © 2019 [chengpeiquan](https://github.com/chengpeiquan)

View File

@ -1,6 +1,6 @@
{
"name": "vue-baidu-analytics",
"version": "2.1.0",
"version": "2.2.0",
"description": "A data collection tool that supports reporting of single-page application data built by Vue 3.0 & 2.0 & VuePress, based on baidu statistics.",
"main": "dist/vue-baidu-analytics.min.js",
"types": "vue-baidu-analytics.d.ts",
@ -52,7 +52,7 @@
"rollup-plugin-banner2": "^1.2.2",
"rollup-plugin-terser": "^7.0.0",
"rollup-plugin-typescript2": "^0.30.0",
"tslib": "^2.0.1",
"tslib": "^2.3.0",
"typescript": "^4.0.2"
},
"husky": {