Adding AdMob to your Flutter App

This blog guides you through adding an AdMob to an app

AdMob In Flutter

What you’ll learn !

✅How to set up a Firebase project for a Flutter app

✅How to configure the Firebase AdMob plugin

✅How to use banner, interstitial, and rewarded ads in a Flutter app

Content

Setting up a firebase project

Setting up the AdMob app and ad units

Different Ad Types

Firebase AdMob Flutter plugin

Adding helper class for Ads

Initialise AdMob SDK

Resources

Setting up a firebase project

:: Setting up the AdMob app and ad units

Because Flutter is a multi-platform SDK, you need to add an app and ad units for both Android and iOS in AdMob. Before you start, you want to be familiar with the following AdMob glossaries —

Ad unit

Ad unit is a set of ads displayed as a result of one piece of the AdMob ad code. You can create and customize an ad unit in your AdMob account. Each ad unit has a unique identifier, called the ad unit ID. When you implement a new ad unit in your app, you’ll reference the ad unit ID to tell ad networks where to send ads when requested.

STEP 1 : Add an Android app

Use the following instructions to add an Android app to AdMob:

1. In the AdMob console, click ADD APP from the Apps menu.
2. When you’re asked ‘Have you published your app on Google Play or the App Store?’, click NO.
3. Enter Awesome Drawing Quiz in the App name field, and select Android as the platform.

Note : Make a note of your new app ID (ca-app-pub- xxxxxxxxxxxxxxxx~yyyyyyyyyy).

You’ll need to add it to the sample project’s source code to run ads.

STEP 2: Create ad units

To start adding ad units to AdMob:

1. Select Awesome Drawing Quiz (Android) from the Apps menu in the AdMob console.
2. Click the Ad units menu.

From the Ad units menu, follow the instructions to create a banner ad, an interstitial ad, and rewarded ad unit.

Banner

Banner ads occupy a spot within an app’s layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.

Banner Ad

1. Click the ADD AD UNIT button.
2. Select Banner as the format.
3. Enter android-adq-banner in the Ad unit name field.
4. Click CREATE AD UNIT to complete the process.

Interstitial

Interstitial ads are full-screen ads that cover the interface of their host app. They’re typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game.

Interstitial Ad

1. Click the ADD AD UNIT button.
2. Select Interstitial as the format.
3. Enter android-adq-interstitial in the Ad unit name field.
4. Click CREATE AD UNIT to complete the process.

Rewarded

Rewarded ads are ads that users have the option of interacting with in exchange for in-app rewards.

Rewarded Ad

1. Click the ADD AD UNIT button.
2. Select Rewarded as the format.
3. Enter android-adq-rewarded in the Ad unit name field.
4. Leave the default for Reward settings.
5. Click CREATE AD UNIT to complete the process.

✔Important: It usually takes a few hours for a new ad unit to be able to serve ads. If you want to test the ad behavior immediately, then use the preconfigured app ID and ad unit IDs instead.
You can find Test IDs below - 

Test Ads | Android | Google Developers

Firebase AdMob Plugin

Now that you have set up the ad mob ads , it’s the time to integrate it to your App !

The firebase_admob plugin supports loading and displaying banner, interstitial, and rewarded ads by using the AdMob API.

The firebase_admob plugin supports loading and displaying banner, interstitial, and rewarded ads by using the AdMob API.

STEP 1 : Pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

STEP 2 : Update AndroidManifest.xml

android/app/src/main/AndroidManifest.xml

Add your AdMob app ID by adding a <meta-data> tag and entering com.google.android.gms.ads.APPLICATION_ID. If your AdMob app ID is ca-app-pub-3940256099942544~3347511713, then you need to add the following lines to the AndroidManifest.xml file.

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>
    
</manifest>

Adding Helper Class for ads

Create a new file named ad_manager.dart under the lib directory. Then, implement the AdManager class which provides an AdMob app ID and ad unit IDs for Android and iOS.

Make sure that you replace the AdMob app ID (ca-app-pub-xxxxxx~yyyyy) and the ad unit ID (ca-app-pub-xxxxxxx/yyyyyyyy) with the IDs you created in the previous step.

Initialize AdMob SDK

Congratulations !✨ You have reached the final step towards integrating Ads to your App !

Before loading ads, you need to initialize the AdMob SDK. Open the lib/home_route.dart file, and modify _initAdMob() to initialize the SDK before the game starts.

Hurray!! Now you can add banner ad, an interstitial ad, and rewarded ad unit.

To deep dive on how to add banner ad, an interstitial ad, and rewarded ad unit in a Demo App , stay tuned for the next upcoming blog !

Happy Fluttering !! ❤

Resources

firebase_admob | Flutter Package

If you are planning to have your own mobile application, website, custom web app designed by a professional design team, or Have any type of query or concern regarding its concept, technical know-how, the best way to get it done then don’t hesitate to reach out to us .

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.