Ionic 4 | Adding Google Analytics in Ionic 4 Application using Cordova and Ionic Native Plugin

Google Analytic is very popular among Web applications to track various parameters like traffic analysis based on demography, event activity, content-based analysis etc. We have already discussed How to integrate Google Analytics in Ionic 3 application. Google Analytic provides use dashboards to view real-time traffic on Web Applications.

In this post, we will discuss on How we can integrate Google Analytics in Hybrid applications based on Ionic’s latest version 4. As hybrid application based on web view so it is very easy to integrate with a few steps.

Here we will start with a new Ionic 4 application with latest CLI version. In the application we will discuss how to create a Google Analytics ID spacially for Mobile devices as normal ID for web application does not work normally. We will apply events to track user interaction and also track pages changes by users real-time. To demonstrate fully we will create a multipage Ionic 4 application with sidebar template.

Also See: Add Google Analytics in Ionic 3 Application using Cordova and Ionic Native Plugin

Let’s start!

First, we will create a new Ionic 4 Application with Sidebar template to test Google Analytics in with different pages.

Make sure you have the latest version of Ionic CLI installed

Create a new application

As we have Ionic 4 application with Sidebar template already having two pages, home and list.

Install the Cordova and Ionic Native plugins

Next, we need a Google Analytics Tracking ID for Mobile application. Click on the following link get information on getting an ID for mobile applications.

How to Get Google Analytics Tracking ID for Mobile Device Tracking

After getting Tracking ID we can proceed further on adding GA to Ionic.

Add this plugin to your app’s module

Now we will inject Google Analytics plugin in the app.module.ts file then add in imports array as shown below.

Implementation of Google Analytics Methods in Application

Next, we will add GA code in the application to track Views a user visited and we will also add an event which will be triggered by user tap.

In app.component.ts file add the following code to start tracking with the provided Tracking ID

The method startTrackerWithId will start tracking in the application and you will start seeing your device in the Google Analytics dashboard.

Add trackView method in Home and List pages or any other pages you have in the following way. Here we have a list.ts file.

Using trackView method we can send the current page in Google Analytics dashboard. We have also added the trackEvent method to record a tap event.

you can check more event on documentation here 

So now you can track live visitors in your application using the Google Analytics plugin in Ionic 4

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

Notify of