Adding AdMob to your Flutter App
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 the AdMob app and ad units
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:
- In the AdMob console, click ADD APP from the Apps menu.
- When you’re asked ‘Have you published your app on Google Play or the App Store?’, click NO.
- Enter
Awesome Drawing Quizin 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:
- Select Awesome Drawing Quiz (Android) from the Apps menu in the AdMob console.
- 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.
- Click the ADD AD UNIT button.
- Select Banner as the format.
- Enter
android-adq-bannerin the Ad unit name field. - 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.
- Click the ADD AD UNIT button.
- Select Interstitial as the format.
- Enter
android-adq-interstitialin the Ad unit name field. - 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.
- Click the ADD AD UNIT button.
- Select Rewarded as the format.
- Enter
android-adq-rewardedin the Ad unit name field. - Leave the default for Reward settings.
- 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
This guide explains how to enable test ads in your ads integration. It’s important to enable test ads during…developers.google.com
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.
https://gist.github.com/Anirudhk07/869aa3fe4f7b60fee62dcc3cd341c3ab#file-ad_manager-dart
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.
https://gist.github.com/Anirudhk07/15305bc8ded3d53c9d0591f3abdae4d4#file-admobs-dart
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
A plugin for Flutter that supports loading and displaying banner, interstitial (full-screen), and rewarded video ads…pub.dev
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!.
