vue-baidu-analytics 基于Vue-CLI 3.0的SPA百度统计插件

最近发布的一个Vue插件,可以在npm上直接安装,或者GitHub下载。

基于Vue-CLI 3.0开发的百度统计插件,支持自动上报切换路由产生的流量数据,同时对官方api进行了二次封装,简化了手动上报数据的操作。

本插件支持部署多个站点id并对应上报数据(需求背景:比如部门A和部门B合作的项目,两个部门都要加上自己的统计代码算入自己的业绩流量池…)。

NpmJS主页:https://www.npmjs.com/package/vue-baidu-analytics

GitHub主页:https://github.com/chengpeiquan/vue-baidu-analytics

功能

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

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

*支持自动上报路由切换产生的pv数据(支持hash模式和history模式)

*支持手动提交pv上报

*支持手动提交事件分析上报

预览

demo已开启debug模式,可开启控制台查看上报情况。

点击预览:vue-baidu-analytics demo

参数

参数 是否必填 参数类型 参数说明
router JSON Object Vue Router,本插件基于路由使用
siteIdList Array 百度统计的站点id列表,item为站点id
只有一个站点需要上报就保留一个item即可
debug Boolean 是否开启debug模式,默认false
开启后会在控制台打印上报信息,上线前记得关闭

安装

在npm上安装

npm i vue-baidu-analytics

然后在 main.js 里引入插件。

import baiduAnalytics from 'vue-baidu-analytics'

使用

安装插件后,在 main.js 引入以下代码,即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。

后续在路由切换过程中,也会根据路由的切换提交相应的url信息到百度统计。

Vue.use(baiduAnalytics, {
  router: router,
  siteIdList: [
    'your siteid',
    'your another siteid',
    'your one more siteid',
    '…'
  ],
  debug: false
});

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

api

插件目前封装了两个常用的api,可在组件里调用。

注:如果配置了多个站点id,会同时上报给所有站点。

手动上报PV

api名称 功能说明
$trackBaiduPv 手动执行PV数据上报

api参数

参数 是否必填 参数类型 参数说明
url String 提交上报的url,必须是以"/"(斜杠)开头的相对路径
如果不填,则会默认提交为域名根目录

详细的参数使用要求请查看官方文档:

https://tongji.baidu.com/open/api/more?p=guide_trackPageview

注:原本url是必填,插件处理了一个默认值,所以变成选填。

使用示范

在template里使用

<button @click="$trackBaiduPv('/test')">手动上报PV</button>

在method里使用

this.$trackBaiduPv('/test');

手动上报事件分析

api名称 功能说明
$trackBaiduEvent 手动执行事件分析数据上报

api参数

参数 是否必填 参数类型 参数说明
category String 事件名称
action String 交互动作
opt_label String 事件信息,默认为空
opt_value Number 事件价值,默认1

详细的参数使用要求请查看官方文档

https://tongji.baidu.com/open/api/more?p=guide_trackEvent

使用示范

在template里使用

<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>

在method里使用

this.$trackBaiduEvent('act_vote', 'click', 'works', 1);

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *