Firebase Hostingで動いているNuxt.jsプロジェクトにAnalyticsを導入する

いつの間にかWeb版のGoogleAnalyticsがFirebaseに統合されていたので、Firebase Hostingで動いているNuxt.jsプロジェクトに導入してみた。

firebase用のpluginファイルにanalyticsを追加。

// plugins/firebase.ts
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_APIKEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
  })
}

export default firebase

Analytics記録用のgaメソッドをinjectする。

productionのみAnalyticsに記録するようにした。

// plugins/firebaseInject.ts
import firebase from '~/plugins/firebase'

export default (_, inject) => {
  inject('firebase', firebase)
  inject('auth', firebase.auth())
  inject('ga', (event, eventParams, options) => {
    if (process.env.NODE_ENV === 'production') {
      firebase.analytics().logEvent(event, eventParams, options)
    } else {
      console.log('[debug] analytics', event, eventParams, options)
    }
  })
}

型定義ファイルにgaメソッドを追加。

// types/index.d.ts
declare module 'vue/types/vue' {
  interface Vue {
    readonly $firebase: typeof firebase
    readonly $auth: firebase.auth.Auth
    readonly $ga: (
      event: string,
      eventParams?: object,
      options?: firebase.analytics.AnalyticsCallOptions
    ) => void
  }
}

pluginの読み込み設定を追加。

// nuxt.config.ts
export default {
  plugins: [
    { src: '~/plugins/firebaseInject.ts' }
  ]
}

これでpageコンポーネント内で[[this.$ga('page_view')]]が呼べるようになった。

mounted時にpage_viewイベントを呼ぶようにする。

// pages/index.vue
export default class Index extends Vue {
  mounted() {
    this.$ga('page_view')
  }
}

正しく設定されていればAnalyticsのリアルタイムイベントに記録される。

なお、一部のイベントに関しては自動的に収集されるそうなのでanalyticsを有効にするだけでも計測はできそう。

jsの時にscreen_viewが正しく更新されるかどうかは要確認。

参考

• Google アナリティクスを使ってみる  |  Firebase