I have initiated a FB SDK in the project following the documentation:

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.

Here is my 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.

What am I missing?

EDIT

After reading more documentation and double checking my index, I added the following <scripts> but with no prevail.

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src=".5.0/firebase-app.js"></script>
<script src='.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.

After import in index I still need to run firebase.analytics() but that has to follow firebase.initializeApp().

How can one call both in the main.js so that firebase functions are not separated between index and 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.

Thanks.

I have initiated a FB SDK in the project following the documentation:

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.

Here is my 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.

What am I missing?

EDIT

After reading more documentation and double checking my index, I added the following <scripts> but with no prevail.

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

After import in index I still need to run firebase.analytics() but that has to follow firebase.initializeApp().

How can one call both in the main.js so that firebase functions are not separated between index and 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.

Thanks.

• javascript
• firebase
• google-analytics
• firebase-analytics

• Did you include the analytics SDK (e.g. with something like <script src='https://www.gstatic./firebasejs/7.1.0/firebase-analytics.js'>)? – Frank van Puffelen Commented Nov 25, 2019 at 15:55
• No but that's not also in the docs. – KasparTr Commented Nov 26, 2019 at 9:03
• Well.... it is needed, so not including the SDK would explain why analytics doesn't work for you. – Frank van Puffelen Commented Nov 26, 2019 at 14:12
• Added the edits. Just adding that is not enough, also the .analytics() has to be called but... – KasparTr Commented Dec 2, 2019 at 15:27

4 Answers 4

This was an issue with how the firebase library was structured. It was fixed in 7.1.0 and the analytics package is now included.

Link to firebase github issue.

Here is the summary how I got it working:

index.html

...
<body>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic./firebasejs/7.5.0/firebase-app.js"></script>
    <script src="https://www.gstatic./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. It took 2 days for it to propagate.

For Analytics to work in your Firebase app, you'll need to include the SDK.

A mon way to do this is with:

<script src='https://www.gstatic./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.

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?

use cdn

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

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google./docs/web/setup#available-libraries -->
<script src="https://www.gstatic./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.",
  databaseURL: "https://PROJECT_ID.firebaseio.",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

docs https://firebase.google./docs/web/setup