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

Commit 416f830

Browse files
chengpeiquanchengpeiquan
authored
Merge pull request #1 from chengpeiquan/develop
Release v1.0.0
2 parents 7b498b8 + fec4462 commit 416f830

19 files changed

+876
-2
lines changed

‎.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+
}

‎.editorconfig‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
end_of_line = lf
7+
indent_size = 2
8+
indent_style = space
9+
insert_final_newline = true
10+
max_line_length = 80
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
max_line_length = 0
15+
trim_trailing_whitespace = false

‎README.md‎

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,135 @@
1-
# vue-cnzz-analytics
2-
A data collection tool that supports reporting of single-page application data built by Vue-cli, based on cnzz statistics.
1+
vue-cnzz-analytics 使用说明
2+
===
3+
4+
基于Vue开发的CNZZ统计插件（友盟统计），可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
5+
6+
## 功能
7+
8+
* 异步载入CNZZ统计脚本，不再因等待加载统计代码而影响页面渲染速度
9+
10+
* 支持部署多个站点id，并对应进行数据上报
11+
12+
* 支持自动上报路由切换产生的pv数据（支持 `hash模式` 和 `history模式` 的地址）
13+
14+
* 支持手动提交pv上报
15+
16+
* 支持手动提交事件分析上报
17+
18+
## 预览
19+
20+
demo已开启debug模式，可开启控制台查看上报情况。
21+
22+
点击预览：[vue-cnzz-analytics demo](https://chengpeiquan.github.io/vue-cnzz-analytics/demo/ "vue-cnzz-analytics demo")
23+
24+
## 参数
25+
26+
参数|是否必填|参数类型|参数说明
27+
:-:|:-:|:-:|-
28+
router|是|object|Vue Router，本插件基于路由使用
29+
siteIdList|是|object Array|CNZZ统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
30+
isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
31+
32+
## 安装
33+
34+
### 通过npm安装
35+
36+
```
37+
npm install vue-cnzz-analytics --save-dev
38+
```
39+
40+
### 通过cdn安装
41+
42+
```html
43+
<script src="https://cdn.jsdelivr.net/npm/vue-cnzz-analytics/dist/vue-cnzz-analytics.min.js"></script>
44+
```
45+
46+
## 使用
47+
48+
通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
49+
50+
```js
51+
import cnzzAnalytics from 'vue-cnzz-analytics'
52+
```
53+
54+
安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
55+
56+
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
57+
58+
```js
59+
Vue.use(cnzzAnalytics, {
60+
router: router,
61+
siteIdList: [
62+
11111,
63+
22222,
64+
33333
65+
],
66+
isDebug: false
67+
});
68+
```
69+
70+
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
71+
72+
## 方法
73+
74+
插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushCNZZ` 去调用。
75+
76+
注：如果配置了多个站点id，会同时上报给所有站点。
77+
78+
### 手动上报页面PV
79+
80+
api名称|功能说明
81+
:-:|-
82+
pv|手动执行PV数据上报
83+
84+
**api参数**
85+
86+
参数|是否必填|参数类型|参数说明
87+
:-:|:-:|:-:|-
88+
pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<br>如果不填，则会默认提交为域名根目录
89+
fromUrl|否|String|来路页面的url，必须是以 `http` 或 `https` 开头的绝对地址<br>如果不填，则统计平台会认为访问来源为直接输入地址
90+
91+
**使用示范**
92+
93+
在template里使用（第二个参数不填表示直接输入地址访问）
94+
95+
```html
96+
<button @click="$pushCNZZ.pv('/test')">手动上报PV</button>
97+
```
98+
99+
在method里使用（第二个参数填写，则表示是从该页面跳转过来的）
100+
101+
```js
102+
// this是Vue实例
103+
this.$pushCNZZ.pv('/home', 'https://github.com/chengpeiquan/vue-cnzz-analytics');
104+
```
105+
106+
### 手动上报事件分析
107+
108+
api名称|功能说明
109+
:-:|-
110+
event|手动执行事件分析数据上报
111+
112+
**api参数**
113+
114+
参数|是否必填|参数类型|参数说明
115+
:-:|:-:|:-:|-
116+
category|是|string|产生该事件的位置名称，比如 `首页banner`
117+
action|是|string|产生该事件的行为描述，比如 `点击`
118+
label|否|string|产生该事件的标签名称，可以用来记录事件子id，比如 `bannerId_123`，默认为空
119+
value|否|number|该事件的分值，默认0
120+
nodeId|否|string|产生该事件的元素id，默认为空
121+
122+
**使用示范**
123+
124+
在template里使用（比如：点击了一个id为123的首页banner）
125+
126+
```html
127+
<button @click="$pushCNZZ.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
128+
```
129+
130+
在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
131+
132+
```js
133+
// this是Vue实例
134+
this.$pushCNZZ.event('首页banner', '点击', 'bannerId_123', 1);
135+
```

‎demo/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 cnzz 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+
<label class="label">
82+
<span class="text">fromUrl</span>
83+
<input class="input" type="text" placeholder="输入来路的url" v-model="fromUrl">
84+
</label>
85+
<button class="button" @click="pv">提交一个pv</button>
86+
</section>
87+
88+
<section class="section">
89+
<h2>提交event测试</h2>
90+
<label class="label">
91+
<span class="text">category</span>
92+
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
93+
</label>
94+
<label class="label">
95+
<span class="text">action</span>
96+
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
97+
</label>
98+
<label class="label">
99+
<span class="text">label</span>
100+
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
101+
</label>
102+
<label class="label">
103+
<span class="text">value</span>
104+
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
105+
</label>
106+
<label class="label">
107+
<span class="text">nodeId</span>
108+
<input class="input" type="text" placeholder="输入产生该事件的元素id" v-model="nodeId">
109+
</label>
110+
<button class="button" @click="event">提交一个event</button>
111+
</section>
112+
</div>
113+
114+
<script src="../dist/vue-cnzz-analytics.js"></script>
115+
<script src="js/main.js"></script>
116+
117+
</body>
118+
</html>

‎demo/js/main.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// 定义路由信息
2+
const routes = [
3+
{
4+
path: '/',
5+
redirect: '/page1'
6+
},
7+
{
8+
path: '/page1',
9+
component: {
10+
template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
11+
}
12+
},
13+
{
14+
path: '/page2',
15+
component: {
16+
template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
17+
}
18+
},
19+
{
20+
path: '/page3',
21+
component: {
22+
template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
23+
}
24+
}
25+
];
26+
27+
// 初始化路由
28+
const router = new VueRouter({
29+
routes,
30+
linkActiveClass: 'cur',
31+
linkExactActiveClass: 'cur'
32+
});
33+
34+
// 引入统计插件
35+
Vue.use(cnzzAnalytics, {
36+
router: router,
37+
siteIdList: [
38+
11111,
39+
22222,
40+
33333
41+
],
42+
isDebug: true
43+
});
44+
45+
// 初始化Vue
46+
const app = new Vue({
47+
el: '#app',
48+
router,
49+
data () {
50+
return {
51+
pageUrl: '',
52+
fromUrl: '',
53+
category: '',
54+
action: '',
55+
label: '',
56+
value: '',
57+
nodeId: ''
58+
}
59+
},
60+
mounted () {
61+
},
62+
methods: {
63+
pv () {
64+
this.$pushCNZZ.pv(this.pageUrl, this.fromUrl);
65+
},
66+
event () {
67+
this.$pushCNZZ.event(this.category, this.action, this.label, this.value, this.nodeId);
68+
}
69+
}
70+
});

‎dist/main.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): boolean;

‎dist/modules/cnzz.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
declare class CNZZ {
2+
siteId: number;
3+
isDebug: boolean;
4+
constructor(siteId?: number, isDebug?: boolean);
5+
init(): void;
6+
setAccount(): void;
7+
trackPageview(pageUrl: string, fromUrl?: string): void;
8+
trackEvent(category: string, action: string, label: string, value: number, nodeId: string): boolean;
9+
}
10+
export default CNZZ;

‎dist/modules/pushCNZZ.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare class PushCNZZ {
2+
siteIdList: number[];
3+
isDebug: boolean;
4+
constructor(siteIdList: number[], isDebug: boolean);
5+
init(): void;
6+
pv(pageUrl: string, fromUrl?: string): void;
7+
event(category: string, action: string, label: string, value: number, nodeId: string): void;
8+
}
9+
export default PushCNZZ;

0 commit comments

Comments
 (0)