How to Implement Google Analytics in Ionic 7 Application

Last Updated on by in Ionic

This tutorial is going to help you learn how to implement Google Analytics in Ionic and Angular application using Ionic Native and Cordova plugins from scratch.

Google Analytics is a great web analytics tool developed and offered by Google for analysing web site traffic. It can help to track session duration, pages per session, bounce rate etc.

Real-Time Analytics is implied in GA, enabling a user to have insight about visitors currently on the site.

Not just that if you are a marketer or even an analyst, then you can create an excellent marketing strategy. So it is not wrong to say Its a boon from a marketing perspective.

Google Analytics has innumerable benefits, but we are specifically focusing on enabling GA for an Ionic application.

Also, we will see how to configure event tracking for Google Analytics for mobile applications.

Getting Started

Ionic CLI is a must have tool, this command-line tool lets you work on Ionic platform.

Run command to create the Ionic app.

sudo npm install -g @ionic/cli

Once Ionic CLI installed, then execute the command to install the Ionic project. You can skip this step if the app is already installed.

ionic start ionic-google-analytics-example sidemneu --type=angular

Get inside the project:

cd ionic-google-analytics-example

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

Install Ionic Native and Cordova Google Analytics Plugins

To track site visitors through Google Analytics in Ionic is simpler with Ionic Native and Cordova Google Analytics Plugins.

Add both the plugins simultaneously with the following command:

npm i cordova-plugin-google-analytics --legacy-peer-deps
npm install @ionic-native/google-analytics --legacy-peer-deps

You will astonish with the performance of both the plugins not just that it also supports various platforms such as Android, iOS, Windows Phones and Browser.

Import Google Analytics Plugin in AppModule

First, open the app/app.module.ts file, import the GoogleAnalytics from ‘@ionic-native/google-analytics/ngx’ then inject GoogleAnalytics in providers array.

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';

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

  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
  bootstrap: [AppComponent],

export class AppModule {}

Integrating Google Analytics in Ionic

Adding or implementing Google Analytics is more superficial.

In this segment of the tutorial, we will incorporate the GA tracking code in the Ionic application to keep an eye on-site visitors.

Run given below commands to add splash screen and status bar modules.

npm i cordova-plugin-splashscreen --legacy-peer-deps
npm install @ionic-native/splash-screen --legacy-peer-deps
ionic cordova plugin add cordova-plugin-statusbar --legacy-peer-deps
npm install @ionic-native/status-bar --legacy-peer-deps

Consequently open the app.component.ts file.

In here we will place the given below logic. It will help us keep the site visitor information with the help of GA tracking code.

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],

export class AppComponent {
  public appPages = [
      title: 'Inbox',
      url: '/folder/Inbox',
      icon: 'mail',
      title: 'Outbox',
      url: '/folder/Outbox',
      icon: 'paper-plane',

    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private ga: GoogleAnalytics
  ) {

  initializeApp() {
    this.platform.ready().then(() => {
        .then(() => {
          console.log('Google analytics is ready now');

            .then(() => {})
            .catch((error) => console.log(error));
        .catch((error) => console.log('Google Analytics Error: ' + error));

  // Track an event:
  trackEvent(val: any) {
    // Label and Value are optional, Value is numeric'Category', 'Action', 'Label', val);

The startTrackerWithId method of Google Analytics invokes the site tracking and displays the tracking related information in the GA dashboard.

The trackView() method sets the tracking for screen.

Generically, as the name suggests, the trackEvent method delicately tracks the event.

To view the Google Analytics in action run your application in real device and go to GA dashboard to monitor the web site tracking.


Ultimately, we have finished the Ionic Google Analytics tutorial.

We have barely scratched the surface; however, we have seen how to easily integrate Google Analytics in Ionic application using Cordova and Ionic Native plugins.

Apparently, this is just the tip of the iceberg; Google Analytics service provides tons of method that can make your tracking job easy.

You can check out more about Google Analytics methods and properties here.