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

Date
Sep 21, 2020
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 の導入はもっとカンタンにできるみたいです

参考