如何启动 Firebase Analytics 在 Web 上工作？

Question

我在documentation之后的项目中发起了一个FB SDK：

Getting started with Analytics is easy. Just add the Firebase SDK to your new or existing app, and data collection begins automatically. You can view analytics data in the Firebase console within hours.

这是我的 main.js

 // Production Firebase configuration
  firebaseConfig = {
    apiKey: <AKI_LEY>,
    authDomain: <DOMAIN>,
    databaseURL: <DB_URL>,
    projectId: <PROJECT_ID>,
    storageBucket: "",
    messagingSenderId: <SENDER_ID>,
    appId: <APP_ID>,
    measurementId: <TRACKING_ID>
  };

firebase.initializeApp(firebaseConfig);
// missing firebase.analytics(); but calling this in main will throw exception. Calling this in index.html will also throw exception as initializeApp has to be called before.

这允许应用程序使用 firebase 存储和 Auth 服务，但分析仍然没有注册任何东西。

我错过了什么？

编辑

阅读更多文档并仔细检查我的索引后，我添加了以下内容 <scripts> 但没有成功。

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'></script>

问题默认的 webpack firebase 导入没有 firebase 分析库，这就是为什么你需要使用 CDN 导入。

在索引中导入后，我仍然需要运行 firebase.analytics()，但必须遵循 firebase.initializeApp()。

如何在 main.js 中调用两者，以便 firebase 函数不在 index 和 main 之间分开？

此外，我的 main 包含更多逻辑来决定 firebase 配置设置（有多个项目），所以我不能只将所有 firebase 操作移动到 index.html。

谢谢。

Answer 1

要让 Analytics 在您的 Firebase 应用中运行，您需要包含 SDK。

一个常用的方法是：

<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'>

当然，任何其他包含必要文件的方式也可以。请务必在文档中的 available libraries 下检查最新版本的 SDK。

Answer 2

这是 Firebase 库结构的问题。它已在 7.1.0 中修复，现在包含分析包。

Link to firebase github issue.

以下是我如何使用它的总结：

index.html

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

main.js

import * as firebase from 'firebase/app';
...
firebase.initializeApp(firebaseConfig);
firebase.analytics();
...

这导致在 firebase 上获取统计信息。传播用了2天

Answer 3

我都包含了，代码很好，没有错误，但我在仪表盘中找不到分析数据，也无法检查我发送的事件。你能看到这个吗？

Answer 4

使用 cdn

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/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.7.1/firebase-analytics.js"></script>

或使用导入

npm install --save firebase
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

初始化

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var 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: "G-MEASUREMENT_ID",
};

文档 https://firebase.google.com/docs/web/setup

如何启动 Firebase Analytics 在 Web 上工作？

How to initiate Firebase Analytics to work on Web?

javascript

google-analytics

firebase

firebase-analytics