Firebase Google Analytics的web端使用

最新推荐文章于 2025-02-21 17:35:19 发布

Halloween_dz

最新推荐文章于 2025-02-21 17:35:19 发布

阅读量1.2k

点赞数

文章标签： web vue firebase

本文链接：https://blog.csdn.net/qq_42836879/article/details/114631265

版权

本文介绍如何在Firebase中为Web项目启用Google Analytics，并提供详细的步骤指导。包括登录谷歌账号、创建项目、配置SDK以及如何在Vue项目中注入所需代码。此外还展示了如何使用API来跟踪用户的特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Firebase Google Analytics的web端使用

- 首先使用firebase创建你的web项目

首先使用firebase创建你的web项目

需要登录谷歌账号。

进入firebase官网的控制台。登录你的谷歌账号（需要翻墙使用。）
创建项目，默认会选中为此项目启用 Google Analytics（分析），继续，选择账号后确认创建
选择</>图标，创建适用于web端的项目，按操作步骤提示继续执行。
进入项目设置，复制 Firebase SDK snippet中的CDN代码
进入web项目中，以vue-cli创建的项目为例
在index.html中注入该代码，如：

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "*********",
    authDomain: "*********",
    projectId: "*********",
    storageBucket: "*********",
    messagingSenderId: "*********",
    appId: "*********",
    measurementId: "*********" // 与Google Analytics有关，这个必须要对
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

安装firebase依赖
npm install --save firebase
附加操作，比如要对用户某个点击操作进行记录，可以使用官网支持的api，示例如下：

onClick()=>{
	firebase.analytics().logEvent('点击了**按钮');
}

在项目概览中的Analytics查看最近的用户操作信息，（操作有延迟）

官方文档地址：Firebase入门使用之web