Vue项目如何集成Google Analytics

Vue的spa项目要集成Google Analytics，可以使用vue-gtag库,该库是原来vue-analytics的作者开发的，适配新版谷歌统计的gtag.js

安装

新版本的vue-gtag

Vue2

yarn add vue-gtag@^1.16.1

Vue3

    yarn add vue-gtag

使用

插件使用，想监听路由的话需要将VueRouter实例传给插件

import Vue from 'vue'
import VueGtag from 'vue-gtag';

Vue.use(VueGtag, {
  config: {
    id: 'XXXX',
  },
}, router)

手动上报事件

export default {
  methods: {
    track() {
      this.$gtag.event('login', { method: 'phone' })
    }
  }
}

测试

在浏览器Network面板可以看到刚刚上报的事件生效了

参考

• vue-gtag