Nuxt.jsにGoogle Analyticsを導入する

はじめに

このWebアプリケーションを作成する際に、Analyticsの導入に困ったので解決方法を載せます。
また、Firebase-toolsの導入やプロジェクトの作成は省略します。

方法

~/pluginsの下にfirebase.jsとga.jsを作成します。

my-project
    └ plugins/
          ├ firebase.js
          └ ga.js

firebase.js

import firebase from 'firebase/app'
import 'firebase/analytics'

if(!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: 'プロジェクトのapiKey',
    authDomain: 'プロジェクトのドメイン',
    '以下省略'
  })
}

export default firebase

ga.js

import firebase from './firebase'

export default ({
  app
}) => {
  if(process.env.NODE_ENV !== 'production') return
  
  firebase.analytics();
}

これを作成した後に、nuxt.config.jsに以下を追加します。

nuxt.config.js

module.exports = {
  '省略'
  plugins: [
    {
      src: '~/plugins/ga.js',
      mode: 'client'
    }
  ],
  '省略'

これでGoogle Analyticsが導入できます。

最後に少し宣伝

「はじめに」のところでも少し出したのですが、この度Webアプリケーションを作成しました。
初学者の「みんな技術的情報はどこから得ているの？」という疑問を少しでも解決できるようにという思いで作成しました。
時間がある方や興味がある方はぜひご覧になってください！
increment ~Technical information site for beginners~