vue-analytics_将Google Analytics（分析）添加到您的Vue.js SPA

vue-analytics

Google Analytics can be great if you want to know how your application is being used. Often with single-page applications though, it’s trickier to get proper screen view analytics and hook into events directly due to the odd API of the official Google Analytics package. However, there is a vue-ua package available that automates much of the complication for you and allows you to integrate Google Analytics into your Vue.js app with ease.

如果您想知道应用程序的使用方式，那么Google Analytics(分析)可能会很棒。 不过，通常对于单页应用程序来说，由于官方Google Analytics(分析)程序包的API怪异，因此要进行正确的屏幕视图分析并直接挂接事件比较棘手。 但是，有一个可用的vue-ua软件包可以自动为您完成许多复杂的操作，并使您可以轻松地将Google Analytics(分析)集成到您的Vue.js应用中。

安装 (Installation)

vue-ua can be installed via. Yarn or NPM:

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

# Yarn
$ yarn add vue-ua -D

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

建立 (Setup)

Initialize vue-ua in your app by importing the plugin and enabling it with the required configuration parameters. Note that vue-ua only supports app tracking, not web tracking.

通过导入插件并使用必需的配置参数启用它来在您的应用程序中初始化vue-ua 。 请注意， vue-ua仅支持应用程序跟踪，不支持Web跟踪。

If you’re using vue-router, you can add it to the vue-ua config in order to automatically track route views as screen views in GA.

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

src/main.js

src / main.js

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' }
  ]
})

传送资料 (Sending Data)

In your components, you can track events, screen views, and exceptions with ease. You also can use the same methods globally anywhere in your app by importing Vue and accessing Vue.analytics.

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

Tracking Events:

跟踪事件：

// 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
)

Tracking Screen Views:

跟踪屏幕浏览量：

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

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

Tracking Exceptions:

跟踪异常：

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

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

Change the Language:

更改语言：

// languageCode is any valid IETF language tag.

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

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

You now have all the tools you need to collect data on everything your users do in your Vue.js SPA. Enjoy the unlimited power!

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

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-google-analytics

vue-analytics