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

Question

I have initiated a FB SDK in the project following the documentation :我按照文档在项目中启动了 FB SDK：

Getting started with Analytics is easy.开始使用 Analytics 很容易。 Just add the Firebase SDK to your new or existing app, and data collection begins automatically.只需将 Firebase SDK 添加到您的新应用或现有应用，数据收集就会自动开始。 You can view analytics data in the Firebase console within hours.您可以在数小时内在 Firebase 控制台中查看分析数据。

Here is my main.js这是我的 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.

This allows the application to work with firebase Storage and Auth services but analytics is still not registering anything.这允许应用程序使用 firebase Storage 和 Auth 服务，但分析仍然没有注册任何东西。

What am I missing?我错过了什么？

EDIT编辑

After reading more documentation and double checking my index, I added the following <scripts> but with no prevail.在阅读了更多文档并仔细检查了我的索引后，我添加了以下<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>

The problem Default webpack firebase import doesn't have firebase analytics libraries, that's why you need to import using CDN.问题Default webpack firebase import 没有 firebase 分析库，这就是您需要使用 CDN 导入的原因。

After import in index I still need to run firebase.analytics() but that has to follow firebase.initializeApp() .导入索引后，我仍然需要运行firebase.analytics()但必须遵循firebase.initializeApp() 。

How can one call both in the main.js so that firebase functions are not separated between index and main ?如何才能在main.js通话双方，使firebase功能不分离与index和main ？

Also my main includes more logic to decide on the firebase config setup (have multiple projects) so I cannot just move all the firebase actions into index.html.此外，我的主要内容还包括更多逻辑来决定 firebase 配置设置（有多个项目），因此我不能将所有 firebase 操作移动到 index.html 中。

Thanks.谢谢。

Answer 1

This was an issue with how the firebase library was structured.这是 firebase 库的结构问题。 It was fixed in 7.1.0 and the analytics package is now included.它在 7.1.0 中得到修复，现在包含分析包。

Link to firebase github issue.链接到 firebase github 问题。

Here is the summary how I got it working:这是我如何使其工作的摘要：

index.html索引.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();
...

This resulted in getting stats on firebase.这导致获得有关 firebase 的统计数据。 It took 2 days for it to propagate.它花了2天的时间传播。

Answer 2

For Analytics to work in your Firebase app, you'll need to include the SDK.为了让 Analytics 在您的 Firebase 应用中工作，您需要包含 SDK。

A common way to do this is with:一种常见的方法是：

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

But of course any other way of including the necessary file is fine too.但是当然，任何其他包含必要文件的方式也可以。 Be sure to check what the latest version of the SDK is, under available libraries in the documentation.请务必在文档中的可用库下检查 SDK 的最新版本。

Answer 3

I have both included, the codes are fine and no errors, but I can't find the analytics data in the dashboard and can't check the events I sent.我都包含了，代码很好，没有错误，但我无法在仪表板中找到分析数据，也无法检查我发送的事件。 Are you able to see this?你能看到这个吗？

Answer 4

use cdn使用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>

or use import或使用导入

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";

init在里面

// 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",
};

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

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

问题描述

4 个解决方案

解决方案1
1 已采纳 2019-12-02 17:54:44

解决方案2
0 2019-11-26 14:15:22

解决方案3
0 2019-12-04 07:10:07

解决方案4
0 2021-07-10 03:12:17

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2019-12-02 17:54:44

解决方案2 0 2019-11-26 14:15:22

解决方案3 0 2019-12-04 07:10:07

解决方案4 0 2021-07-10 03:12:17

解决方案1
1 已采纳 2019-12-02 17:54:44

解决方案2
0 2019-11-26 14:15:22

解决方案3
0 2019-12-04 07:10:07

解决方案4
0 2021-07-10 03:12:17