Skip to content
This repository was archived by the owner on Jun 23, 2023. It is now read-only.

Commit 5eb42e6

Browse files
author
chengpeiquan
committed
Release v1.1.0
1 parent f3fbec8 commit 5eb42e6

30 files changed

Lines changed: 566 additions & 11962 deletions

‎.babelrc‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false,
7+
"targets": {
8+
"browsers": "> 1%, IE 11, not op_mini all, not dead"
9+
},
10+
"useBuiltIns": "usage",
11+
"corejs": 2
12+
}
13+
]
14+
],
15+
"plugins": [
16+
"@babel/plugin-proposal-class-properties"
17+
]
18+
}

‎.browserslistrc‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎.eslintrc.js‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
index.dev.js
12
.DS_Store
23
node_modules
34
/dist

‎README.md‎

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
vue-baidu-analytics 使用说明
22
===
33

4-
基于Vue-CLI 3.0开发的百度统计插件，支持自动上报切换路由产生的流量数据，同时对官方api进行了二次封装，简化了手动上报数据的操作。
4+
基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
55

6-
本插件支持部署多个站点id并对应上报数据（需求背景：比如部门A和部门B合作的项目，两个部门都要加上自己的统计代码算入自己的业绩流量池…）。
6+
注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。
77

88
## 功能
99

1010
* 异步载入百度统计脚本，无需修改入口html
1111

1212
* 支持部署多个站点id，并对应进行数据上报
1313

14-
* 支持自动上报路由切换产生的pv数据（支持hash模式和history模式）
14+
* 支持自动上报路由切换产生的pv数据（支持 `hash模式` 和 `history模式` 的地址）
1515

1616
* 支持手动提交pv上报
1717

@@ -27,110 +27,109 @@ demo已开启debug模式，可开启控制台查看上报情况。
2727

2828
参数|是否必填|参数类型|参数说明
2929
:-:|:-:|:-:|-
30-
router|是|JSON Object|Vue Router，本插件基于路由使用
31-
siteIdList|是|Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
32-
debug|否|Boolean|是否开启debug模式，默认false<br>开启后会在控制台打印上报信息，上线前记得关闭
30+
router|是|object|Vue Router，本插件基于路由使用
31+
siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
32+
isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
3333

3434
## 安装
3535

36-
在npm上安装
36+
### 通过npm安装
3737

38-
>npm i vue-baidu-analytics
38+
```
39+
npm install vue-baidu-analytics --save-dev
40+
```
3941

40-
然后在 main.js 里引入插件。
42+
### 通过cdn安装
4143

42-
```javascript
43-
import baiduAnalytics from 'vue-baidu-analytics'
44+
```html
45+
<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
4446
```
4547

4648
## 使用
4749

48-
安装插件后，在 main.js 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
50+
通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
51+
52+
```js
53+
import baiduAnalytics from 'vue-baidu-analytics'
54+
```
55+
56+
安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
4957

50-
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
58+
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
5159

52-
```javascript
60+
```js
5361
Vue.use(baiduAnalytics, {
5462
router: router,
5563
siteIdList: [
56-
'your siteid',
57-
'your another siteid',
58-
'your one more siteid',
59-
'…'
64+
'aaaaaaaaaaaaaaaaaaa',
65+
'bbbbbbbbbbbbbbbbbbb',
66+
'ccccccccccccccccccc'
6067
],
61-
debug: false
68+
isDebug: false
6269
});
6370
```
6471

6572
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
6673

67-
## api
74+
## 方法
6875

69-
插件目前封装了两个常用的api，可在组件里调用。
76+
插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
7077

7178
注：如果配置了多个站点id，会同时上报给所有站点。
7279

73-
### 手动上报PV
80+
### 手动上报页面PV
7481

7582
api名称|功能说明
7683
:-:|-
77-
$trackBaiduPv|手动执行PV数据上报
84+
pv|手动执行PV数据上报
7885

79-
#### api参数
86+
**api参数**
8087

8188
参数|是否必填|参数类型|参数说明
8289
:-:|:-:|:-:|-
83-
url|否|String|提交上报的url，必须是以"/"（斜杠）开头的相对路径<br>如果不填，则会默认提交为域名根目录
90+
pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<br>如果不填，则会默认提交为域名根目录
8491

85-
详细的参数使用要求请查看官方文档：
86-
87-
>https://tongji.baidu.com/open/api/more?p=guide_trackPageview
88-
89-
注：原本url是必填，插件处理了一个默认值，所以变成选填。
90-
91-
#### 使用示范
92+
**使用示范**
9293

9394
在template里使用
9495

9596
```html
96-
<button @click="$trackBaiduPv('/test')">手动上报PV</button>
97+
<button @click="$pushBAIDU.pv('/test')">手动上报PV</button>
9798
```
9899

99100
在method里使用
100101

