Launching Google Ads Campaigns with Google Analytics Custom Events and Flutter

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 will use the default Flutter app with a simple counter widget. We will advertise our app to potential users who will likely click the counter widget.

bdbf1fc3cbf49ac7.png

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

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

Launch Android Studio.

  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.

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.

e9a8e1b1c7c52125.png

  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.

e58151a081f0628.png

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

3e5b8f1b6ca538c4.png

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 will see the dialog shown in the following screen.

3b7d3b33d81fe8ea.png

  1. The important value to provide is the Android package name, which you'll obtain using the following step.
  1. In your Flutter 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.

52f08aa18c8d59d0.png

  1. Go to your Flutter 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: 'com.google.gms.google-services'
  1. 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'
   }
}
  1. 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 see this codelab ( Get to know Firebase for Flutter)

In this step, you'll start using 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.

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

import 'package:firebase_analytics/firebase_analytics.dart';

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

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

Now you are ready for firing some custom event logs!

If you were to generate a new template in the Flutter App, you would see _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 certain enthusiastic users.

Later, we will launch app campaigns especially to attract potential enthusiastic users who will deeply engage themselves in the app.

First, we want to pass the analytic objects that we have initialized to the Stateful widget. We can first 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 logEvent() method. Put the method followed by increasing 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.

f0742c956977df1d.png

Now everything is ready. In your Android Studio, Run ‘main.dart'.

(Optional) Sending additional information to Firebase Analytics using parameters

You can also 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.

32b01a1412ab2ba5.png

You will mark clicked_counter as conversion by sliding ‘mark as conversion' switch to the right.

e6b420a73db88f03.png

To see whether the event is successfully marked as a conversion, double check it! If you can confirm that the event is in the Conversion tab, then you have successfully checked the event as a conversion. By marking this event as a conversion, Google Ads will be able to import this event from the Firebase.

However, for the debugging purposes, you can use Firebase DebugView. For more details, see Debugging event.

Once your Firebase-Flutter setup is complete, you are ready to launch the app campaigns with action events. You will first 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 right next to Project Overview.
  2. In the Integrations tab, you will see Google Ads and a Link button. Click Link and Continue.

b711bf2e94fa0895.png

  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 for importing custom events as conversion.
  2. Click + button for adding new conversion actions.

73cec8d2e80eab03.png

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

4b1d8f6a712b2ac6.png

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

ba1bbe6b2924fac8.png

  1. Check and click Import and Continue button.

ab35e341dff32e48.png

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.

  1. Go to the campaign tab of your current account, and start a new campaign by clicking + button. Click [New campaign] and continue.
  2. You will launch an App promotion campaign with App Installs option.

af98c44d1476558.png

  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. you can find your custom event in the list provided. Set Target cost per action, and fill other options as well.

885956ad00592eb3.png

  1. Finish your campaign settings.

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 Flutter app.
  • How to import events and use them for action campaigns.