Vue.jsSPAにGoogleAnalyticsを追加する

getdocs

2年前

アプリケーションがどのように使用されているかを知りたい場合は、GoogleAnalyticsが最適です。ただし、多くの場合、シングルページアプリケーションでは、公式のGoogle Analyticsパッケージの奇妙なAPIのために、適切な画面ビュー分析を取得してイベントに直接フックするのは難しいです。ただし、 vue-ua パッケージが利用可能であり、複雑さの多くを自動化し、GoogleAnalyticsを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でルートビューを画面ビューとして自動的に追跡できます。

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

データの送信

コンポーネントでは、イベント、画面ビュー、および例外を簡単に追跡できます。 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.jsSPAでユーザーが行うすべてのデータを収集するために必要なすべてのツールが手に入りました。無制限のパワーをお楽しみください！