Track Events in a WebView with Google Analytics

1. Introduction

Last Updated: 2021-12-22

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 guide documents provide the sample code we need for this project into a github.


To get started, you'll need to grab the code and open it in your favorite dev environment. We will use 2 directories : android, web. The "android" directory is for Android app and the "web" directory is for a web page which will be called by 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.


  1. 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. Android Firebase configuration


Configure Android

  1. In the Firebase Console, Select Project Overview in the left nav, then click the Android button under "Get started by adding Firebase to your app"

You'll see the dialog shown in the following screen.


  1. The important value to provide is the Android package name, which you'll obtain using the following step.
  1. In your app directory, open the file android/app/src/main/AndroidManifest.xml.
  2. In the manifest element, find the string value of the package attribute. This value is the Android package name (something like com.yourcompany.yourproject). Copy this value.
  3. In the Firebase dialog, paste the copied package name into the Android package name field.
  4. We do not need the SHA-1 key here, unless you plan to use Google Sign In or Firebase Dynamic Links (note that these are not part of this codelab). If you plan to import in_app_purchase data from Google Play, you will have to set the key later.
  5. Click Register App.
  6. Continuing in Firebase, follow the instructions to download the config file google-services.json.


  1. Go to your app directory, then move the google-services.json file (that you just downloaded) into the android/app directory.
  2. Back in the Firebase console, skip the remaining steps and go back to the main page of the Firebase console.
  3. Finally, you need the Google Services Gradle plugin to read the google-services.json file that was generated by Firebase.
  4. In your IDE or editor, open android/app/build.gradle, then add the following line as the last line in the file:
apply plugin: ''
  1. Open android/build.gradle, then inside the buildscript tag, add a new dependency:
buildscript { 
   repositories {
      // ...
   dependencies {
      // ...
      Classpath ''
  1. 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. a0f31cdf21ea85d1.png

First, create a javascript file to use in html file. In the sample code, the js file 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 like below.


When the event triggered in the webview in Android, "window.AnalyticsWebInterface" will be called and it will connect the event to the native 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 but in this codelab, we will guide you to 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.


7. Develop interface code in Android App

To track the events in a webview with Google Analytics, 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 Android app.

Create "" 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 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 [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

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.

af6e8da348dbe775.png aa804eb02f0b7d3f.png

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.

Mark event1 as a 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-Flutter 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.


  1. Choose Google Ads account.

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.


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


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


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


After setting event1 as a conversion action, you can launch action campaigns that can target users who will likely fire event1 events more than 5 times.

10. Launching app action campaigns with imported events

  1. 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.
  2. Launch an App promotion campaign with the App Installs option.


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


  1. 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.