101-
```javascript
102-
this.$trackBaiduPv('/test');
102+
```js
103+
// this是Vue实例
104+
this.$pushBAIDU.pv('/home');
103105
```
104106

105107
### 手动上报事件分析
106108

107109
api名称|功能说明
108110
:-:|-
109-
$trackBaiduEvent|手动执行事件分析数据上报
111+
event|手动执行事件分析数据上报
110112

111-
#### api参数
113+
**api参数**
112114

113115
参数|是否必填|参数类型|参数说明
114116
:-:|:-:|:-:|-
115-
category|是|String|事件名称
116-
action|是|String|交互动作
117-
opt_label|否|String|事件信息，默认为空
118-
opt_value|否|Number|事件价值，默认1
119-
120-
详细的参数使用要求请查看官方文档
117+
category|是|string|产生该事件的位置名称，比如 `首页banner`
118+
action|是|string|产生该事件的行为描述，比如 `点击`
119+
label|否|string|产生该事件的标签名称，可以用来记录事件子id，比如 `bannerId_123`，默认为空
120+
value|否|number|该事件的分值，默认0
121121

122-
>https://tongji.baidu.com/open/api/more?p=guide_trackEvent
122+
**使用示范**
123123

124-
#### 使用示范
125-
126-
在template里使用
124+
在template里使用（比如：点击了一个id为123的首页banner）
127125

128126
```html
129-
<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
127+
<button @click="$pushBAIDU.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
130128
```
131129

132-
在method里使用
130+
在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
133131

134-
```javascript
135-
this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
136-
```
132+
```js
133+
// this是Vue实例
134+
this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
135+
```

‎babel.config.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎demo/favicon.ico‎

-4.19 KB
Binary file not shown.

‎demo/index.html‎

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,110 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-baidu-analytics-demo</title><link href=static/css/home.6fd0d033.css rel=prefetch><link href=static/js/home.80371ab3.js rel=prefetch><link href=static/css/app.8a825cf3.css rel=preload as=style><link href=static/js/app.549712c5.js rel=preload as=script><link href=static/js/chunk-vendors.0d330f5a.js rel=preload as=script><link href=static/css/app.8a825cf3.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-baidu-analytics-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=static/js/chunk-vendors.0d330f5a.js></script><script src=static/js/app.549712c5.js></script></body></html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>vue baidu analytics demo</title>
7+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
8+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
9+
<style>
10+
#app,
11+
.section {
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: flex-start;
15+
align-items: center;
16+
}
17+
.section {
18+
margin-bottom: 40px;
19+
}
20+
.nav {
21+
margin-bottom: 20px;
22+
}
23+
.nav .item {
24+
color: #666;
25+
margin: 0 10px 20px;
26+
}
27+
.nav .cur {
28+
color: #000;
29+
font-weight: bold;
30+
}
31+
.label {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
margin-bottom: 20px;
36+
}
37+
.text {
38+
display: flex;
39+
justify-content: flex-end;
40+
align-items: center;
41+
width: 60px;
42+
font-size: 14px;
43+
margin-right: 20px;
44+
}
45+
.input {
46+
display: flex;
47+
align-items: center;
48+
width: 240px;
49+
height: 40px;
50+
font-size: 14px;
51+
box-sizing: border-box;
52+
padding: 0 10px;
53+
}
54+
.button {
55+
padding: 5px 20px;
56+
cursor: pointer;
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
62+
<div id="app">
63+
<h1>Hello App!</h1>
64+
65+
<section class="section">
66+
<h2>切换路由自动上报测试</h2>
67+
<div class="nav">
68+
<router-link class="item" to="/page1" exact>Go to Page1</router-link>
69+
<router-link class="item" to="/page2">Go to Page2</router-link>
70+
<router-link class="item" to="/page3">Go to Page3</router-link>
71+
</div>
72+
<router-view></router-view>
73+
</section>
74+
75+
<section class="section">
76+
<h2>提交pv测试</h2>
77+
<label class="label">
78+
<span class="text">pageUrl</span>
79+
<input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
80+
</label>
81+
<button class="button" @click="pv">提交一个pv</button>
82+
</section>
83+
84+
<section class="section">
85+
<h2>提交event测试</h2>
86+
<label class="label">
87+
<span class="text">category</span>
88+
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
89+
</label>
90+
<label class="label">
91+
<span class="text">action</span>
92+
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
93+
</label>
94+
<label class="label">
95+
<span class="text">label</span>
96+
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
97+
</label>
98+
<label class="label">
99+
<span class="text">value</span>
100+
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
101+
</label>
102+
<button class="button" @click="event">提交一个event</button>
103+
</section>
104+
</div>
105+
106+
<script src="../dist/vue-baidu-analytics.js"></script>
107+
<script src="js/main.js"></script>
108+
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)