About this codelab
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
- 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.
- 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
- 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.
- The important value to provide is the Android package name, which you'll obtain using the following step.
- In your app directory, open the file
android/app/src/main/AndroidManifest.xml
. - In the
manifest
element, find the string value of thepackage
attribute. This value is the Android package name (something likecom.yourcompany.yourproject
). Copy this value. - In the Firebase dialog, paste the copied package name into the
Android package name
field. - 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. - Click Register App.
- Continuing in Firebase, follow the instructions to download the config file
google-services.json
.
- Go to your app directory, then move the
google-services.json
file (that you just downloaded) into theandroid/app
directory. - Back in the Firebase console, skip the remaining steps and go back to the main page of the Firebase console.
- Finally, you need the Google Services Gradle plugin to read the
google-services.json
file that was generated by Firebase. - 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'
- Open
android/build.gradle
, then inside thebuildscript
tag, add a new dependency:
buildscript {
repositories {
// ...
}
dependencies {
// ...
Classpath 'com.google.gms:google-services:4.3.3'
}
}
- 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.
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 "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 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
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.
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.
- Go to Firebase Settings by clicking the button next to Project Overview.
- In the Integrations tab, you'll see Google Ads and a Link button. Click Link and then click Continue.
- Choose Google Ads account.
Now the Firebase part is done.
Go to Google Ads.
- Log in, and go to Tools & Settings > Measurement > Conversions to import custom events as conversions.
- Click the + button to add new conversion actions.
- Choose Google Analytics 4 properties (Firebase) and click Continue.
- You can see all of the analytics events that are marked as conversions. Find the
event1
event that we implemented before.
- 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
- 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.
- Launch an App promotion campaign with the App Installs option.
- Find your app by typing the app name, package name or publisher.
- In the Bidding section, select In-app actions in the dropdown menu.
- Find your custom event in the list provided. Set Target cost per action, and complete any additional options.
- 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.