导航会自动上报数据
- -按钮可手动上报数据
- -diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..5df4821
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,18 @@
+{
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "modules": false,
+ "targets": {
+ "browsers": "> 1%, IE 11, not op_mini all, not dead"
+ },
+ "useBuiltIns": "usage",
+ "corejs": 2
+ }
+ ]
+ ],
+ "plugins": [
+ "@babel/plugin-proposal-class-properties"
+ ]
+}
diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index d6471a3..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,2 +0,0 @@
-> 1%
-last 2 versions
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 1c6179f..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
- root: true,
- env: {
- node: true
- },
- 'extends': [
- 'plugin:vue/essential',
- 'eslint:recommended'
- ],
- rules: {
- 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
- },
- parserOptions: {
- parser: 'babel-eslint'
- }
-}
diff --git a/.gitignore b/.gitignore
index a0dddc6..df3b552 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+index.dev.js
.DS_Store
node_modules
/dist
diff --git a/README.md b/README.md
index 12b6a57..4fe94bd 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
vue-baidu-analytics 使用说明
===
-基于Vue-CLI 3.0开发的百度统计插件,支持自动上报切换路由产生的流量数据,同时对官方api进行了二次封装,简化了手动上报数据的操作。
+基于Vue开发的百度统计插件,可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用,使用本插件的项目需要引入 `Vue Router`。
-本插件支持部署多个站点id并对应上报数据(需求背景:比如部门A和部门B合作的项目,两个部门都要加上自己的统计代码算入自己的业绩流量池…)。
+注意:本插件在 `1.0.0` 版本的部分参数和api现在有所弃用,请按照当前最新文档说明使用新版本,或者安装以前的 `1.0.0` 旧版本使用。
## 功能
@@ -11,7 +11,7 @@ vue-baidu-analytics 使用说明
* 支持部署多个站点id,并对应进行数据上报
-* 支持自动上报路由切换产生的pv数据(支持hash模式和history模式)
+* 支持自动上报路由切换产生的pv数据(支持 `hash模式` 和 `history模式` 的地址)
* 支持手动提交pv上报
@@ -27,110 +27,109 @@ demo已开启debug模式,可开启控制台查看上报情况。
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
-router|是|JSON Object|Vue Router,本插件基于路由使用
-siteIdList|是|Array|百度统计的站点id列表,item为站点id
只有一个站点需要上报就保留一个item即可
-debug|否|Boolean|是否开启debug模式,默认false
开启后会在控制台打印上报信息,上线前记得关闭
+router|是|object|Vue Router,本插件基于路由使用
+siteIdList|是|object Array|百度统计的站点id列表,item为站点id
只有一个站点需要上报就保留一个item即可
+isDebug|否|boolean|是否开启debug模式,默认 `false`
开启后会在控制台打印上报信息,**上线前记得关闭**
## 安装
-在npm上安装
+### 通过npm安装
->npm i vue-baidu-analytics
+```
+npm install vue-baidu-analytics --save-dev
+```
-然后在 main.js 里引入插件。
+### 通过cdn安装
-```javascript
-import baiduAnalytics from 'vue-baidu-analytics'
+```html
+
```
## 使用
-安装插件后,在 main.js 引入以下代码,即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
+通过npm安装的项目,需要先在 `main.js` 里引入插件(通过cdn则无需该步骤)。
-后续在路由切换过程中,也会根据路由的切换提交相应的url信息到百度统计。
+```js
+import baiduAnalytics from 'vue-baidu-analytics'
+```
-```javascript
+安装插件后,在 `main.js` 引入以下代码,即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
+
+后续在路由切换过程中,也会根据路由的切换提交相应的url信息到友盟统计。
+
+```js
Vue.use(baiduAnalytics, {
router: router,
siteIdList: [
- 'your siteid',
- 'your another siteid',
- 'your one more siteid',
- '…'
+ 'aaaaaaaaaaaaaaaaaaa',
+ 'bbbbbbbbbbbbbbbbbbb',
+ 'ccccccccccccccccccc'
],
- debug: false
+ isDebug: false
});
```
可在开发环境打开debug模式了解相关的上报情况(上线前记得关闭debug)。
-## api
+## 方法
-插件目前封装了两个常用的api,可在组件里调用。
+插件目前封装了两个常用的api,统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
注:如果配置了多个站点id,会同时上报给所有站点。
-### 手动上报PV
+### 手动上报页面PV
api名称|功能说明
:-:|-
-$trackBaiduPv|手动执行PV数据上报
+pv|手动执行PV数据上报
-#### api参数
+**api参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
-url|否|String|提交上报的url,必须是以"/"(斜杠)开头的相对路径
如果不填,则会默认提交为域名根目录
+pageUrl|否|String|提交上报的url,必须是以 `/` 开头的相对路径
如果不填,则会默认提交为域名根目录
-详细的参数使用要求请查看官方文档:
-
->https://tongji.baidu.com/open/api/more?p=guide_trackPageview
-
-注:原本url是必填,插件处理了一个默认值,所以变成选填。
-
-#### 使用示范
+**使用示范**
在template里使用
```html
-
+
```
在method里使用
-```javascript
-this.$trackBaiduPv('/test');
+```js
+// this是Vue实例
+this.$pushBAIDU.pv('/home');
```
### 手动上报事件分析
api名称|功能说明
:-:|-
-$trackBaiduEvent|手动执行事件分析数据上报
+event|手动执行事件分析数据上报
-#### api参数
+**api参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
-category|是|String|事件名称
-action|是|String|交互动作
-opt_label|否|String|事件信息,默认为空
-opt_value|否|Number|事件价值,默认1
+category|是|string|产生该事件的位置名称,比如 `首页banner`
+action|是|string|产生该事件的行为描述,比如 `点击`
+label|否|string|产生该事件的标签名称,可以用来记录事件子id,比如 `bannerId_123`,默认为空
+value|否|number|该事件的分值,默认0
-详细的参数使用要求请查看官方文档
+**使用示范**
->https://tongji.baidu.com/open/api/more?p=guide_trackEvent
-
-#### 使用示范
-
-在template里使用
+在template里使用(比如:点击了一个id为123的首页banner)
```html
-
+
```
-在method里使用
+在method里使用(比如:点击了一个id为123的首页banner,并设置该事件的价值为1)
-```javascript
-this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
-```
+```js
+// this是Vue实例
+this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
+```
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index e955840..0000000
--- a/babel.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- presets: [
- '@vue/cli-plugin-babel/preset'
- ]
-}
diff --git a/demo/favicon.ico b/demo/favicon.ico
deleted file mode 100644
index df36fcf..0000000
Binary files a/demo/favicon.ico and /dev/null differ
diff --git a/demo/index.html b/demo/index.html
index 3217187..0396566 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1 +1,110 @@
-
导航会自动上报数据
- -按钮可手动上报数据
- -