2020/09/21

[Nuxt.js] Firebase Analyticsでイベントログを送る

Firebase Web を Nuxt.js に導入すれば、設定はほとんど何もしないで、Firebase Analytics も導入されて超便利ですよね 🤩

// ~/pluging/firebase.jsimport firebase from "firebase"

const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appID: "app-id",
measurementId: "measurement-id",
}

if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig) // analyticsもここで導入
firebase.analytics()
}

export default firebase

導入されると Google Analytics に似たインターフェイスで PageView のイベントが取れるようになります。

ただ、当たりまえなんですが、ボタンのクリックなどのイベントログは自動では取れてないわけで…😩

公式ドキュメントをざっと見回りしても、イベントログの送信の方法がなかったのでメモを残しておくことにします 📝

methods: {
event() {
  firebase.analytics().logEvent(
    'eventName', { property: 'propertyName' }
)
}
}

…カンタン!

試していないですが、nuxt-communityにあるfirebase-moduleを使えば、analytics も含めた firebase の導入はもっとカンタンにできるみたいです

参考

#tech