How to Show Ads in Flutter

How to Use AdMob with Firebase Google Analytics

‍

One of AppIt's Senior Android Developers, Sravanya Katta, recently wrote an article discussing the steps involved in showing ads in Flutter. Check out her easy, step-by-step guide for developers, below. You can also view her article on Medium.

‍

Important Note: Before you can display ads from AdMob, you’ll need to create an AdMob account and activate one or more Ad Unit IDs.

‍

‍Before you begin with Step 1, become familiar with the following key terms.

‍

1. Ad units

Ad Units are containers you place in your apps to show ads to users. Ad units send ad requests to AdMob, then display the ads they receive to fill the request. When you create an ad unit, you assign it an ad format and ad type(s).

‍

2. Ad format

Ad formats describe the way ads will look in your app. Examples include Banner Ads, Interstitial Ads, Rewarded Ads, and Native Ads.

‍

3. Ad types

Ad types are the kind of ads you want to allow users to see. When an ad unit requests an ad from AdMob, it can only receive an ad that matches one of its assigned ad types. Ad types may include Text, Image & Rich Media Ads, Video Ads, and Interactive Ads.

‍

How to Create an AdMob App ID in Google AdMob

‍

First, navigate to the Admob website and log in.

‍
Step 1: Click on Apps, select ADD APP.

‍

‍

Step 2. Select “No” When Asked if You've Published Your App.

‍

‍

Step 3. Enter Your Project Name & Select Your Platform (iOS or Android).

‍

‍

Step 4. Your Project Has Been Successfully Created! Now Add Your Ad-Unit to Your Project.

‍

Simply click on NEXT: CREATE AD UNIT

‍

‍

Step 5. Configure Ad Unit Settings like Banner/Interstitial Ads.

‍

‍

Step 6. Your Ad Unit Has Been Created Successfully.

‍

‍

How To Configure AdMob with Firebase

Google Analytics is very useful for AdMob Publishers to monetize more intelligently. Best of all, it's free. Configuring AdMob with Firebase is highly recommended, but optional for developers.

‍

Important Note: If you use the Google Mobile Ads SDK without Firebase, your app will still get lots of AdMob’s ad formats.

‍

Steps to create the Firebase Project

First, navigate to the Firebase website and log in.

‍

Step 1. Name Your Project (For Example, "Flutter -Sample").

‍

‍

Step 2. Select Whether or Not You'd Like to Add Google Analytics to Your Project.

‍

Important Note: It is best practice to set up Google Analytics for your AdMob Project. It helps you monetize more intelligently.

‍

‍

Step 4. Configure Analytics Using Your Primary Gmail Account

‍

How to Link AdMob to Firebase Projects

‍

Step 1: Open Your Google AdMob Account and Click the "Link to Firebase" Link.

‍

‍

Step 2: Add Your Project’s Package Name for Android or Bundle ID for iOS.

‍

For Android Projects: If you are creating links for Android projects, add Package Name. This can be found in your Manifest File.

‍

The Path for the Manifest File
Project Name → Android → app → main → AndroidManifest.xml open this file. In the first tag, you will see package=”com.flutter.xyz”.

‍

‍

For iOS Projects: If you are creating links for iOS projects, add Bundle Identifier. This can be found in your info.plist File.

‍

The Path for info.plist File

1. Open this project in XCode, then open info.plist and check for the bundle identifier.
2. Run this command in terminal.

3. Open ios/runner.xcworkspace.

4. Select the Runner.

5. Open the General Project Settings tab.

‍

‍

6. Add your package name/bundle id in Firebase Console.

‍

‍

Step 3: Select Your New Project in Firebase.

‍

‍

Step 4: Click Continue.

Now, you will see that your new AdMob project is successfully linked to Firebase.

‍

‍

Step 5: Click on the Setting Icon and Download the Configuration Files.

You will need the google-services.json file  the GoogleService-Info.plist file.

‍

Great! You've completed all the project creations and configurations.

‍

‍

How to Integrate Firebase AdMob into a Flutter Project

Now, let's walk through how to use the Firebase-AdMob library and how to integrate Firebase AdMob into your Flutter project.

‍

Step 1: Open Your Flutter Project and Begin to Add the Below Items.

‍

1. pubspec.yaml

‍

Now, run this command.

‍‍

‍

How to Add AdMob Appld

‍

Step 1. For Android — Open the Manifest File.

‍

Project Name → android → main → AndroidManifest.xml
Add the below snippet inside the application tag.

‍

Step 2. For iOS — Open the info.plist File.

‍

Project Name → iOS → Runner → info.plist file
Add the below snippet in dict tag.

‍

‍

Now, add the downloaded google-services.json & GoogleService-Info.plist files to their respective projects (as mentioned below).
‍

‍

For Android: Project Name → android → app → google-services.json
‍

‍

For iOS: Project Name → iOS → Runner → GoogleService-Info.plist

‍

We've now created different projects for both iOS and Android. You can get the AppID & UnitID based on the platform you are using.

‍

‍

Initialize the AdMob plugin with an AdMob App ID in stateful widget’s initState.

‍

‍

Show the ads in button clicks.

‍

‍

‍
Now, you can see the Banner Ad & Interstitial Ad in your Android/iOS app when you click the button. By following the process explained above, you can quickly and easily integrate Admob + Firebase — Google Analytics into your Flutter application.

‍

For more details, see:

‍

FirebaseExtended/flutterfire

‍

A plugin for Flutter that supports loading and displaying banner, interstitial (full-screen), and rewarded video ads…

github.com

‍

If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Thanks 😄

‍