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

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

Create a simple templated Flutter app. You'll 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'll 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 refer to this codelab ( Get to know Firebase for 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.

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!

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.

f0742c956977df1d.png

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.

32b01a1412ab2ba5.png

Mark clicked_counter as a conversion by sliding the Mark as conversion switch to the right.

e6b420a73db88f03.png

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.

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.

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 to import custom events as conversions.
  2. Click the + button to add 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 the action, click Import, and then click Continue.

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 the + button. Click [New campaign] and then click Continue.
  2. Launch an App promotion campaign with the 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. Find your custom event in the list provided. Set Target cost per action, and complete any additional options.

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