0

I'm newbie to Firebase Analytics Web implementation. But here's my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Cache-control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Firebase test</title>
    <base href="./" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no"
    />
  </head>

  <body>
    Hello :)
    <button onclick="logMyEvent()">Log an event</button>
    
    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.1/firebase-app.js";
      import { getAnalytics, logEvent } from "https://www.gstatic.com/firebasejs/10.13.1/firebase-analytics.js";
    
      const firebaseConfig = {
        apiKey: "xxx",
        authDomain: "xxx.firebaseapp.com",
        projectId: "xxx",
        storageBucket: "xxx.appspot.com",
        messagingSenderId: "000",
        appId: "xxx000",
        measurementId: "G-xxx"
      };
    
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      logEvent(analytics, 'test_init', { 'data': 'init' });

      window.logMyEvent = function() {
        console.log('Button was clicked!', analytics); // `analytics` is already defined.
        logEvent(analytics, 'test_button_click', { 'data': 'click' });
      };
    </script>
  </body>
</html>

As you can see this is just a basic Firebase Analytics implementation! But I don't see my events being logged in the 'DebugView' (or 'Realtime Analytics' page) of my Firebase project... Am I missing something?

In the 'DebugView', I also see this message: 'Debug Device: 0, No devices available', although I have already installed 'Google Analytics Debugger' Chrome extension and turned it on.

In the 'Network' tab of my Chrome browser's 'Developer Tools', I can see that as soon as I load the page, https://firebase.googleapis.com/v1alpha/projects/-/apps/xxx000/webConfig API calls happens, and I receive 200 OK response. But that's it! No other API calls will get out of my web-page after I click my button to log a new event! To me everything looks correct! But why it's not working?!

Any help is appreciated. Thanks in advance.

7
  • 1
    I've never seen firebase being used in web. Didn't even realize Firebase had a JS version. Why are you doing this? Why not just go with GA4?
    – BNazaruk
    Commented Sep 16, 2024 at 17:03
  • I want to call custom events for some of the elements in my web-app.
    – Ali
    Commented Sep 17, 2024 at 11:53
  • why not GA4?123
    – BNazaruk
    Commented Sep 17, 2024 at 15:52
  • I'd be definitely happy to see how I can easily implement GA4 and call custom events (and also page navigation events) with it, but I basically want to use Firebase Analytics, because that's my client's request :)
    – Ali
    Commented Sep 17, 2024 at 16:11
  • 1
    I asked the community. It seems like the main usecase for it is hybrid apps. Where part of the interface is native and part is web. Still doesn't answer your question. Just adding some context for future reference.
    – BNazaruk
    Commented Sep 18, 2024 at 19:38

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.