Ionic 5 Google Analytics 4 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.

๐Ÿšง

Important Note!

Our Google Analytics 4 Sample App contains ready to use services and the UI that makes it easy to use.
Note that you will need a valid Google Analytics Account to make it work.

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:
447447
  1. Provide an account name e.g Google Analytics 4 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 and click Next:
11161116
  1. Finish creating by filling out the About your business section, click Create, and then accept the Google Analytics Terms of Service Agreement:
11031103
  1. Select the Web data stream for the platform on the next screen:
15171517
  1. Provide your Website URL and Stream name. Click Create stream:
11631163
  1. The page with your Web stream details opens. Save your MEASUREMENT ID that will be used for our application:
11951195

Part 2. Creating App

  1. Go to the Apps tab.
  2. Click Create new app.
  3. Select Ionic 5, then select the Ionic 5 Blank template.
  4. Type in the app name (for example, Ionic 5 Google Analytics App).
  5. Click Create:
923923

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

Creating App UI

  1. Go to the Screen1 page DESIGN panel and, and under its PROPERTIES panel, set the Page Footer property to False (you will be asked to confirm you agree to this change - click OK to accept).
  2. Then, select its *Toolbar title component and and change its Text property to *Google Analytics App***.
  3. Drag&drop the Button component to the screen and define its Text property as My click event under the Common tab:
15991599

That's it for the app UI.

Now, let's proceed to the app logic.

Adding Google Analytics Plug-in

First of all, we need to import the Google Analytics plug-in to the app.

  1. In the App Builder, click the CREATE NEW button, then From Plugin, then select Google Analytics](https://docs.appery.io/docs/apperyio-utilities#google-analytics)** and confirm importing the plug-in:
12331233
  1. The GASettings service and GAModule typescript will be instantly imported under the Project view:
242242
  1. Select the GASettings file in the Services folder and paste the your MEASUREMENT ID (you obtained from the page with your Web stream details from Google Analytics) as the measurement_id property value:
15901590

๐Ÿ‘

MEASUREMENT ID is the ID number you obtained Part 1. Setting up your Google Analytics Account section (Step 9).

Part 3. Adding Tracking Methods

  1. Switch to the Screen1 page's CODE panel.
  2. Go to the Custom includes section and add a new include, { GoogleAnalyticsService } with the ngx-google-analytics path.
  3. Then, in the Variables section, add a new variable, ga of type GoogleAnalyticsService and make sure that the Add DI checkbox is checked:
954954
  1. Now, go back to the page DESIGN panel and expand its EVENTS tab.
  2. There, for the Page component, select the Page create event and define it with the Run TypeScript action.
  3. Enter the following code into the code editor and save:
this.ga.pageView('/Screen1', 'Screen1');
15791579

Now, letโ€™s add tracking for the button click event.

  1. With the My click event button selected, create a new Click event for this button with Run TypeScript for its Action, type in the below code, and save:
this.ga.event('click', 'My click event button', 'My event');
  1. Save your work:
15931593
  1. To finish, click the SAVE button in the App Builder Toolbar to save the app.

Part 4. App Testing

Congratulations!

You can now click the TEST button in the App Builder Toolbar to launch your app in the browser.

  1. When the app is loaded click the MY CLICK EVENT button:
464464
  1. Now, go to the Google Analytics console and select My Property GA4. Then, open Reports > Realtime.
  2. In the Realtime overview dashboard, you can see the collected app actions:
15871587

Did this page help you?