如果您想知道您的应用程序是如何使用的，Google Analytics 会很棒。但是，通常对于单页应用程序，由于官方 Google Analytics 包的奇怪 API，获得正确的屏幕视图分析和直接挂钩事件比较棘手。但是，有一个vue-ua包可以为您自动处理大部分复杂问题，并允许您轻松地将 Google Analytics 集成到您的 Vue.js 应用程序中。

安装

vue-ua可以通过安装。纱线或 NPM：

# Yarn
$ yarn add vue-ua -D

# NPM
$ npm install vue-ua --save-dev

设置

通过导入插件并使用所需的配置参数启用它，在您的应用程序中初始化vue-ua。注意vue-ua只支持应用追踪，不支持网页追踪。

如果您正在使用vue-router，您可以将其添加到vue-ua配置中，以便在 GA 中自动跟踪路由视图作为屏幕视图。

import VueAnalytics from 'vue-ua'
import VueRouter from 'vue-router'
...
// If you're using vue-router and want route integration, create your routes before enabling vue-ua.
const router = new VueRouter({
  routes
})

Vue.use(VueAnalytics, {
  // [Required] The name of your app as specified in Google Analytics.
  appName: '<app_name>',
  // [Required] The version of your app.
  appVersion: '<app_version>',
  // [Required] Your Google Analytics tracking ID.
  trackingId: '<your_tracking_id>',
  // If you're using vue-router, pass the router instance here.
  vueRouter: router,

  // Global Dimensions and Metrics can optionally be specified.
  globalDimensions: [
    { dimension: 1, value: 'FirstDimension' },
    { dimension: 2, value: 'SecondDimension' }
    // Because websites are only 2D, obviously. WebGL? What's that?
  ],

  globalMetrics: [
    { metric: 1, value: 'MyMetricValue' },
    { metric: 2, value: 'AnotherMetricValue' }
  ]
})

发送数据

在您的组件中，您可以轻松跟踪事件、屏幕视图和异常。您还可以通过导入Vue并访问Vue.analytics 来在应用程序的任何地方全局使用相同的方法。

跟踪事件：

// Component Usage
this.$ua.trackEvent(
  eventCategory: string, eventAction: string, eventLabel: string, eventValue: number
)

// Global Usage
Vue.analytics.trackEvent(
  eventCategory: string, eventAction: string, eventLabel: string, eventValue: number
)

跟踪屏幕视图：

// Component Usage
this.$ua.trackView(routeName: string)

// Global Usage
Vue.analytics.trackView(routeName: string)

跟踪异常：

// Component Usage
this.$ua.trackException(description: string, isFatal: boolean)

// Global Usage
Vue.analytics.trackException(description: string, isFatal: boolean)

更改语言：

// languageCode is any valid IETF language tag.

// Component Usage
this.$ua.changeSessionLanguage(languageCode: string)

// Global Usage
Vue.analytics.changeSessionLanguage(languageCode: string)

您现在拥有收集用户在 Vue.js SPA 中所做的一切数据所需的所有工具。享受无限的力量！