A boy who is happy with Admob Ads Integration
Integrate Admob Ads in Flutter Application

What is AdMob Ad Network?

Admob is a Google Adnetwork that allows App Developers to monetize their applications using Admob Advertisement. And when you Advertise your Apps with Google Admob than he allow you to earn money. So at that time Google Admob is the world most famous Ad Network. And About Billions of Applications are Monetized by Google Admob. Admob is the official product of Google and Google is controlling this Product. So nowadays everyone is familiar with Google. So it's easy for everyone to trust on Google and as well as on Google Products like Admob,Adsense.


Why We Integrate AdMob Ads in Android App?

Most Popular question is why we use Google Admob in our Android Apps. So i will solve this query. Google Admob is the high paying Ad network. If we compare Admob with Others by the way there is no camparision between Admob and other Adnetwork but let's assume we compare Admob with others so Other Ad networks has low ECPM rates as compared to Google Admob. Google Admob pay upto 0.2$ to 10$ on 1000 Impressions. But other adnetworks has low Revenue and Low ECPM Rates. That's why we suggest every app developer to use Admob Ads in Application.



Best way to Integrate AdMob Ads in App?

We have to follow Google Admob Community Guidelines in order to monetize the Application. If you don't follow these guidelines than Google Admob will set Adlimit on your Account or may be in some cases Google will terminate your account Some important Google Admob Guidelines are mentioned below:

  1. Gambling,Adults, Duplicate Apps are not allowed by Google Admob
  2. Apps that generate Invalid clicks are not allowed
  3. Apps that force user to click on ad to get reward is not allowed by Admob
  4. Don't Click on your own Admob Ads.
  5. Never encourage your friends or family to Click on Ads
  6. Make sure your traffic is genuine

How Much Money we can earn from AdMob?
This one is a most popular question ever I, listen from App Developers. So the answer of this question is in very detail. But for now i will briefly explain about Admob Revenue. I already mentioned Admob is one of the most popular Ad network and Admob is high paying Ad network. But here you have to understand something about CPM & CTR.

Admob CPM Rates: 

Cost per Mile or Cost Per Thousand. Now understand how much CPM Admob will give to you when your Admob Ads received 1000 Impressions. So CPM varies with Countries. Some countries have low CPM rates and some countries have high CPM Rates. So if your Application is mostly used by low CPM Countries than definitely your CPM rate will be low so for highest CPM rates you have to target high CPM countries. Some High CPM countries are:
  • United States of America
  • United Kingdom
  • Canada
  • Australia
  • Norway
  • Sweden
  • Germany
  • Finland
  • South Korea
  • Taiwan

How to Integrate AdMob Ads in Android Studio Flutter?

If you want to use Admob Ads in Your Android Application. Than follow these Steps. Here i will explain step by Step so follow these all steps to integrate Admob Ads in Your Android Application.

Admob Ads Dependency Integration Step No 1:

First of all add this Dependency in your Pubspec.yaml file.

dependencies:
  google_mobile_ads: ^3.0.0
or Open Terminal in Android Studio or VS Code than type this following command 
$ flutter pub add google_mobile_ads
or for more details visit official flutter packages Click here
Follow this image and add this dependency

Image that showing how to add Google Admob Dependency in Flutter image provided by flutter with nk

Internet Permission for Admob Ads Integration Step No 2:

Open Manifest File and add internet permission. Copy paste this code

    < uses-permission android:name="android.permission.INTERNET"/>
Go to project section open App Folder and you see a src folder now open this src folder than inside src folder you will main folder open main folder now here you will see AndroidManifest.xml file now open this file and add internet permission.
paste the this line of code after xmlns file.(Follow the image for better understanding)



Adding Google Admob ID in Manifest File Step no 3:

In this Step Add the Admob App ID in Manifest File. Just Replace the andoid:value = "App ID" with your id. And paste this code before </application> closing tag. As shown in image
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-4850381439154359~4514080919"/>

Manifest Section showing how to Admob App id in Flutter Manifest file


Admob Ads SDK Initialize before Integration Step No 4:

Now time to initialize Admob SDK. So follow this step and initialize the Admob SDK.

  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
Copy paste this code in Main.dart file Main Function (Follow the image for better understanding) This code will initialize the Admob SDK when your Application Start.


How to initalize the Google Admob SDK in flutter App

Admob Banner Ads Integration Step No 5:

Time to Integrate Admob Ads in Flutter So if you want to integrate Admob Banner ads than follow this.
First of all choose the best place where you want to add banner ads and make sure don't add this banner code on that place where your Admob ads get Invalid Clicks. This is against Admob Guidelines.

