Showing Ads in Flutter app
using Admob with Firebase Google analytics
Before you can display ads from AdMob, you’ll need to create an AdMob account and activate one or more Ad Unit IDs.
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).
Ad format
Describes the way ads will look in your app like Banner Ads, Interstitial Ads, Rewarded Ads, and Native Ads.
Ad types
The kind of ads you want to allow to show users. When the ad unit requests an ad from AdMob, it can only receive an ad that matches one of its assigned ad types like Text, Image & Rich Media Ads, Video Ads, and Interactive Ads.
Steps to Create an AdMob App ID in Google AdMob
Open Admob website
#1. Click on Apps, select ADD APP
#2. Select “No”
#3. Enter Project Name & Select Platform
# 4. Now your project is created. Add your Ad-Unit to the project
# 5. Configure Ad Unit Settings like Banner/Interstitial ads
# 6. Now you are done with Creating your selected Ad Unit
Configure AdMob with Firebase
Google Analytics is very useful for AdMob Publishers to monetize more intelligently and it is free. Configuring AdMob with Firebase is Recommended but it is optional.
Note: Using the Google Mobile Ads SDK without Firebase, your app still gets all of AdMob’s ad formats.
Steps to create the Firebase Project
Open Firebase website
# 1. Enter Project Name
# 2. Select if you want to add Google Analytics to your project or not?
# 3. Select your Gmail account to configure Analytics
Linking AdMobs To Firebase Project
# 1
Open Google AdMob account which you created your AdMob project earlier. Here you will see LINK TO FIREBASE option. Click on that link.
# 2
Add your project’s Package name for android, Bundle ID for iOS.
Android: If you are creating linking Android project add Package Name. Which will be in your Manifest File. Here is the path for the manifest file
Project Name → Android → app → main → AndroidManifest.xml open this file. In the first tag, you see package=”com.flutter.xyz”.
iOS: If you are creating linking iOS project add Bundle Identifier. Which will be in your info.plist File. Open this project in XCode, then open info.plist and check for the bundle identifier.
run this command in terminal
open ios/runner.xcworkspaceSelect the Runner, Open General Project Settings tab
# 3
Select your project which is created in firebase.
# 4
Click on continue, now you will see AdMob project is successfully linked to Firebase message.
# 5
Click on the Settings icon download the configuration files below google-services.json & GoogleService-Info.plist
Library Integration
Now we would be using Firebase-AdMob library to integrate Firebase AdMobs into a Flutter project.
Open Flutter project and add this in pubspec.yaml
firebase_admob: ^0.9.0+7Then run this command
flutter packages getAdd Admob AppId
#1. Android — Open Manifest file
Project Name → android → main → AndroidManifest.xml
Add below snippet inside the application tag.
<meta-data android:name=”com.google.android.gms.ads.APPLICATION_ID” android:value=“[ADMOB APP ID]”/>#2. iOS — Open info.plist file
Project Name → iOS → Runner → info.plist file
Add below snippet in dict tag
<key>GADApplicationIdentifier</key>
<string>[ADMOB APP ID]</string>Now add the downloaded google-services.json & GoogleService-Info.plist files to respective projects as mentioned below.
Android: Project Name → android → app → google-services.json
iOS: Project Name → iOS → Runner → GoogleService-Info.plist
As we created different projects for iOS and Android, get the AppID & UnitID based on the platform.
String getAppId() {
if (Platform.isIOS) {
return IOS_APP_ID;
} else if (Platform.isAndroid) {
return ANDROID_APP_ID;
}
return null;
}String getBannerAdUnitId() {
if (Platform.isIOS) {
return IOS_AD_UNIT_BANNER;
} else if (Platform.isAndroid) {
return ANDROID_AD_UNIT_BANNER;
}
return null;
}String getInterstitialAdUnitId() {
if (Platform.isIOS) {
return IOS_AD_UNIT_INTERSTITIAL;
} else if (Platform.isAndroid) {
return ANDROID_AD_UNIT_INTERSTITIAL;
}
return null;
}BannerAd createBannerAd() {
return BannerAd(
adUnitId: getBannerAdUnitId(),
size: AdSize.banner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd event $event");
},
);
}InterstitialAd createInterstitialAd() {
return InterstitialAd(
adUnitId: getInterstitialAdUnitId(),
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("InterstitialAd event $event");
},
);
}
Initialize the AdMob plugin with an AdMob App ID in stateful widget’s initState.
FirebaseAdMob.instance.initialize(appId: getAppId());
_bannerAd = createBannerAd()..load();
_interstitialAd = createInterstitialAd()..load();Show the ads in button clicks
RaisedButton(
child: const Text('SHOW BANNER'),
onPressed: () {
_bannerAd ??= createBannerAd();
_bannerAd
..load()
..show();
}),
RaisedButton(
child: const Text('LOAD INTERSTITIAL'),
onPressed: () {
_interstitialAd?.dispose();
_interstitialAd = createInterstitialAd()..load();
},
),
RaisedButton(
child: const Text('SHOW INTERSTITIAL'),
onPressed: () {
_interstitialAd?.show();
},
),Now you can see the Banner Ad & Interstitial Ad in your android/iOS app when you click the button. So by following the process explained above you can integrate Admob + Firebase — Google Analytics into your Flutter application.
