Launching Google Ads Campaigns with Google Analytics Custom Events and Flutter

1. Introduction

Last Updated: 2021-01-25

What you'll build

In this codelab, You will learn how to implement custom events with GA4F, and launch action campaigns through Google Ads for Flutter app.

We'll use the default Flutter app with a simple counter widget. We'll advertise our app to potential users, who will likely click the counter widget.

What you'll learn

• How to initialize GA4F (Google Analytics for Firebase) in Flutter
• How to create custom events and parameters
• How to import events from Firebase to Google Ads
• How to launch action campaigns with custom events

What you'll need

• Android Studio 3.6 or higher
• Xcode (for iOS support)
• Firebase Account
• Google Ads Account

2. Start a new Flutter project

Create a simple templated Flutter app. You'll modify this starter app for this codelab.

Launch Android Studio.

Note: If you don't see New Flutter Project as an option in your IDE, then make sure you have the plugins installed for Flutter and Dart.

1. If you do not have open projects, then select Start a new Flutter app from the welcome page. Otherwise, select File > New > New Flutter Project.
2. Select Flutter Application as the project type, and click Next.
3. Verify that the Flutter SDK path specifies the SDK's location. (Select Install SDK if the text field is blank.)
4. Enter the project name, and click Next.
5. Use the default package name suggested by Android Studio, and click Next.
6. Click Finish.
7. Wait for Android Studio to install the SDK and create the project.

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 Firebase-Flutter-Ads 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. Platform-specific Firebase configuration (Android)

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.

2. The important value to provide is the Android package name, which you'll obtain using the following step.

Tip: Read Set the application ID for more information about package and application IDs.

3. In your Flutter app directory, open the file android/app/src/main/AndroidManifest.xml.
4. 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.
5. In the Firebase dialog, paste the copied package name into the Android package name field.
6. 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.
7. Click Register App.
8. Continuing in Firebase, follow the instructions to download the config file google-services.json.

9. Go to your Flutter app directory, then move the google-services.json file (that you just downloaded) into the android/app directory.
10. Back in the Firebase console, skip the remaining steps and go back to the main page of the Firebase console.
11. Finally, you need the Google Services Gradle plugin to read the google-services.json file that was generated by Firebase.
12. 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 inside the buildscript tag, add a new dependency:

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 Flutter app for Android! For iOS, you may want to refer to this codelab ( Get to know Firebase for Flutter)

5. Configure Firebase Analytics in Flutter

In this step, you'll start using the Firebase Analytics package named firebase_analytics, which contains Firebase Analytics features.

The pubspec file manages the assets for a Flutter app. In pubspec.yaml, append firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 or higher) to the dependencies list :

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

While viewing the pubspec in Android Studio's editor view, click Packages get. This pulls the package into your project. You should see the following in the console:

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

Performing Pub get also auto-generates the pubspec.lock file with a list of all packages pulled into the project and their version numbers.

Caution: For specific Firebase versions, java.lang.IllegalArgumentException: Service not registered is shown when first initializing the FirebaseAnalytics class (see github issue 1662).

In lib/main.dart, import the new package:

import 'package:firebase_analytics/firebase_analytics.dart';

In the MyApp class, initiate the FirebaseAnalytics object by calling the constructor.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

Now you're ready to fire some custom event logs!

6. Log custom events with Firebase Analytics

If you were to generate a new template in the Flutter app, you would see a _counter variable, and the _incrementCounter() method inside the default State class. Now, you want to log custom events when the increment button is clicked more than five times from overly enthusiastic users. Later, we'll launch an app campaign to attract potential enthusiastic users

First, we want to pass the analytic objects that we have initialized to the Stateful widget. We start by adding an analytics parameter to the MyHomePage constructor.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

You'll also add an analytics parameter when calling the constructor.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

Now, you can easily log events with the logEvent() method. Add the method and increment the _counter variable.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

Now your app is ready to fire the custom event log!

You can also use prebuilt methods for firing events.

Now everything is ready. In your Android Studio, run "main.dart".

(Optional) Sending additional information to Firebase Analytics using parameters

You can send additional information through parameters. Custom parameters can be registered for reporting in your Analytics reports. They can also be used as filters in audience definitions that can be applied to each report. If your app is linked to a BigQuery project, custom parameters are also found in BigQuery (see BigQuery Export for Firebase).

We are setting _counter value as a parameter here.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

Checking and debugging events

In several hours, you can see your logged events 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 clicked_counter by just clicking on the event.

Mark clicked_counter 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.

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

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 clicked_counter event that we implemented before.

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

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

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

9. 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 Configure Firebase Analytics for Flutter
• How to log custom events with Firebase Analytics in the Flutter app.
• How to import events and use them for action campaigns.