Ionic 5 Google Analytics Sample App

Ionic 5 sample app using Google Analytics

Introduction

In this sample app tutorial, we will show how to integrate Google Analytics in your Ionic 5 Appery.io app.
Google Analytics enables you to log events in order to track the usage and behavior of the app.

👍

Note

A valid Google Analytics account should be used for this app.

Downloads and Resources

You can also try it yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:

But if you are interested in the detailed tutorial, please follow the steps below.

Part 1. Setting up your Google Analytics Account

  1. Create a new Google Analytics account or sign in to your existing account if you already have one.
  2. Navigate to the Google Analytics console to start:
  3. In the left menu, select Admin. In the ADMIN section, click the *+ Create Account button:
  1. Provide an account name e.g Google Analytics App. Keep the data-sharing settings as default and click the Next button.
  2. In the Property setup section, specify the name of the property e.g. My property. Also, define Reporting time zone and Currency:
  1. Click the Show advanced options link. Then click the toggle for Create a Universal Analytics property, specify the Website URL (can be a dummy URL), select the Create a Universal Analytics property only option, and click Next:
  1. Finish creating by filling out the About your business section, click Create, and then accept the Google Analytics Terms of Service Agreement.
  2. When ready, the Property details section will open where you will see your Tracking ID number that is required for our application:

It's time that we created an additional view for mobile.

  1. To do it, in the ADMIN section, click the click the *+ Create View* button:
  1. Select the Mobile app tab and type Mobile into the Reporting View Name field and click Create View to save a new mobile reporting view:

Part 2. Importing Cordova Plug-in

  1. Go to the Resources tab and select the Cordova plugins tab:
  1. Click the green Import Cordova plugin button and select the From Git tab.
  2. Now, enter https://github.com/danwilson/google-analytics-plugin into the Repository URL field* and type in master into the Repository branch field:
  1. In a moment, you can check that the plug-in has been successfully imported:

Part 3. Creating App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 5 > Ionic 5 Blank for the application type, enter GoogleAnalyticsApp for the app name, and click Create:

You will be navigated to the Appery.io visual App Builder.

Adding Dependencies

  1. Inside the app, navigate to Project > App settings > Cordova plugins and select the Imported Cordova plugins tab. Then, check the Google Universal Analytics Plugin checkbox:
  1. Now, navigate to Project > App settings > Npm modules and in the Dependency section, add a new dependency, @ionic-native/google-analytics of version ^5.35.0:
  1. Now, navigate to Pages > app and go to its MODULE panel.
  2. In the Imports section, enter the following line of code:
import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';
  1. Scroll down to the NgModule Settings > Providers section and enter GoogleAnalytics into the text field:
  1. Make sure you save the app changes by clicking the SAVE button in the App Builder Toolbar.

Part 3. Adding Tracking Methods

  1. Switch to the Screen1 page's CODE panel.
  2. In the Internal includes section, click the Edit Internal includes button, then select Platform from the dependencies list and save:
  1. Go to the Custom includes section and add a new include, { GoogleAnalytics } with the @ionic-native/google-analytics/ngx path.
  2. In the Variables section, create two variables: platform of Platform type and ga of GoogleAnalytics type. The Add DI checkboxes should be checked:
  1. Go to the DESIGN panel of the Screen1 page and add the Button component to the page. Name the button e.g. My event:
  1. Unfold the EVENTS panel from the bottom and create a new Page create event for the page with Run TypeScript for its Action, and type the following code:
this.platform.ready().then(() => {
    //GA init
    this.ga.startTrackerWithId('YOUR_TRACKER_ID').then(() => {
        
        //Track Screen1 page
        this.ga.trackView('Screen1');
    });
});

📘

YOUR_TRACKER_ID is the tracking ID number from Part 1. Set up your Google Analytics Account section (Step 5) and can be found in the Property Settings section":

Now, let’s add tracking for the button click event.

  1. With the My event button selected, create a new Click event for this button with Run TypeScript for its Action, type in the below code, and save:
//Track My event
this.ga.trackEvent('Category', 'Action', 'My event', 1);

Now, if you click the Show all button, both added page events should be shown like the following:

  1. Save all the app changes.

Part 4. App Testing

Congratulations! You are ready to test the app.

❗️

Note!

Be informed that the Cordova Google Analytics plug-in doesn’t work in web preview so you will need to create an app binary and then install the app on the device.
So, if you select the TEST button in the App Builder Toolbar to launch the app and then click the MY EVENT button, you will get the next error message:

  1. To build the app binary, click the EXPORT button in the top menu and select the platform you like:

Note that building the binary file could take a while.

  1. When the binary file builds, you will be able to download it or scan the QR code to install the app on the device:
Android binary file builtAndroid binary file built

Android binary file built

  1. Run the application on the device and click the My EVENT button:
  1. With the test application open, go to the Google Analytics console and select My Property and Mobile reporting view:
  1. In the Realtime > Overview section the first page visit can be seen:
  1. Now, go to Realtime > Events to see the My EVENT button click event(s):
  1. To see the stored page views and events, open the Behavior section of the console.

🚧

Note

Tracked page views and events do not appear immediately in the Behavior section. Analytics takes some time to process data.