Simplest Firebase Analytics Guide for your project

Note: This post does not include how to create a web app on firebase console, since I am focusing only on how to show on the Firebase Analytics console the events that you want to create for your project.

The result of the process should lead you on a view like this

I spent quite a lot of time today trying to figure it out how this works and I thought to share my experience since there are many posts that you will loose your time.

• I am using Vite framework and TypeScript.
• I have add the app on the firebase console and also the firebase.ts configuration file.

On the picture above, on the right side you can see the login event.
Below this is an example on how I created and stored the signInWithEmailAndPassword() method from firebase library and how I am adding the analytics method after the signing in.

const signIn = (
    email: string,
    password: string,
  ): Promise<firebase.auth.UserCredential> => {
    return auth.signInWithEmailAndPassword(email, password).then((user) => {
      analytics.logEvent('login')
      return user
    })
  }

On that part of code, the login event is being used by firebase analytics library and documentation:
https://developers.google.com/gtagjs/reference/event#page_view

Then I realised that the events on the console will not show up till 24hrs have passed, so you will have to see it on debugging view.

• Firstly download on your Chrome the Google Analytics Debugger: https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en and activated it.
• Then on your firebase project go to Dashboard -> and click on the DebugView Report

https://firebase.google.com/docs/analytics/debugview#web
This will open to another page and the last thing you need to do is to copy-paste the localhost link and it will connect.

That's a simple and easy example so that you can create more and more events for your analytics.

Enjoy!