How to Use Firebase Analytics with Angular

Firebase is an application development platform that supports web and mobile development. It provides various services like real-time databases, analytics, storage, authentication, and hosting.

Firebase Analytics is one of the most exciting features of Firebase since it provides an application-focused analytics dashboard with countless features. Here is a quick tutorial on setting up Firebase Analytics with Angular.

How Firebase Analytics works

Firebase Analytics was first introduced in 2016 by the Google Analytics team. The main purpose of this introduction was to provide an application-focused analytics service. Compared to Google Analytics, it focuses on tracking events and user properties instead of page views and sessions.

When we use Firebase SDK, it automatically captures up to 500 default events. It can also be used to define custom events to get application-focused data. Once the data is captured, the Firebase Analytics dashboard is populated with detailed insights of data.

However, under the hood, it uses Google Analytics. That is why the name was later changed to Google Analytics for Firebase. Nevertheless, a lot of developers call it Firebase Analytics.

Integrating Firebase Analytics with an Angular Application

In this tutorial, we will be implementing the following:

• Integrating Firebase Analytics for an Angular application.
• Defining a custom event and a user property with Firebase SDK.

You will need to have a basic understanding of Angular before you begin.

Step 1 — Creating a New Firebase Project

Before we can use Firebase Analytics, you need to create a Firebase project. To do this, go to your Firebase console as shown below.

Then, click the Create a Project button, and you will be redirected to the project creation wizard. There, you can enter a name for your project and click continue.

Step 2 — Enabling Firebase Analytics

In the 2nd step of the wizard, you will get an option to enable Firebase Analytics for your project. Make sure to enable it and click the Continue button to finish the wizard.

However, if you have already created a project with analytics disabled, you can enable it by navigating to the Dashboard under the Analytics section in the side menu.

Then, you need to click the Enable Google Analytics button, and you will be redirected to a window like below.

There, you can select an existing analytics account or create a new one. Next, you can complete the setup by clicking Enabling Google Analytics button.

Step 3 — Creating a Firebase Application

Now, you need to create a new Firebase application. As I mentioned, Firebase Analytics supports web, android, iOS, and Unity applications. You can select your application type from the options given in the analytics dashboard.

Since this tutorial is about Angular, let's select the web application option (</>). After choosing the application type, the wizard takes you to the app registration page. There, you need to configure a few details for the application, including an application nickname.

After registering the web application with a nickname, you will get the necessary details to add Firebase SDK to your Angular application. You have to copy these details before completing the wizard since we will use them in the next step.

Step 4 — Integrating Firebase with Angular

You need to follow a series of steps to add Firebase to your Angular application. Let’s go through them step by step.

Installing Firebase

Using AngularFire is the recommended way to install Firebase to Angular applications since it's the official Angular library for Firebase. And you can easily install it using ng add @angular/fire or npm i @angular/fire commands.

Firebase Configuration

You can use the Angular environment files to keep Firebase configurations.

export const environment = {
  production: true,
  firebase : {
    apiKey: “<API_KEY_HERE>”,
    authDomain: “<AUTH_DOMAIN_HERE>”,
    projectId: “<PROJECT_ID_HERE>”,,
    storageBucket:  “<PROJECT_STORAGE_BUCKET_HERE>”,
    messagingSenderId: “<MESSAGE_SENDER_ID_HERE>”,
    appId: “<APP_ID_HERE>”,
    measurementId: “<MEASUREMENT_ID_HERE>”,
  }
};

If you are enabling analytics for a project which has already been configured with Firebase, you just need to include the measurementId to the configuration.

Enabling Firebase Analytics

After setting configurations, you can import AngularFireModule andAngularFireAnalytics modules to app.module and initialize Firebase.

import { AngularFireModule } from ‘@angular/fire’;
import { AngularFireAnalyticsModule } from ‘@angular/fire/analytics’;import { environment } from ‘../environments/environment’;@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})export class AppModule { }

That's it. You have successfully configured Firebase Analytics for your project. Then you need to deploy the application, and you will start seeing analytics in the Firebase Dashboard within 24 hours.

However, if you navigate to the Realtime tab, you will see several instant analytics of the application, including users, user locations, events, etc.

Step 5 — Optimizing Analytics with Custom Integrations

As explained in the previous step, including the Firebase Analytics package in your application is sufficient to enable automatic data collection. But, we can further optimize the process by using custom events and user properties to collect application-related data.

Creating a Custom Event

Let's assume that you need to create an event to track when a user subscribes to the newsletter in your blog. So, you can easily create a custom event by injecting *AngularFireAnalytics* into a component.

import { AngularFireAnalytics } from ‘@angular/fire/analytics’;

...

constructor(private analytics: AngularFireAnalytics) {}

subscribe(){
   this.analytics.logEvent('subscribed')
}

Once the changes are deployed, you can see the event details under the Events tab. You can see more details about those events by clicking on them.

Creating a Custom User Property

User properties allow Firebase Analytics to divide users into small subgroups. For example, if your applications 2 types of users as admin and non-admin, you can define a custom user property to track which type of user is logged in.

import { AngularFireAnalytics } from ‘@angular/fire/analytics’;

...

constructor(private analytics: AngularFireAnalytics) {}async userLogin(username, password){
   var user = await validateUser (username, password);
   
   ...
   
   this.analytics.setUserId(user.id);
   this.analytics.setUserProperties({ level: user.type });
}

You can use many custom configurations and features to personalize the analytics result. You can find more about them in Firebase documentation.

That's basically it. You have successfully integrated Firebase Analytics with an Angular application.