Ionic 6 Angular Google Analytics Integration Tutorial

Ionic Angular Google Analytics tutorial; In this extensive guide, we will find out how to add google analytics in the Ionic Angular application with the help of Cordova and Ionic native google-analytics plugin.

Apart from integrating google analytics in Ionic, we will also explain how to create or setup GA event tracking in an ionic, angular app.

Google Analytics is an easy tool that allows you to monitor and analyze website traffic. It is considered the best and widely used website statistics service globally.

Google Analytics is a really helpful and exquisite tool from a user engagement perspective that allows analyzing web site traffic to understand a site visitor more precisely.

Install Ionic App

We assume you have set up Ionic CLI, If not then execute recommended command:

npm install -g @ionic/cli

Thereafter, open console, type command and execute it to install the new Ionic angular application:

ionic start ionic-test-app blank --type=angular

Use command to move to app directory:

cd ionic-test-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Google Analytics Plugin

In the next step, you need to install ionic native, and Cordova google analytics plugins execute both the commands simultaneously.

ionic cordova plugin add cordova-plugin-google-analytics

npm install @ionic-native/google-analytics

npm i @ionic-native/core

Register GoogleAnalytics in AppModule Class

You require to register the GoogleAnalytics module into the main App module class, due to which you will be able to access the essential methods that can help you integrate google analytics in Ionic as well as integrate event tracking in Ionic.

Update app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


// GA
import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    GoogleAnalytics,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

Add Google Analytics into Ionic

You have to pass the Google Analytics code into the startTrackerWithId() method we have accessed using the googleAnalytics module.

Similarly, you can track view events using the trackEvent() method, where you need to pass the screen title; also, you add trackEvent() and pass the value to track events.

There are numerous methods provided by the google analytic plugin that are useful in tracking the other GA metrics.

Update app.component.ts file:

import { Component } from '@angular/core';
import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})

export class AppComponent {
  
  constructor(private googleAnalytics: GoogleAnalytics) {
    this.googleAnalytics.startTrackerWithId('YOUR_TRACKER_ID')
    .then(() => {
      console.log('Google analytics invoked');
      this.googleAnalytics.trackView('Screen Title') 
      
      // Tracker is ready
      // You can now track pages or set additional information such as AppVersion or UserId

      .then((res) => {
        console.log(res)
      })
      .catch(
        error => console.log(error)
      );  
     }).catch(
      error => console.log('GA error: ' + error)
    );    
  }

    // GA event
    gaEvent(Value) {
      this.googleAnalytics.trackEvent('Category', 'Action', 'Label', Value)
      // Label and Value are optional, Value is numeric
    }  
  
}

Conclusion

In this Ionic Google Analytics example, you have ascertained the simple way of implementing google analytics into the ionic, angular app.

Additionally, you have raised the curtain and understood how to create and set up GA events in the ionic app.