---
updatedAt: 2026-02-26T20:27:21.000Z
agentTools:
  projectIndex: https://docs.appery.io/llms.txt
---

# Ionic Google Analytics v.4 Sample App

Ionic sample app using Google Analytics

# Introduction

In this sample app tutorial, we will show how to integrate [Google Analytics](https://analytics.google.com/analytics) in your Ionic  [Appery.io](https://appery.io) app which will enable 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 (**FirebaseAnalyticsPlugin** plugin).

# Part 1. Creating App

1. Go to the **[Apps](https://appery.io/app/projects)** tab and click **Create new app**.
2. Select ***[Ionic Blank](https://docs.appery.io/docs/ionic-5-app-templates#ionic-5-blank)*** for the application type, enter the app name, for example, *GoogleAnalyticsApp*, and click **Create**:

<Image align="center" border={true} src="https://files.readme.io/a46e68b-2023-06-13_14-22-12.png" className="border" />

## Creating App UI

1. Go to the **Screen1** page **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel and, under its **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel, set the **[Page](https://docs.appery.io/docs/2-creating-an-app-ui-pages-and-tabs#properties-1)** **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](https://docs.appery.io/docs/ionic-5-ui-components-properties#toolbar-title)** component and change its **Text** property to ***Google Analytics App***:

<Image align="center" border={true} width="50% " src="https://files.readme.io/f9de9ce-2023-06-16_08-59-17.png" className="border" />

That's it for the app UI.  Not very complicated, is it?

Now, let's proceed to the app logic.

## Enabling Cordova Plugins

1. Inside the app, navigate to **Project > App Settings > Cordova plugins**.
2. To enable Google Analytics in an app, the **FirebaseAnalyticsPlugin** plugin has to be activated. Go to **Project > App Settings >[Cordova plugins](https://docs.appery.io/docs/appbuilder-app-settings#cordova-plugins)**, select the **[Core Cordova plugins](https://docs.appery.io/docs/appbuilder-app-settings#core-cordova-plugins)** tab, then select the **FirebaseAnalyticsPlugin** checkbox:

<Image align="center" border={true} src="https://files.readme.io/352d0a6-2023-06-06_11-37-07.png" className="border" />

> 🚧 Push Notifications Support
>
> Besides, if you plan to support push notifications in your app, make sure you completed the following steps:

* For Android, set up [Firebase Cloud Messaging Provider](https://docs.appery.io/docs/pushnotifications-configuration#setting-up-firebase-cloud-messaging-provider). Make sure the app package name in Firebase matches your app ID.

* Download the *Google Services JSON* file and *Firebase Admin SDK JSON* file from Firebase and add them to **[Push Notifications > Settings](https://docs.appery.io/docs/pushnotifications-sending#push-notifications-settings)** page.

* To support push notifications on iOS, add your *APNS Push Certificate* and *Certificate* password in **[iOS settings](https://docs.appery.io/docs/appbuilder-app-settings#ios-binary)**:

> 👍 Developing iOS Application and Publishing it to App Store on any Platform: Windows, Linux, or Mac Video Tutorial
>
> You can check this [Appery.io YouTube](https://www.youtube.com/@apperyio) video to learn how you can develop an iOS mobile app with [Appery.io](https://appery.io) right in the browser using a Windows desktop.\
> Also, you will learn how to install it on an iPhone for testing and then publish it to the *[App Store](https://www.apple.com/app-store/)*.

<HTMLBlock>{`
<iframe width="610" height="315" src="https://www.youtube.com/embed/RsdhQes0A5Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`}</HTMLBlock>

# Part 2. Setting Up Firebase Project

## Adding iOSApp

> 🚧 iOS support
>
> If you plan your app to support iOS, you need to make sure your  *Package name* under the **Project >[App settings >iOS binary](https://docs.appery.io/docs/appbuilder-app-settings#ios-binary)** tab is set to your app *Bundle ID* (the ID you provided for the uploaded certificate (you made it when registering the app on the Apple website).

1. Sign up to <https://firebase.google.com> and create a new project, for example, ***GAapp***.
2. Go to the **Project settings** tab and create a new app for the iOS project:

<Image align="center" alt="Firebase project settings" border={true} caption="Firebase project settings" src="https://files.readme.io/84b56f7-2023-06-06_11-50-14.png" />

3. In your [Appery.io](https://appery.io), go to the **Project >[App settings >iOS binary](https://docs.appery.io/docs/appbuilder-app-settings#ios-binary)** tab and copy your app *Bundle ID* to clipboard:

<Image align="center" border={true} src="https://files.readme.io/3bf2d84-2023-06-06_11-53-16.png" className="border" />

4. Then paste the *bundle ID* you copied to your Apple app in Firebase and register your app nickname:

<Image align="center" border={true} width="50% " src="https://files.readme.io/747fae2-2023-06-06_11-54-45.png" className="border" />

5. Next, download the generated *.plist* file to your drive and click **Next**:

<Image align="center" border={true} width="50% " src="https://files.readme.io/9f8f48a-2023-06-06_11-55-14.png" className="border" />

5. Click **Next** to proceed with the three next steps. In step 5, click **Continue to console** to exit the Firebase settings:

<Image align="center" border={true} width="50% " src="https://files.readme.io/dd89d3e-2023-06-06_12-00-57.png" className="border" />

## Adding Android App

Now, repeat all the steps described for iOS [above](https://docs.appery.io/docs/upd-ionic-5-google-analytics-sample-app#adding-iosapp) to add the Android app under the Firebase **Project settings** tab:

<Image align="center" border={true} src="https://files.readme.io/b114763-Animation1.gif" className="border" />

> 🚧 App Registration
>
> When registering your Android app with Firebase make sure you provide the correct package name (can be found under **Project >[App settings >Android binary](https://docs.appery.io/docs/appbuilder-app-settings#android-binary) > Package name** of your [Appery.io](https://appery.io) app):

<Image align="center" border={true} src="https://files.readme.io/391cf9c-2023-06-13_16-24-57.png" className="border" />

## Adding Web App

1. Now, add the Web app to your project under the Firebase **Project settings** tab:

<Image align="center" border={true} src="https://files.readme.io/ff5756b-2023-06-30_16-56-11.png" className="border" />

2. The app will appear next to the two already existing apps:

<Image align="center" border={true} src="https://files.readme.io/cd68d6f-2023-06-30_17-34-12.png" className="border" />

3. Now, switch to the **[Google Analytics console](https://analytics.google.com/analytics)**, go to the **Admin** section, and select the **Data Streams** tab:

<Image align="center" border={true} src="https://files.readme.io/2bc9605-2023-06-30_17-17-17.png" className="border" />

4. In the new window, select **Web** to add a new stream:

<Image align="center" border={true} src="https://files.readme.io/5868f94-2023-06-30_17-18-13.png" className="border" />

5. Define the stream and click to copy its *Measurement ID*:

<Image align="center" border={true} src="https://files.readme.io/367d0ba-2023-06-30_17-20-04.png" className="border" />

This is the id you will need to add to your  [Appery.io](https://appery.io) app and is described in [this ](#for-web) section.

# Part 3. Defining your App Data

## For iOS

Now, let's add the `.plist` file you just downloaded from Firebase to your [Appery.io](https://appery.io) app.

1. Go to **App settings > General** and upload the file to the **Assets** section by using the **[Files Manager](https://docs.appery.io/docs/3-creating-an-app-ui-styling-apps#using-files-manager)**:

<Image align="center" border={true} src="https://files.readme.io/75d76f2-2023-06-06_12-33-12.png" className="border" />

2. After the file is uploaded to the app, click **Close**:

<Image align="center" border={true} src="https://files.readme.io/84985dc-2023-06-06_12-34-19.png" className="border" />

3. Now, go to the **[Cordova Config](https://docs.appery.io/docs/appbuilder-app-settings#cordova-config)** tab, select the **iOS** tab, and add the following code `<resource-file src="./src/assets/files/GoogleService-Info.plist" />` in the **Custom config** section:

<Image align="center" border={true} src="https://files.readme.io/1c7eea9-2023-06-15_13-13-13.png" className="border" />

That's it for iOS!

## For Android

To be used with an Android device, your [Appery.io](https://appery.io) app needs to have the `.json` file you downloaded from Firebase added.

1. To do it, upload it under the **Assets** section: open the **App settings > General** and use the **[Files Manager](https://docs.appery.io/docs/3-creating-an-app-ui-styling-apps#using-files-manager)** for selecting and uploading the needed file. The file should be listed next to the `GoogleService-Info.plist` we uploaded earlier (for iOS):

<Image align="center" border={true} src="https://files.readme.io/dec538c-2023-06-13_16-04-47.png" className="border" />

2. Next, go to the **[Cordova Config](https://docs.appery.io/docs/appbuilder-app-settings#cordova-config)** tab, select the **Android** tab, and add the following code `<resource-file src="./src/assets/files/google-services.json" target="app/google-services.json"/>`:

<Image align="center" border={true} src="https://files.readme.io/cc075f2-2023-06-13_16-05-37.png" className="border" />

## For Web

To define your app to be used for the web:

1. Open your  [Appery.io](https://appery.io) app and go to the **app** page.
2. Open the page [**CODE**](https://docs.appery.io/docs/apperyio-visual-builder#code-panel) panel and click the **Edit** button to modify the ***constructor*** function:

<Image align="center" border={true} src="https://files.readme.io/da974e3-2023-06-30_17-21-44.png" className="border" />

3. In the editor, paste the following code but make sure you replace the *gtagId* with the *Measurement ID* you generated for the web app stream (check [here](#adding-web-app) for more details):

```typescript Code
const gtagId = "G-ZB6MLYTZZQ";

function gtag(name, value) {
    window.dataLayer.push(arguments);
}

if (this.$a.isBrowser()) {
    await this.$a.loadScript("https://www.googletagmanager.com/gtag/js?id=" + gtagId);
    window.dataLayer = window.dataLayer || [];
    gtag('js', new Date());
    gtag('config', gtagId);
}
```

<Image align="center" border={true} src="https://files.readme.io/17388f5-2023-06-30_17-28-07.png" className="border" />

4. Save the app.

> 🚧 Note!
>
> Tracked page views and events do not appear immediately as web app analytics takes some time to process data.

# App Testing

Congratulations!

1. You can now build your app and export it for [ Android](https://docs.appery.io/docs/appexport-androidAndroid) or [iOS](https://docs.appery.io/docs/appexport-ios), install and then run it on the device.

> 👍 Important Note!
>
> Please note that you will need to generate the [iOS certificate](https://docs.appery.io/docs/appexport-ios#generating-ios-certificates) with the [In-App Purchase capability](https://developer.apple.com/in-app-purchase/) to build an `.ipa` file.\
> You can check [this](https://docs.appery.io/docs/appexport-ios) document in case you need help with exporting your application for iOS.\
> [Here](https://docs.appery.io/docs/appexport-android#android-certificate-file), you will find information on generating certificates for Android.\
> Note as well that starting from *August 2021*, new apps are required to publish with the [Android App Bundle](https://developer.android.com/guide/app-bundle) (`.aab`) on Google Play.\
> Please read more [here](https://developer.android.com/guide/app-bundle).\
> You can also check this Appery.io YouTube video that shows how to create Android and iOS certificates:

<HTMLBlock>{`
<iframe width="610" height="315" src="https://www.youtube.com/embed/aMS4T0snEeA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`}</HTMLBlock>

2. After the app is started on the device, go to the **[Firebase console](https://console.firebase.google.com/)** and select the Firebase project you set up in [Step 2](https://docs.appery.io/docs/upd-ionic-5-google-analytics-sample-app#part-2-setting-up-firebase-project) (here it's **GAapp**). You can see the analytics for the app:

<Image align="center" border={true} src="https://files.readme.io/d049526-2023-06-15_15-16-05.png" className="border" />

3. Go to the **Analytics Dashboard** section to see more details on the app activity:

<Image align="center" border={true} src="https://files.readme.io/8e53a5d-2023-06-15_14-43-37.png" className="border" />

> 👍 Google Analytics console
>
> If needed, you can open the detailed view in the **[Google Analytics console](https://analytics.google.com/analytics)** by clicking the **View more in Google Analytics** button in the upper right corner.

> 🚧 Note!
>
> Tracked page views and events do not appear immediately as web app analytics takes some time to process data.