Now first of all add these variables before build method.


 BannerAd? _bannerAd;
 bool _isLoaded = false;

Now after this add this banner code method after these variables and replace the adUnitId with your Admob App Ad Unit Id's

void loadAd() {
  _bannerAd = BannerAd(
    adUnitId: "ca-app-pub-4850381439154359/4966883777",
    request: const AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      // Called when an ad is successfully received.
      onAdLoaded: (ad) {
        debugPrint('$ad loaded.');
        setState(() {
          _isLoaded = true;
        });
      },
      // Called when an ad request failed.
      onAdFailedToLoad: (ad, err) {
        // Dispose the ad here to free resources.
        ad.dispose();
      },
    ),
  )..load();
}
Now call this method inside initstate() method. So When your screen opened than first of all init state will load this banner ad.

Admob Banner Ads Widget Integration Step 6:

Mostly peoples use this banner Ads in scaffold bottom navigation bar so if you want to show this Admob banner ad in bottom navigation than call the bottom navigation inside scaffold and set this widget. So banner ads start showing in bottom navigation bar.
Container(
  width: _bannerAd!.size.width.toDouble(),
  height: _bannerAd!.size.height.toDouble(),
  child: AdWidget(ad: _bannerAd!),
),

Admob Interstitial Ads Integration Step 1:

Now if you want to show Interstitial ads in your application than follow this Step.

Declare these variables before build method.

bool _isLoaded = false;
InterstitialAd? _interstitialAd;

Than write this method and replace AdUnitId with your Admob App Ad unit Id's
void _loadAd() {
  InterstitialAd.load(
      adUnitId: "ca-app-pub-4850381439154359/3653802109",
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          // Keep a reference to the ad so you can show it later.
          _interstitialAd = ad;
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (LoadAdError error) {
          debugPrint('InterstitialAd failed to load: $error');
        },
      ));

}

Loading Admob Interstitial Ads Step 2:


After that call this method inside init state method like this
@override
void initState() {
  loadAd(); // For Admob interestitial ads
  _loadAd(); // for Admob Banner Ads
  _getMTQuotes();
  super.initState();
}

Showing Admob Interstitial Ads Integration Step 3:

Now on Tap() write this line to show Admob Ads. So when user will click on button than Admob Ad will start showing
_interstitialAd?.show(),

Admob Native Ads Integration Step 1:

First of all initiailized the variables.
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
Than Write this method to load Admob Native Ads.
void nativeloadAd() {
  _nativeAd = NativeAd(
      adUnitId: _adUnitId,
      listener: NativeAdListener(
        onAdLoaded: (ad) {
          debugPrint('$NativeAd loaded.');
          setState(() {
            _nativeAdIsLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          // Dispose the ad here to free resources.
          debugPrint('$NativeAd failed to load: $error');
          ad.dispose();
        },
      ),
      request: const AdRequest(),
      // Styling
      nativeTemplateStyle: NativeTemplateStyle(
        // Required: Choose a template.
          templateType: TemplateType.medium,
          // Optional: Customize the ad's style.
          mainBackgroundColor: Colors.purple,
          cornerRadius: 10.0,
          callToActionTextStyle: NativeTemplateTextStyle(
              textColor: Colors.cyan,
              backgroundColor: Colors.red,
              style: NativeTemplateFontStyle.monospace,
              size: 16.0),
          primaryTextStyle: NativeTemplateTextStyle(
              textColor: Colors.red,
              backgroundColor: Colors.cyan,
              style: NativeTemplateFontStyle.italic,
              size: 16.0),
          secondaryTextStyle: NativeTemplateTextStyle(
              textColor: Colors.green,
              backgroundColor: Colors.black,
              style: NativeTemplateFontStyle.bold,
              size: 16.0),
          tertiaryTextStyle: NativeTemplateTextStyle(
              textColor: Colors.brown,
              backgroundColor: Colors.amber,
              style: NativeTemplateFontStyle.normal,
              size: 16.0)))
    ..load();
}
}

Loading Admob Native Ads Integration Step 2: 

void initState() {
  nativeloadAd(); // for native ads
  loadAd(); // For Admob interestitial ads
  _loadAd(); // for Admob Banner Ads
  _getMTQuotes();
  super.initState();
}

Showing Admob Native Ads Integration Step 3:

Now choose the best place where you want to show this Google Admob Native Ad than write this code. Now Restart the App and you will see the Admob Native Ads on your App Screen. Paste this code carefully
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);