Angular8/10 with Firebase Analytics

Integrate and debug Firebase Analytics in an Angular App using AngularFire.

Dashboard after complete integration.

This article will help you to integrate the Firebase Analytics module into an Angular web application that already has the Firebase initialized.

Google Analytics is a free application measurement solution that helps you understand how people use your application.

Get started

I. If you’re using an existing Firebase project that doesn’t have Google Analytics enabled yet, then enable it as a first step.
How to do that? (You can skip this step if you are already enabled the GA while creating the project)

Dashboard before integrating GA

Go to the Dashboard option under the Analytics. Click on the Enable Google Analytic button and complete the process to enable the GA in your project.

A new field (measurementId) will automatically add to your Firebase config object when you enable Analytics in your Firebase project.

To check the Firebase config object, go to the General tab under the Project Settings. If you haven’t registered an app yet you can do it by clicking the Add app option in the same view. Now your Firebase config will look like below:

Sample Firebase config values after integrating GA

II. Enable Analytics in Angular project:

1. Add the measurementId by updating the Firebase config object in your code (Make sure that your Firebase SDK version is 7.2.0 or higher).
2. Initialize Firebase Analytics in app.module.ts file.

Firebase recommends using AngularFire Framework Library to bind Firebase to an Angular application (https://github.com/angular/angularfire). So, add AngularFire to your application for easy integration. Use the following command to add the library:

ng add @angular/fire

Maintain the below version compatibility for smooth integration and working.

version compatibility

Usage

import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule
  ]
})
export class AppModule { }

Your app.module.ts file will look like this. AngularFireAnalyticsModule will dynamically import and configure firebase/analytics.

In your component, you can then dependency inject AngularFireAnalytics and make calls against the SDK.

import { AngularFireAnalytics } from '@angular/fire/analytics';

constructor(analytics: AngularFireAnalytics) {
  analytics.logEvent('custom_event', { ... });
}

If you are using some common shared service, probably you can do like below:

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/analytics';
@Injectable()
export class AnalyticsSharedService {
private analytics: any;
    constructor() {
        // use any one of the codes below depends on the version
       // firebase version 8
        this.analytics = firebase.default.analytics();
        // firebase version 7
        this.analytics = firebase.analytics();
    }
logEvents(eventName: String): void {
        // shared method to log the events
        this.analytics.logEvent(eventName);
    }
}

Before the GA integration or the first deployment after your Analytic integration, nothing will show in the Dashboard.
But don’t worry within 24 hours you will see the reports in the dashboard.

Debugging

Firebase allows us to debug the events in realtime at the time of the development phase. This feature is helpful for the developer to validate the code and events.

How to do it?

1. To enable Analytics Debug mode in your browser, install the Google Analytics Debugger Chrome extension.
2. Turn on the GA Debugger from the Extensions.

Chrome extensions window

3. Now you can see the GA events consoles in the developer tool on your web browser.

4. A small popup window will appear in your application to connect to the Tag Assistant, if you try to connect to it, a new window that will open asking you to connect.

Tag Assistant window

5. After the successful connection, you can trigger some events from your application. You can view these events logs in the developer console and also in the DebugView option in the Firebase console.

Firebase DebugView under Analytics option

Now you can start using the full feature of Firebase Analytics in your app:

1. Free logging and reporting
2. Demographic information
3. Who your users are, user engagements, and a lot more…

Good luck!
If you are interested, check out my blog on Firebase Remote Config with AngularFire