Track Events in a WebView with Google Analytics for Firebase

1. Introduction

Last Updated: 2022-02-25

What you'll build

In this codelab, you will learn how to forward events from a web-page within WebView to a native code so that GA4F can track the events.

We'll use the sample Hybrid android app which calls a web-page using WebView.

What you'll learn

• How to initialize GA4F (Google Analytics for Firebase) in Hybrid app
• How to create custom events and parameters in web-page
• How to forward the events on a web-page within WebView to a native code
• How to debug
• How to import events and use them for action campaigns.

What you'll need

• Android Studio 3.6 or higher
• Firebase Account

2. Getting set up

Get the code

The Firebase official guide provides the sample code in GitHub. We need it for this project.

To get started, you'll need to download the code and open it in your favorite dev environment. We will use 2 directories : android and web. The "android" directory is for Android app and the "web" directory is for a web-page which will be called by the app through WebView.

3. Create and set up a Firebase project

To get started with Firebase, you'll need to create and set up a Firebase project.

Create a Firebase project

1. Sign in to Firebase.

In the Firebase console, click Add Project (or Create a project), and name your Firebase project as Webview-test-codelab or any name you like.

2. Click through the project creation options. Accept the Firebase terms if prompted. You should enable Google Analytics for this project, since you need Google Analytics events for tracking action events and analyzing conversions.

To learn more about Firebase projects, see Understand Firebase projects.

4. Firebase configuration for Android

Configure Android in Firebase Console

1. In the Firebase Console Home, you can click the Android icon like below.

Or you can go to Project Overview in the left navigation bar, and click the Android button under "Get started by adding Firebase to your app"

Then you'll see the "Add Firebase to your Android app" screen like below.

2. You can find your Android package name (ex. com.xxxx.myproject) in android/app/src/main/AndroidManifest.xml in your app directory.

package="com.xxxx.myproject"

3. SHA-1 key is not needed here. This key is needed only when you want to use Google Sign In or Firebase Dynamic Links or importing in_app_purchase data from Google Play which is not the scope of this codelab.
4. Click Register App.
5. Download the config file google-services.json in Firebase console, and copy & paste this file into the android/app directory in your app project.
6. Back in the Firebase console, skip the remaining steps and go back to the main page of the Firebase console.
7. Finally, you need the Google Services Gradle plugin to read the google-services.json file that was generated by Firebase
8. In your IDE or editor, open android/app/build.gradle, then add the following line as the last line in the file:

apply plugin: 'com.google.gms.google-services'

13. Open android/build.gradle. Then, add a new dependency inside the buildscript tag.

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. If your app is still running, close and rebuild it to allow gradle to install dependencies.

You're done configuring your app for Android!

5. Develop a Analytics Web Interface in the web and log custom events

To track the events in a webview with Google Analytics, you need to insert the code into both web and android app.

In this part, let's look at which code you need to put in the web-page.

First, create a javascript file to use in a html file. In the sample code, the js file is named as index.js. You need to create the function "logEvent" for calling "AnayticsWebInterface" for Android, and "messageHander" for iOS like below code.

And call this function where you want to track the event in the html file like below.

When an event is triggered in the WebView in Android app, "window.AnalyticsWebInterface" will be called and it will forward the event to the WebInterface code in the app.

6. Host web directory to get web page URL

Before you call a web-page within WebView in your app, you need a web-page url. There will be many methods to host web-pages. In this codelab, we will use Firebase hosting service just for convenience.

• In your terminal, enter the web directory (ex. cd web) and run the following commands:
• npm install -g firebase-tools

this will install the Firebase CLI.

• firebase login
• firebase init
• Choose ‘Hosting' when asked which feature you want to set up.
• Choose the project you set up for your Android app.
• Accept the defaults for all remaining prompts.
• firebase deploy --only hosting - deploy to Firebase hosting.

• After getting the web page URL, go to your app project in the Android Studio and insert the web URL just made in this step within WebView like below.

