Vue.jsSPAにGoogleAnalyticsを追加する
提供:Dev Guides
アプリケーションがどのように使用されているかを知りたい場合は、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でユーザーが行うすべてのデータを収集するために必要なすべてのツールが手に入りました。 無制限のパワーをお楽しみください!