Vue常用插件：vue-analytics

简介

项目中添加谷歌统计（Google Analytics）的方法见：vue项目中添加谷歌统计

vue-analytics插件可以通过简单的配置快速添加谷歌统计

步骤

安装

• 安装：npm i vue-analytics --save

引入

• 修改config/prod.env.js文件，添加GA代码ID

module.exports = {
  NODE_ENV: '"production"',
  GA: `"UA-xxx-x"`
}

• 修改build/webpack.prod.conf.js文件，找到HtmlWebpackPlugin部分，添加ga选项

new HtmlWebpackPlugin({
  // ...
  ga: env.GA // 添加ga选项，以便在index.html中可以引用
}),

• 修改index.html文件，添加统计代码

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', <%= htmlWebpackPlugin.options.ga %>, 'auto');
ga('send', 'pageview');

备注：

• GA的ID是从配置中读取而不是写死的

页面统计

• 修改src/main.js文件，引入vue-analytics

import Vue from 'vue'
import router from './router'
import VueAnalytics from 'vue-analytics'

// GA初始化
if (process.env.GA) {
  Vue.use(VueAnalytics, {
    id: process.env.GA, // 从配置中读取
    disableScriptLoader: true, // 必须在html中完成初始化，这里显式禁止去下载ga脚本
    router, // 确保路由切换时可以自动统计
    autoTracking: {
      pageviewOnLoad: false // 当通过网址进来时已经GA在初始化时就发起一次pageview的统计，这里不要重复统计
    }
  })
}
// ...

备注

• 添加以上代码有，每次切换页面都会自动页面跟踪统计。
• pageviewOnLoad: false防止重复统计

埋点事件

• 组件中使用

this.$ga.event('category', 'action', 'label', 123)

// 或者
this.$ga.event({
  eventCategory: 'category',
  eventAction: 'action',
  eventLabel: 'label',
  eventValue: 123
})

事件参数

• category: 一般为一个大类，比如品牌brand,视频video等等
• action: 一般为一个具体的操作，比如download, play, click等等
• label: 一般为额外的一些信息，比如具体的品牌ID，视频的title等等
• value: 任意的度量值，必须为正的整数，比如表示品牌的价值，视频的时长等等

参考链接

vue-analytics：page-tracking
vue-analytics：event-tracking