mirror of
https://github.com/analyticsjs/vue-baidu-analytics.git
synced 2025-04-04 23:42:46 +08:00
chengpeiquan
GitHub
commit
173917b754
2
.github/FUNDING.yml
vendored
2
.github/FUNDING.yml
vendored
@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: [chengpeiquan](https://github.com/chengpeiquan/sponsor)
|
||||
custom: https://github.com/chengpeiquan/sponsor
|
||||
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 chengpeiquan
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
297
README.md
297
README.md
@ -1,116 +1,141 @@
|
||||
vue-baidu-analytics 使用说明
|
||||
===
|
||||
<p align='center'>
|
||||
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/04/20210404235010.png" alt="vue-baidu-analytics" />
|
||||
</p>
|
||||
|
||||
基于 Vue 开发的百度统计插件，可以在 `Vue-CLI 脚手架项目` 或者 `引入了 Vue 相关 CDN 的普通页面`，以及 `VuePress` 项目上使用，使用本插件的项目需要引入 `Vue Router`。
|
||||
<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>
|
||||
|
||||
> v2.0 版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对 Vue 3.0 感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
|
||||
English | [简体中文](https://github.com/analyticsjs/vue-baidu-analytics/blob/main/README.zh-CN.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.
|
||||
|
||||
* 异步载入百度统计脚本，无需修改入口html
|
||||
Projects using this plugin need to be import [Vue Router](https://router.vuejs.org/) .
|
||||
|
||||
* 支持部署多个站点id，并对应进行数据上报
|
||||
>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 haven’t started using Vue 3.0, welcome to read the tutorial [learning Vue3](https://vue3.chengpeiquan.com/) .
|
||||
|
||||
* 支持自动上报路由切换产生的pv数据（支持 `hash模式` 和 `history模式` 的地址）
|
||||
## Features
|
||||
|
||||
* 支持手动提交pv上报
|
||||
* Asynchronously load the Baidu analytics scripts, no need to modify the entry HTML.
|
||||
|
||||
* 支持手动提交事件分析上报
|
||||
* Support the deployment of multiple site IDs and corresponding data reporting.
|
||||
|
||||
* 自动识别Vue版本，自动适配Vue 2.0/3.0使用（插件2.0版本新增）
|
||||
* Supports automatic reporting of PV data generated by route switching (supports hash mode and history mode).
|
||||
|
||||
## 预览
|
||||
* Support manual submission of page views reports.
|
||||
|
||||
demo已开启debug模式，可开启控制台查看上报情况。
|
||||
* Support manual submission of event reports.
|
||||
|
||||
Vue 2.0 版本：[vue-baidu-analytics demo for Vue 2.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
|
||||
* Since the version v2.0.0, the plugin can automatically recognize the Vue version at Vue 2.0 or Vue 3.0 .
|
||||
|
||||
Vue 3.0 版本：[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
|
||||
* Since the version v2.1.0, Hooks API is provided (So the usage of CDN installation is slightly adjusted)
|
||||
|
||||
## 安装
|
||||
## Project
|
||||
|
||||
方式一：通过 NPM 安装
|
||||
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 mode，you 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.
|
||||
|
||||
```
|
||||
npm install vue-baidu-analytics --save-dev
|
||||
```
|
||||
|
||||
方式二：通过 CDN 安装
|
||||
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
|
||||
|
||||
参数|是否必填|参数类型|参数说明
|
||||
:-:|:-:|:-:|-
|
||||
router|是|object|Vue Router，本插件基于路由使用
|
||||
siteIdList|是|string[]|百度统计的站点 id 列表，item 为站点 id <br>只有一个站点需要上报就保留一个 item 即可
|
||||
isDebug|否|boolean|是否开启 debug 模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
|
||||
|
||||
## 使用
|
||||
|
||||
通过 NPM 安装的项目，需要先在 `main.js` 里引入插件（通过 CDN 则无需该步骤）。
|
||||
If use NPM, you must import the plugin in `main.js` .
|
||||
|
||||
```js
|
||||
import baiduAnalytics from 'vue-baidu-analytics'
|
||||
```
|
||||
|
||||
安装插件后，在 `main.js` 引入以下代码（注意区分 Vue 2.0 和 Vue 3.0 的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
||||
Then, refer to the sample code in Vue 2.0 and Vue 3.0 below to use it.
|
||||
|
||||
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
|
||||
When the route is switched, the new URL address will be reported to Baidu analytics after the visit.
|
||||
|
||||
### 在 Vue 2.0 里使用
|
||||
### Use in the Vue 2.0
|
||||
|
||||
可参考demo：[main.js - Vue 2.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
|
||||
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',
|
||||
'ccccccccccccccccccc'
|
||||
'bbbbbbbbbbbbbbbbbbb'
|
||||
],
|
||||
isDebug: false
|
||||
});
|
||||
```
|
||||
|
||||
### 在 Vue 3.0 里使用
|
||||
### Use in the Vue 3.0
|
||||
|
||||
可参考demo：[main.js - Vue 3.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
|
||||
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
|
||||
/**
|
||||
* 初始化Vue
|
||||
*/
|
||||
createApp(app)
|
||||
// 启动路由
|
||||
.use(router)
|
||||
|
||||
// 启动插件
|
||||
.use(baiduAnalytics, {
|
||||
router: router,
|
||||
siteIdList: [
|
||||
'aaaaaaaaaaaaaaaaaaa',
|
||||
'bbbbbbbbbbbbbbbbbbb',
|
||||
'ccccccccccccccccccc'
|
||||
'bbbbbbbbbbbbbbbbbbb'
|
||||
],
|
||||
isDebug: false
|
||||
})
|
||||
|
||||
// 挂载到节点上
|
||||
.mount('#app');
|
||||
```
|
||||
|
||||
### 在 VuePress 里使用
|
||||
### Use in the VuePress
|
||||
|
||||
插件也支持在Vue的静态文档 [VuePress](https://vuepress.vuejs.org/zh/) 项目里使用。
|
||||
The plugin can also be used in [VuePress](https://vuepress.vuejs.org/zh/) project.
|
||||
|
||||
在项目下的 `/docs/.vuepress` 文件夹下，创建一个 `enhanceApp.js`，按照下面的方式引入即可启动数据上报功能。
|
||||
In the `/docs/.vuepress` folder under the project, create a file named `enhanceApp.js`, and write the following code in this file.
|
||||
|
||||
官方文档传送门：[应用级别的配置 - 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)
|
||||
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'
|
||||
@ -128,62 +153,151 @@ export default ({ Vue, router }) => {
|
||||
};
|
||||
```
|
||||
|
||||
可在开发环境打开 debug 模式了解相关的上报情况（上线前记得关闭 debug ）。
|
||||
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
|
||||
|
||||
插件目前封装了两个常用的 API ，统一挂载到 Vue 实例上的 `$pushBAIDU` 去调用。
|
||||
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.
|
||||
|
||||
注：如果配置了多个站点 id ，会同时上报给所有站点。
|
||||
>The APIs can't be used directly, it needs to cooperate with the [Methods](#Methods) to operate the specific functions.
|
||||
|
||||
### 手动上报页面 PV
|
||||
### The Global API
|
||||
|
||||
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|手动执行PV数据上报
|
||||
pv|Manually perform PV data reporting.
|
||||
|
||||
**API 参数**
|
||||
**Params**
|
||||
|
||||
参数|是否必填|参数类型|参数说明
|
||||
Param|Required|Type|Description
|
||||
:-:|:-:|:-:|-
|
||||
pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<br>如果不填，则会默认提交为域名根目录
|
||||
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.
|
||||
|
||||
**使用示范**
|
||||
|
||||
在 Vue 2.0 里使用
|
||||
**Example**
|
||||
|
||||
```js
|
||||
this.$pushBAIDU.pv(this.pageUrl);
|
||||
this.$pushBAIDU.pv('/example-url/');
|
||||
```
|
||||
|
||||
在 Vue 3.0 里使用
|
||||
### Manually report the event analysis
|
||||
|
||||
（使用 3.0 的生命周期，需要遵循 Vue3 的规范，引入一个 Vue 自带的代理组件，并写在 `setup` 里执行）
|
||||
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.
|
||||
|
||||
```js
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
proxy.$pushBAIDU.pv(pageUrl.value);
|
||||
```
|
||||
|
||||
### 手动上报事件分析
|
||||
|
||||
API 名称|功能说明
|
||||
Method|Description
|
||||
:-:|-
|
||||
event|手动执行事件分析数据上报
|
||||
|
||||
**API 参数**
|
||||
**Params**
|
||||
|
||||
参数|是否必填|参数类型|参数说明
|
||||
Param|Required|Type|Description
|
||||
:-:|:-:|:-:|-
|
||||
category|是|string|产生该事件的位置名称，比如 `首页banner`
|
||||
action|是|string|产生该事件的行为描述，比如 `点击`
|
||||
label|否|string|产生该事件的标签名称，可以用来记录事件子 id，比如 `bannerId_123`，默认为空
|
||||
value|否|number|该事件的分值，默认 0
|
||||
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)
|
||||
|
||||
**使用示范**
|
||||
|
||||
在 Vue 2.0 里使用
|
||||
**Example**
|
||||
|
||||
```js
|
||||
this.$pushBAIDU.event(
|
||||
@ -194,17 +308,6 @@ this.$pushBAIDU.event(
|
||||
);
|
||||
```
|
||||
|
||||
在 Vue 3.0 里使用
|
||||
## License
|
||||
|
||||
（使用 3.0 的生命周期，需要遵循 Vue3 的规范，引入一个 Vue 自带的代理组件，并写在 `setup` 里执行）
|
||||
|
||||
```js
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
proxy.$pushBAIDU.event(
|
||||
category.value,
|
||||
action.value,
|
||||
label.value,
|
||||
value.value
|
||||
);
|
||||
```
|
||||
[MIT License](https://github.com/analyticsjs/vue-baidu-analytics/blob/master/LICENSE) © 2019 [chengpeiquan](https://github.com/chengpeiquan)
|
||||
|
||||
329
README.zh-CN.md
Normal file
329
README.zh-CN.md
Normal file
@ -0,0 +1,329 @@
|
||||
<p align='center'>
|
||||
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/04/20210404235010.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/main/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 安装
|
||||
|
||||
```
|
||||
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)
|
||||
@ -31,9 +31,11 @@ const app = {
|
||||
|
||||
/**
|
||||
* 原来的方式
|
||||
* @description 用代理组件去操作，对 TS 项目不够友好
|
||||
* @description 从当前实例里，导入代理组件去操作，对 TS 项目不够友好
|
||||
*/
|
||||
// const { proxy } = getCurrentInstance();
|
||||
// const instance = getCurrentInstance();
|
||||
// const { proxy } = instance;
|
||||
|
||||
|
||||
// 初始化要用到的数据
|
||||
const pageUrl = ref('');
|
||||
@ -50,7 +52,10 @@ const app = {
|
||||
// 通过钩子去操作
|
||||
baidu.pv(pageUrl.value);
|
||||
|
||||
// 通过代理组件去操作
|
||||
// 也可以通过全局属性去操作
|
||||
// instance.appContext.config.globalProperties.$pushBAIDU.pv(pageUrl.value);
|
||||
|
||||
// 也可以通过代理组件去操作
|
||||
// proxy.$pushBAIDU.pv(pageUrl.value);
|
||||
}
|
||||
|
||||
@ -67,7 +72,15 @@ const app = {
|
||||
value.value
|
||||
);
|
||||
|
||||
// 通过代理组件去操作
|
||||
// 也可以通过全局属性去操作
|
||||
// instance.appContext.config.globalProperties.$pushBAIDU.event(
|
||||
// category.value,
|
||||
// action.value,
|
||||
// label.value,
|
||||
// value.value
|
||||
// );
|
||||
|
||||
// 也可以通过代理组件去操作
|
||||
// proxy.$pushBAIDU.event(
|
||||
// category.value,
|
||||
// action.value,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user