IONIC2 Google Analytics

IONIC2 | App Metrics using Google Analytics

abba Ionic2, Mobile App, User Experience Leave a Comment

Analyze your app metrics to gain insights into user behavior and increase engagement.

Revised and tested to work with IONIC 3.X

Whether you are an enterprise mobile developer or an indie developer, it is crucial that you collect usage data from your mobile apps. If you aren’t collecting app metrics using Google Analytics, you may be losing valuable insights in the application usage and metrics. It is important to measure application metrics so you do not spend resources on features that are not been used and instead enhance most commonly used features to keep your audience engaged. Make sure to check out the post, Anatomy of a Mobile App. I incorporate Google Analytics in all my ionic mobile apps from the get go. I have tried Flurry and apteligent (originally known as Crittercism) in some of the earlier apps and have now decided to use only Google Analytics for my apps.

In this post I will explain how easy it is to implement Google Analytics within your IONIC2 apps.

Step 1: Have a basic IONIC2 app running by following the instruction listed here.

Step 2: Install the google analytics plugin as follows:

Step 3: In app.module.ts, add the following import statement:

Next Update the providers array to include GoogleAnalytics as follows:

Step 4: In app.component.ts, add the following import statement:

Next pass the GoogleAnalytics object in the constructor as follows:

Step 5: In app.component.ts, add a new function initGoogleAnalytics as follows and invoke it from the constructor. Make sure to update the trackingId variable with your own Ids. The following function initializes Google Analytics when the app is ready with tracking Ids for android and IOS platforms. Do not forget to use the this.platform.ready().then(() => { statement to ensure that analytics is loaded when app is ready. I am also enabling exception tracking with Google Analytics on line 15. You can ignore that if you have another way of tracking exceptions.

Step 6: Invoke the newly added function within the constructor in app.component.ts as follows. At this point Google Analytics is initialized and ready to go. It might take up to 24 hours for your analytics data to be displayed in Google Analytics.

Step 7: Additionally you can track application events in your IONIC2 app as follows. Refer to IONIC2 documentation for more setails on all things you can track with this plugin.

Step 8: In your template HTML file, You can call the function added in step 6 as follows:

Other articles of interest