mirror of
https://github.com/analyticsjs/vue-baidu-analytics.git
synced 2025-04-06 03:58:00 +08:00
chengpeiquan
GitHub
commit
1e8b981491
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
121
README.md
121
README.md
@ -3,7 +3,7 @@ vue-baidu-analytics 使用说明
|
||||
|
||||
基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
|
||||
|
||||
注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。
|
||||
> @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
|
||||
|
||||
## 功能
|
||||
|
||||
@ -17,11 +17,29 @@ vue-baidu-analytics 使用说明
|
||||
|
||||
* 支持手动提交事件分析上报
|
||||
|
||||
* 自动识别Vue版本，自动适配Vue 2.0/3.0使用（插件2.0版本新增）
|
||||
|
||||
## 预览
|
||||
|
||||
demo已开启debug模式，可开启控制台查看上报情况。
|
||||
|
||||
点击预览：[vue-baidu-analytics demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/ "vue-baidu-analytics demo")
|
||||
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")
|
||||
|
||||
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")
|
||||
|
||||
## 安装
|
||||
|
||||
方式一：通过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>
|
||||
```
|
||||
|
||||
## 参数
|
||||
|
||||
@ -31,20 +49,6 @@ router|是|object|Vue Router，本插件基于路由使用
|
||||
siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
|
||||
isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过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则无需该步骤）。
|
||||
@ -53,10 +57,14 @@ npm install vue-baidu-analytics --save-dev
|
||||
import baiduAnalytics from 'vue-baidu-analytics'
|
||||
```
|
||||
|
||||
安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
||||
安装插件后，在 `main.js` 引入以下代码（注意区分Vue2.0和Vue3.0的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
||||
|
||||
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
|
||||
|
||||
### 在 Vue 2.0 里使用
|
||||
|
||||
可参考demo：[main.js - Vue 2.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
|
||||
|
||||
```js
|
||||
Vue.use(baiduAnalytics, {
|
||||
router: router,
|
||||
@ -69,6 +77,33 @@ Vue.use(baiduAnalytics, {
|
||||
});
|
||||
```
|
||||
|
||||
### 在 Vue 3.0 里使用
|
||||
|
||||
可参考demo：[main.js - Vue 3.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
|
||||
|
||||
```js
|
||||
/**
|
||||
* 初始化Vue
|
||||
*/
|
||||
createApp(app)
|
||||
// 启动路由
|
||||
.use(router)
|
||||
|
||||
// 启动插件
|
||||
.use(baiduAnalytics, {
|
||||
router: router,
|
||||
siteIdList: [
|
||||
'aaaaaaaaaaaaaaaaaaa',
|
||||
'bbbbbbbbbbbbbbbbbbb',
|
||||
'ccccccccccccccccccc'
|
||||
],
|
||||
isDebug: true
|
||||
})
|
||||
|
||||
// 挂载到节点上
|
||||
.mount('#app');
|
||||
```
|
||||
|
||||
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
|
||||
|
||||
## 方法
|
||||
@ -91,17 +126,20 @@ pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<b
|
||||
|
||||
**使用示范**
|
||||
|
||||
在template里使用
|
||||
|
||||
```html
|
||||
<button @click="$pushBAIDU.pv('/test')">手动上报PV</button>
|
||||
```
|
||||
|
||||
在method里使用
|
||||
在 Vue 2.0 里使用
|
||||
|
||||
```js
|
||||
// this是Vue实例
|
||||
this.$pushBAIDU.pv('/home');
|
||||
this.$pushBAIDU.pv(this.pageUrl);
|
||||
```
|
||||
|
||||
在 Vue 3.0 里使用
|
||||
|
||||
（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
|
||||
|
||||
```js
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
proxy.$pushBAIDU.pv(pageUrl.value);
|
||||
```
|
||||
|
||||
### 手动上报事件分析
|
||||
@ -121,15 +159,28 @@ value|否|number|该事件的分值，默认0
|
||||
|
||||
**使用示范**
|
||||
|
||||
在template里使用（比如：点击了一个id为123的首页banner）
|
||||
|
||||
```html
|
||||
<button @click="$pushBAIDU.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
|
||||
```
|
||||
|
||||
在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
|
||||
在 Vue 2.0 里使用
|
||||
|
||||
```js
|
||||
// this是Vue实例
|
||||
this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
|
||||
this.$pushBAIDU.event(
|
||||
this.category,
|
||||
this.action,
|
||||
this.label,
|
||||
this.value
|
||||
);
|
||||
```
|
||||
|
||||
在 Vue 3.0 里使用
|
||||
|
||||
（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
|
||||
|
||||
```js
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
proxy.$pushBAIDU.event(
|
||||
category.value,
|
||||
action.value,
|
||||
label.value,
|
||||
value.value
|
||||
);
|
||||
```
|
||||
60
demo/css/style.css
Normal file
60
demo/css/style.css
Normal file
@ -0,0 +1,60 @@
|
||||
#app,
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.title {
|
||||
font-size: 40px;
|
||||
color: #000;
|
||||
}
|
||||
.link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link:hover {
|
||||
color: #000;
|
||||
}
|
||||
.nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav .item {
|
||||
color: #666;
|
||||
margin: 0 10px 20px;
|
||||
}
|
||||
.nav .cur {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 240px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
56
demo/js/main-for-vue2.js
Normal file
56
demo/js/main-for-vue2.js
Normal file
@ -0,0 +1,56 @@
|
||||
/**
|
||||
* 初始化路由
|
||||
* routes是来自 js/routes.js 里面的配置
|
||||
*/
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
linkActiveClass: 'cur',
|
||||
linkExactActiveClass: 'cur'
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 引入统计插件
|
||||
*/
|
||||
Vue.use(baiduAnalytics, {
|
||||
router: router,
|
||||
siteIdList: [
|
||||
'aaaaaaaaaaaaaaaaaaa',
|
||||
'bbbbbbbbbbbbbbbbbbb',
|
||||
'ccccccccccccccccccc'
|
||||
],
|
||||
isDebug: true
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 初始化Vue
|
||||
*/
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
data () {
|
||||
return {
|
||||
pageUrl: '',
|
||||
category: '',
|
||||
action: '',
|
||||
label: '',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
pv () {
|
||||
this.$pushBAIDU.pv(this.pageUrl);
|
||||
},
|
||||
event () {
|
||||
this.$pushBAIDU.event(
|
||||
this.category,
|
||||
this.action,
|
||||
this.label,
|
||||
this.value
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
86
demo/js/main-for-vue3.js
Normal file
86
demo/js/main-for-vue3.js
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 导入需要用到的组件
|
||||
*/
|
||||
const { createRouter, createWebHashHistory } = VueRouter;
|
||||
const { createApp, getCurrentInstance, ref } = Vue;
|
||||
|
||||
|
||||
/**
|
||||
* 初始化路由
|
||||
* routes是来自 js/routes.js 里面的配置
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
linkActiveClass: 'cur',
|
||||
linkExactActiveClass: 'cur'
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 创建实例
|
||||
*/
|
||||
const app = {
|
||||
setup () {
|
||||
// 插件要用到的一个代理组件
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
// 初始化要用到的数据
|
||||
const pageUrl = ref('');
|
||||
const category = ref('');
|
||||
const action = ref('');
|
||||
const label = ref('');
|
||||
const value = ref('');
|
||||
|
||||
// 提交pv的操作
|
||||
const pv = () => {
|
||||
proxy.$pushBAIDU.pv(pageUrl.value);
|
||||
}
|
||||
|
||||
// 提交事件的操作
|
||||
const event = () => {
|
||||
proxy.$pushBAIDU.event(
|
||||
category.value,
|
||||
action.value,
|
||||
label.value,
|
||||
value.value
|
||||
);
|
||||
}
|
||||
|
||||
// Vue 3.0 需要把模板要用到的东西 return 出去
|
||||
return {
|
||||
// 数据
|
||||
pageUrl,
|
||||
category,
|
||||
action,
|
||||
label,
|
||||
value,
|
||||
|
||||
// 方法
|
||||
pv,
|
||||
event
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 初始化Vue
|
||||
*/
|
||||
createApp(app)
|
||||
// 启动路由
|
||||
.use(router)
|
||||
|
||||
// 启动插件
|
||||
.use(baiduAnalytics, {
|
||||
router: router,
|
||||
siteIdList: [
|
||||
'aaaaaaaaaaaaaaaaaaa',
|
||||
'bbbbbbbbbbbbbbbbbbb',
|
||||
'ccccccccccccccccccc'
|
||||
],
|
||||
isDebug: true
|
||||
})
|
||||
|
||||
// 挂载到节点上
|
||||
.mount('#app');
|
||||
@ -1,68 +0,0 @@
|
||||
// 定义路由信息
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/page1'
|
||||
},
|
||||
{
|
||||
path: '/page1',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化路由
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
linkActiveClass: 'cur',
|
||||
linkExactActiveClass: 'cur'
|
||||
});
|
||||
|
||||
// 引入统计插件
|
||||
Vue.use(baiduAnalytics, {
|
||||
router: router,
|
||||
siteIdList: [
|
||||
'aaaaaaaaaaaaaaaaaaa',
|
||||
'bbbbbbbbbbbbbbbbbbb',
|
||||
'ccccccccccccccccccc'
|
||||
],
|
||||
isDebug: true
|
||||
});
|
||||
|
||||
// 初始化Vue
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
data () {
|
||||
return {
|
||||
pageUrl: '',
|
||||
category: '',
|
||||
action: '',
|
||||
label: '',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
pv () {
|
||||
this.$pushBAIDU.pv(this.pageUrl);
|
||||
},
|
||||
event () {
|
||||
this.$pushBAIDU.event(this.category, this.action, this.label, this.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
27
demo/js/routes.js
Normal file
27
demo/js/routes.js
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 定义路由信息
|
||||
*/
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/page1'
|
||||
},
|
||||
{
|
||||
path: '/page1',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
component: {
|
||||
template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
|
||||
}
|
||||
}
|
||||
];
|
||||
@ -3,64 +3,19 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>vue baidu analytics demo</title>
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
||||
<style>
|
||||
#app,
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav .item {
|
||||
color: #666;
|
||||
margin: 0 10px 20px;
|
||||
}
|
||||
.nav .cur {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
font-size: 14px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 240px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<title>[Vue2] vue baidu analytics demo</title>
|
||||
<script src="https://unpkg.com/vue@2"></script>
|
||||
<script src="https://unpkg.com/vue-router@3"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<h1>Hello App!</h1>
|
||||
|
||||
<section class="section">
|
||||
<h1 class="title">Hello Vue2 App!</h1>
|
||||
<a href="./vue3.html" class="link">[ 切换到vue3 ]</a>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>切换路由自动上报测试</h2>
|
||||
@ -104,7 +59,8 @@
|
||||
</div>
|
||||
|
||||
<script src="../dist/vue-baidu-analytics.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/routes.js"></script>
|
||||
<script src="js/main-for-vue2.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
66
demo/vue3.html
Normal file
66
demo/vue3.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>[Vue3] vue baidu analytics demo</title>
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<script src="https://unpkg.com/vue-router@4"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<section class="section">
|
||||
<h1 class="title">Hello Vue3 App!</h1>
|
||||
<a href="./vue2.html" class="link">[ 切换到vue2 ]</a>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>切换路由自动上报测试</h2>
|
||||
<div class="nav">
|
||||
<router-link class="item" to="/page1" exact>Go to Page1</router-link>
|
||||
<router-link class="item" to="/page2">Go to Page2</router-link>
|
||||
<router-link class="item" to="/page3">Go to Page3</router-link>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>提交pv测试</h2>
|
||||
<label class="label">
|
||||
<span class="text">pageUrl</span>
|
||||
<input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
|
||||
</label>
|
||||
<button class="button" @click="pv">提交一个pv</button>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>提交event测试</h2>
|
||||
<label class="label">
|
||||
<span class="text">category</span>
|
||||
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="text">action</span>
|
||||
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="text">label</span>
|
||||
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
|
||||
</label>
|
||||
<label class="label">
|
||||
<span class="text">value</span>
|
||||
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
|
||||
</label>
|
||||
<button class="button" @click="event">提交一个event</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../dist/vue-baidu-analytics.js"></script>
|
||||
<script src="js/routes.js"></script>
|
||||
<script src="js/main-for-vue3.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2
dist/main.d.ts
vendored
2
dist/main.d.ts
vendored
@ -1 +1 @@
|
||||
export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): boolean;
|
||||
export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): boolean;
|
||||
|
||||
20
dist/modules/baidu.d.ts
vendored
20
dist/modules/baidu.d.ts
vendored
@ -1,10 +1,10 @@
|
||||
declare class BAIDU {
|
||||
siteId: string;
|
||||
isDebug: boolean;
|
||||
constructor(siteId?: string, isDebug?: boolean);
|
||||
init(): void;
|
||||
setAccount(): void;
|
||||
trackPageview(pageUrl: string): void;
|
||||
trackEvent(category: string, action: string, label: string, value: number): boolean;
|
||||
}
|
||||
export default BAIDU;
|
||||
declare class BAIDU {
|
||||
siteId: string;
|
||||
isDebug: boolean;
|
||||
constructor(siteId?: string, isDebug?: boolean);
|
||||
init(): void;
|
||||
setAccount(): void;
|
||||
trackPageview(pageUrl: string): void;
|
||||
trackEvent(category: string, action: string, label: string, value: number): boolean;
|
||||
}
|
||||
export default BAIDU;
|
||||
|
||||
2
dist/modules/getVueVersion.d.ts
vendored
Normal file
2
dist/modules/getVueVersion.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare const getVueVersion: (Vue: Vue) => number;
|
||||
export default getVueVersion;
|
||||
18
dist/modules/pushBAIDU.d.ts
vendored
18
dist/modules/pushBAIDU.d.ts
vendored
@ -1,9 +1,9 @@
|
||||
declare class PushBAIDU {
|
||||
siteIdList: string[];
|
||||
isDebug: boolean;
|
||||
constructor(siteIdList: string[], isDebug: boolean);
|
||||
init(): void;
|
||||
pv(pageUrl: string): void;
|
||||
event(category: string, action: string, label: string, value: number): void;
|
||||
}
|
||||
export default PushBAIDU;
|
||||
declare class PushBAIDU {
|
||||
siteIdList: string[];
|
||||
isDebug: boolean;
|
||||
constructor(siteIdList: string[], isDebug: boolean);
|
||||
init(): void;
|
||||
pv(pageUrl: string): void;
|
||||
event(category: string, action: string, label: string, value: number): void;
|
||||
}
|
||||
export default PushBAIDU;
|
||||
|
||||
222
dist/vue-baidu-analytics.js
vendored
222
dist/vue-baidu-analytics.js
vendored
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* name: vue-baidu-analytics
|
||||
* version: v1.1.0
|
||||
* version: v2.0.0
|
||||
* author: chengpeiquan
|
||||
*/
|
||||
(function (global, factory) {
|
||||
@ -9,111 +9,129 @@
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.baiduAnalytics = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var BAIDU = (function () {
|
||||
function BAIDU(siteId, isDebug) {
|
||||
if (siteId === void 0) { siteId = ''; }
|
||||
if (isDebug === void 0) { isDebug = false; }
|
||||
this.siteId = siteId;
|
||||
this.isDebug = isDebug;
|
||||
}
|
||||
BAIDU.prototype.init = function () {
|
||||
window._hmt = window._hmt ? window._hmt : [];
|
||||
var SCRIPT = document.createElement('script');
|
||||
SCRIPT['async'] = true;
|
||||
SCRIPT['src'] = "https://hm.baidu.com/hm.js?" + this.siteId;
|
||||
document.querySelector('head').appendChild(SCRIPT);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] siteId load done.\nsiteId: " + this.siteId);
|
||||
}
|
||||
};
|
||||
BAIDU.prototype.setAccount = function () {
|
||||
window._hmt.push(['_setAccount', this.siteId]);
|
||||
};
|
||||
BAIDU.prototype.trackPageview = function (pageUrl) {
|
||||
if (!pageUrl || typeof pageUrl !== 'string') {
|
||||
pageUrl = '/';
|
||||
}
|
||||
if (pageUrl.includes('http')) {
|
||||
var PAGE_CUT = pageUrl.split('/');
|
||||
var HOST_NAME = PAGE_CUT[0] + "//" + PAGE_CUT[2];
|
||||
pageUrl = pageUrl.replace(HOST_NAME, '');
|
||||
}
|
||||
this.setAccount();
|
||||
window._hmt.push(['_trackPageview', pageUrl]);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] track pv done.\nsiteId: " + this.siteId + "\npageUrl: " + pageUrl);
|
||||
}
|
||||
};
|
||||
BAIDU.prototype.trackEvent = function (category, action, label, value) {
|
||||
if (typeof category !== 'string' || typeof action !== 'string' || !category || !action) {
|
||||
throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
|
||||
}
|
||||
if (!label || typeof label !== 'string') {
|
||||
label = '';
|
||||
}
|
||||
if (!Number(value)) {
|
||||
value = 1;
|
||||
}
|
||||
this.setAccount();
|
||||
window._hmt.push(['_trackEvent', category, action, label, value]);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] track event done.\nsiteId: " + this.siteId + "\ncategory: " + category + "\naction: " + action + "\nlabel: " + label + "\nvalue: " + value);
|
||||
}
|
||||
};
|
||||
return BAIDU;
|
||||
var BAIDU = (function () {
|
||||
function BAIDU(siteId, isDebug) {
|
||||
if (siteId === void 0) { siteId = ''; }
|
||||
if (isDebug === void 0) { isDebug = false; }
|
||||
this.siteId = siteId;
|
||||
this.isDebug = isDebug;
|
||||
}
|
||||
BAIDU.prototype.init = function () {
|
||||
window._hmt = window._hmt ? window._hmt : [];
|
||||
var SCRIPT = document.createElement('script');
|
||||
SCRIPT['async'] = true;
|
||||
SCRIPT['src'] = "https://hm.baidu.com/hm.js?" + this.siteId;
|
||||
document.querySelector('head').appendChild(SCRIPT);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] siteId load done.\nsiteId: " + this.siteId);
|
||||
}
|
||||
};
|
||||
BAIDU.prototype.setAccount = function () {
|
||||
window._hmt.push(['_setAccount', this.siteId]);
|
||||
};
|
||||
BAIDU.prototype.trackPageview = function (pageUrl) {
|
||||
if (!pageUrl || typeof pageUrl !== 'string') {
|
||||
pageUrl = '/';
|
||||
}
|
||||
if (pageUrl.includes('http')) {
|
||||
var PAGE_CUT = pageUrl.split('/');
|
||||
var HOST_NAME = PAGE_CUT[0] + "//" + PAGE_CUT[2];
|
||||
pageUrl = pageUrl.replace(HOST_NAME, '');
|
||||
}
|
||||
this.setAccount();
|
||||
window._hmt.push(['_trackPageview', pageUrl]);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] track pv done.\nsiteId: " + this.siteId + "\npageUrl: " + pageUrl);
|
||||
}
|
||||
};
|
||||
BAIDU.prototype.trackEvent = function (category, action, label, value) {
|
||||
if (typeof category !== 'string' || typeof action !== 'string' || !category || !action) {
|
||||
throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
|
||||
}
|
||||
if (!label || typeof label !== 'string') {
|
||||
label = '';
|
||||
}
|
||||
if (!Number(value)) {
|
||||
value = 1;
|
||||
}
|
||||
this.setAccount();
|
||||
window._hmt.push(['_trackEvent', category, action, label, value]);
|
||||
if (this.isDebug) {
|
||||
console.log("[vue-baidu-analytics] track event done.\nsiteId: " + this.siteId + "\ncategory: " + category + "\naction: " + action + "\nlabel: " + label + "\nvalue: " + value);
|
||||
}
|
||||
};
|
||||
return BAIDU;
|
||||
}());
|
||||
|
||||
var PushBAIDU = (function () {
|
||||
function PushBAIDU(siteIdList, isDebug) {
|
||||
this.siteIdList = siteIdList;
|
||||
this.isDebug = isDebug;
|
||||
}
|
||||
PushBAIDU.prototype.init = function () {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.init();
|
||||
});
|
||||
};
|
||||
PushBAIDU.prototype.pv = function (pageUrl) {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.trackPageview(pageUrl);
|
||||
});
|
||||
};
|
||||
PushBAIDU.prototype.event = function (category, action, label, value) {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.trackEvent(category, action, label, value);
|
||||
});
|
||||
};
|
||||
return PushBAIDU;
|
||||
var PushBAIDU = (function () {
|
||||
function PushBAIDU(siteIdList, isDebug) {
|
||||
this.siteIdList = siteIdList;
|
||||
this.isDebug = isDebug;
|
||||
}
|
||||
PushBAIDU.prototype.init = function () {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.init();
|
||||
});
|
||||
};
|
||||
PushBAIDU.prototype.pv = function (pageUrl) {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.trackPageview(pageUrl);
|
||||
});
|
||||
};
|
||||
PushBAIDU.prototype.event = function (category, action, label, value) {
|
||||
var _this = this;
|
||||
this.siteIdList.forEach(function (siteId) {
|
||||
var SITE = new BAIDU(siteId, _this.isDebug);
|
||||
SITE.trackEvent(category, action, label, value);
|
||||
});
|
||||
};
|
||||
return PushBAIDU;
|
||||
}());
|
||||
|
||||
function install(Vue, _a) {
|
||||
var router = _a.router, siteIdList = _a.siteIdList, _b = _a.isDebug, isDebug = _b === void 0 ? false : _b;
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
if (!router) {
|
||||
throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
|
||||
}
|
||||
if (!siteIdList) {
|
||||
throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
|
||||
}
|
||||
var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
|
||||
Vue.prototype.$pushBAIDU = pushBAIDU;
|
||||
if (siteIdList) {
|
||||
pushBAIDU.init();
|
||||
}
|
||||
router.afterEach(function (to) {
|
||||
var PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
|
||||
var PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
|
||||
var PAGE_URL = router.mode === 'hash' ? PAGE_PATH + "/#" + to.fullPath : "" + PAGE_PATH + to.fullPath;
|
||||
pushBAIDU.pv(PAGE_URL);
|
||||
});
|
||||
var getVueVersion = function (Vue) {
|
||||
var version = 2;
|
||||
var VUE_VERSION = String(Vue.version);
|
||||
if (VUE_VERSION.slice(0, 2) === '2.') {
|
||||
version = 2;
|
||||
}
|
||||
if (VUE_VERSION.slice(0, 2) === '3.') {
|
||||
version = 3;
|
||||
}
|
||||
return version;
|
||||
};
|
||||
|
||||
function install(Vue, _a) {
|
||||
var router = _a.router, siteIdList = _a.siteIdList, _b = _a.isDebug, isDebug = _b === void 0 ? false : _b;
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
if (!router) {
|
||||
throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
|
||||
}
|
||||
if (!siteIdList) {
|
||||
throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
|
||||
}
|
||||
var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
|
||||
var VUE_VERSION = getVueVersion(Vue) || 2;
|
||||
if (VUE_VERSION === 2) {
|
||||
Vue.prototype.$pushBAIDU = pushBAIDU;
|
||||
}
|
||||
if (VUE_VERSION === 3) {
|
||||
Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
|
||||
}
|
||||
if (siteIdList) {
|
||||
pushBAIDU.init();
|
||||
}
|
||||
router.afterEach(function (to) {
|
||||
var PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
|
||||
var PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
|
||||
var PAGE_URL = router.mode === 'hash' ? PAGE_PATH + "/#" + to.fullPath : "" + PAGE_PATH + to.fullPath;
|
||||
pushBAIDU.pv(PAGE_URL);
|
||||
});
|
||||
}
|
||||
|
||||
return install;
|
||||
|
||||
2
dist/vue-baidu-analytics.js.map
vendored
2
dist/vue-baidu-analytics.js.map
vendored
File diff suppressed because one or more lines are too long
4
dist/vue-baidu-analytics.min.js
vendored
4
dist/vue-baidu-analytics.min.js
vendored
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* name: vue-baidu-analytics
|
||||
* version: v1.1.0
|
||||
* version: v2.0.0
|
||||
* author: chengpeiquan
|
||||
*/
|
||||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId: "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId: "+this.siteId+"\npageUrl: "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId: "+this.siteId+"\ncategory: "+t+"\naction: "+i+"\nlabel: "+e+"\nvalue: "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var u=new i(o,a);t.prototype.$pushBAIDU=u,o&&u.init(),n.afterEach((function(t){var i=window.location.pathname.split("/").length,e=window.location.pathname.split("/").slice(0,i-1).join("/"),o="hash"===n.mode?e+"/#"+t.fullPath:""+e+t.fullPath;u.pv(o)}))}}));
|
||||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId: "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId: "+this.siteId+"\npageUrl: "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId: "+this.siteId+"\ncategory: "+t+"\naction: "+i+"\nlabel: "+e+"\nvalue: "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var r=new i(o,a),u=function(t){var i=2,e=String(t.version);return"2."===e.slice(0,2)&&(i=2),"3."===e.slice(0,2)&&(i=3),i}(t)||2;2===u&&(t.prototype.$pushBAIDU=r),3===u&&(t.config.globalProperties.$pushBAIDU=r),o&&r.init(),n.afterEach((function(t){var i=window.location.pathname.split("/").length,e=window.location.pathname.split("/").slice(0,i-1).join("/"),o="hash"===n.mode?e+"/#"+t.fullPath:""+e+t.fullPath;r.pv(o)}))}}));
|
||||
//# sourceMappingURL=vue-baidu-analytics.min.js.map
|
||||
|
||||
2
dist/vue-baidu-analytics.min.js.map
vendored
2
dist/vue-baidu-analytics.min.js.map
vendored
File diff suppressed because one or more lines are too long
2061
package-lock.json
generated
Normal file
2061
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,9 @@
|
||||
{
|
||||
"name": "vue-baidu-analytics",
|
||||
"version": "1.1.0",
|
||||
"version": "2.0.0",
|
||||
"description": "A data collection tool that supports reporting of single-page application data built by Vue-cli, based on baidu statistics.",
|
||||
"main": "dist/vue-baidu-analytics.min.js",
|
||||
"types": "vue-baidu-analytics.d.ts",
|
||||
"scripts": {
|
||||
"build": "rollup -c rollup.config.ts"
|
||||
},
|
||||
|
||||
2
src/global.d.ts
vendored
2
src/global.d.ts
vendored
@ -14,6 +14,8 @@ declare global {
|
||||
interface Vue {
|
||||
prototype: any
|
||||
$pushBAIDU: PushBAIDU
|
||||
version: number | string
|
||||
config: any
|
||||
}
|
||||
|
||||
interface To {
|
||||
|
||||
22
src/main.ts
22
src/main.ts
@ -1,5 +1,9 @@
|
||||
import PushBAIDU from '@m/pushBAIDU'
|
||||
import getVueVersion from '@m/getVueVersion'
|
||||
|
||||
/**
|
||||
* 定义插件
|
||||
*/
|
||||
export default function install (Vue: Vue, { router, siteIdList, isDebug = false }: Partial<Options>) {
|
||||
|
||||
/**
|
||||
@ -20,8 +24,20 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
|
||||
/**
|
||||
* 挂载推送的方法
|
||||
*/
|
||||
const pushBAIDU = new PushBAIDU(siteIdList, isDebug);
|
||||
Vue.prototype.$pushBAIDU = pushBAIDU;
|
||||
const pushBAIDU: any = new PushBAIDU(siteIdList, isDebug);
|
||||
|
||||
// 获取Vue版本（获取失败则默认为2）
|
||||
const VUE_VERSION: number = getVueVersion(Vue) || 2;
|
||||
|
||||
// 2.x可以直接挂载到原型上
|
||||
if ( VUE_VERSION === 2 ) {
|
||||
Vue.prototype.$pushBAIDU = pushBAIDU;
|
||||
}
|
||||
|
||||
// 3.x必须使用这个方式来挂载
|
||||
if ( VUE_VERSION === 3 ) {
|
||||
Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
|
||||
}
|
||||
|
||||
/**
|
||||
* 部署站点并初始化
|
||||
@ -40,4 +56,4 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
|
||||
|
||||
pushBAIDU.pv(PAGE_URL);
|
||||
});
|
||||
}
|
||||
}
|
||||
24
src/modules/getVueVersion.ts
Normal file
24
src/modules/getVueVersion.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* 获取Vue的版本
|
||||
* @return 2=Vue2.x, 3=Vue3.x
|
||||
*/
|
||||
const getVueVersion = (Vue: Vue): number => {
|
||||
let version: number = 2;
|
||||
|
||||
// 获取Vue的版本号
|
||||
const VUE_VERSION: string = String(Vue.version);
|
||||
|
||||
// Vue 2.x
|
||||
if ( VUE_VERSION.slice(0, 2) === '2.' ) {
|
||||
version = 2;
|
||||
}
|
||||
|
||||
// Vue 3.x
|
||||
if ( VUE_VERSION.slice(0, 2) === '3.' ) {
|
||||
version = 3;
|
||||
}
|
||||
|
||||
return version;
|
||||
}
|
||||
|
||||
export default getVueVersion;
|
||||
1
vue-baidu-analytics.d.ts
vendored
Normal file
1
vue-baidu-analytics.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'vue-baidu-analytics'
|
||||
Loading…
x
Reference in New Issue
Block a user