vue使用firebase做用户数据分析

1.安装firebase

npm i --save firebase

2.添加项目在firebase

https://console.firebase.google.com/

3.在main.js中配置firebase

firebase项目的配置信息

main.js中:

import firebase from "@firebase/app";
import "@firebase/firestore";
import "@firebase/analytics";
const firebaseConfig = {
    apiKey: "AIzaSyDFTrBvYPsuDZopXYnM3yRSJJoJvBtkgbo",
    authDomain: "earth-angel-pc.firebaseapp.com",
    projectId: "earth-angel-pc",
    storageBucket: "earth-angel-pc.appspot.com",
    messagingSenderId: "989647602026",
    appId: "1:989647602026:web:b187be8e42e586d12fa513",
    measurementId: "G-2L079Q8PQG"
};
// alias (配置别名方便使用)
Vue.prototype.$analytics = firebase.analytics();

我安装的时候：firebase版本

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "firebase": "^8.5.0",
    "vue": "^2.6.11",
    "vue-i18n": "^8.24.3",
    "vue-router": "^3.2.0"
  },

4.组件中使用监听用户行为

this.$analytics.logEvent("toList",{name: 'Details_photo'});

5.chrome安装插件Google Analytics Debugger

安装Google Analytics Debugger插件并打开开关，然后去到firebase控制台
点击DebugView栏目，同时刷新自己的项目页面，然后在DebugView栏目选择自己的设备：

选择自己的设备，成功后去项目触发自己绑定的事件就会发送数据到debugview，红框可以看到

有红框的tool就成功了

整个思路就是这样简单。