7. Develop interface code in Android App

To track the events in the WebView with GA4F, you need to insert the code into both web and android. In this part, let's look at which code you need to put in the Android app to receive the events from the web-page in WebView.

Create "AnalyticsWebInterface.java" file to make "AnalyticsWebInterface" class. In this class, you need to code @JavascriptInterface to connect the logEvent function in the web js file like below.

Next, you need to add javascript interface in the Activity which call the WebView like below.

To see the whole code for it, please refer to the sample code you downloaded from GitHub in the "Getting set up" step.

8. Checking and debugging events

For debugging events, you can use the following code in Android Studio terminal after connecting the test device or launching the emulator.

> adb shell setprop debug.firebase.analytics.app [app package name]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Click "LOG EVENT 1" in your app, and if your code works well, you will see the log like below.

If you want to check in the Firebase console, you can also use the Realtime tab. Go to the Firebase console and click the Realtime tab like below.

Then, filter Android platform event by using "Add comparison" function.

You will see the events from Android app in Realtime tab if your code is rightly implemented.

In several hours, you can see your logged events in the Events tab in the Firebase console. Just click on the Events tab from the Analytics Section present in the Firebase Console. You can also check the values inside the event event1 by just clicking on the event.

To import event1 as a conversion in Google Ads, Mark it as conversion by sliding the Mark as conversion switch to the right.

If the event is in the Conversion tab, then you have successfully marked the event as a conversion. Google Ads will now be able to import this event from the Firebase.

For debugging purposes, use Firebase DebugView. For more details, see Debugging event.

9. Importing analytics events in Google Ads

Once your Firebase-setup is complete, you're ready to launch the app campaigns with action events. Start by linking the Firebase to Google Ads. By linking the Firebase to Google Ads, app campaigns can import Firebase events. This process also helps Google Ads to boost the app campaigns by allowing it to learn more about their audiences.

1. Go to Firebase Settings by clicking the button next to Project Overview.
2. In the Integrations tab, you'll see Google Ads and a Link button. Click Link and then click Continue.

3. Choose Google Ads account.

Caution: If the target event is not marked as a conversion event, Google Ads will not be able to import it. Make sure the event is correctly marked as a conversion.

Now the Firebase part is done.

Go to Google Ads.

1. Log in, and go to Tools & Settings > Measurement > Conversions to import custom events as conversions.
2. Click the + button to add new conversion actions.

3. Choose Google Analytics 4 properties (Firebase) and click Continue.

4. You can see all of the analytics events that are marked as conversions. Find the event1 event that we implemented before.

5. Check the action, click Import, and then click Continue.

After setting event1 as a conversion action, you can launch app action campaigns with event1 event.

10. Launching app action campaigns with imported events

Important: In order to successfully launch an app campaign, you need to obtain a production level app in Google Play. However, if you are not yet ready for publication, you can skip this step for now.

6. Go to the campaign tab of your current account, and start a new campaign by clicking the + button. Click [New campaign] and then click Continue.
7. Launch an App promotion campaign with the App Installs option.

8. Find your app by typing the app name, package name or publisher.
9. In the Bidding section, select In-app actions in the dropdown menu.
10. Find your custom event in the list provided. Set Target cost per action, and complete any additional options.

11. Finish your campaign settings.

11. Congratulations

Congratulations, you've successfully integrated your Firebase and Google Ads! This will help you boost your campaign performance with Firebase imported events.

You've learned

• How to initialize GA4F (Google Analytics for Firebase) in Hybrid app
• How to create custom events and parameters in web-page
• How to forward the events on a web-page within WebView to a native code
• How to debug
• How to import events and use them for action campaigns.

12. References

Official Guide

• Use Analytics in a WebView - Firebase - Google

Firebase & Google Ads Setup

• Google Ads with Google Analytics for Firebase custom events - Android
• Launching Google Ads Campaigns with Google Analytics Custom Events and Flutter