Integrating with AdMob and Other Mobile Advertising Networks in Flutter

Mobile advertising is a crucial revenue stream for many app developers. In the Flutter ecosystem, integrating with advertising networks like AdMob (Google’s mobile ad platform) is essential for monetizing your apps. This blog post explores how to effectively integrate AdMob and other advertising networks into your Flutter applications.

Why Integrate Ad Networks into Your Flutter App?

• Revenue Generation: Mobile ads are a significant revenue source.
• Reach and Flexibility: Access diverse ad formats and targeting options.
• Analytics: Track ad performance and optimize your monetization strategy.

AdMob Integration in Flutter

AdMob is a popular choice for mobile advertising due to its wide reach and robust features. Here’s how to integrate AdMob into your Flutter app.

Step 1: Setting Up AdMob

1. Create an AdMob Account: Sign up at AdMob.
2. Add Your App: Follow the instructions to add your app to the AdMob platform.
3. Create Ad Units: Define the types of ads you want to display (Banner, Interstitial, Rewarded) and get their unique Ad Unit IDs.

Step 2: Adding the google_mobile_ads Package

Include the google_mobile_ads plugin in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^4.0.0 # Use the latest version

Run flutter pub get to install the package.

Step 3: Initializing Mobile Ads

Initialize the Mobile Ads SDK in your Flutter app, typically within your main() function:

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AdMob Integration',
      home: MyHomePage(),
    );
  }
}

Step 4: Implementing Banner Ads

Here’s how to display banner ads in your app:

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _bannerAd;
  bool _isAdLoaded = false;

  String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyy'; // Replace with your AdMob Android banner ad unit id
    } else if (Platform.isIOS) {
      return 'ca-app-pub-xxxxxxxxxxxxx/zzzzzzzzzz'; // Replace with your AdMob iOS banner ad unit id
    }
    return '';
  }

  @override
  void initState() {
    super.initState();
    _loadBannerAd();
  }

  void _loadBannerAd() {
    _bannerAd = BannerAd(
      adUnitId: bannerAdUnitId,
      request: AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          setState(() {
            _isAdLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
          print('Ad failed to load: ${error.message}');
        },
      ),
    );
    _bannerAd!.load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AdMob Integration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('AdMob Banner Example'),
            if (_isAdLoaded && _bannerAd != null)
              Container(
                alignment: Alignment.center,
                child: AdWidget(ad: _bannerAd!),
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
              )
            else
              Text('Banner Ad is loading...'),
          ],
        ),
      ),
    );
  }
}

Explanation:

• Ad Unit ID: Use the correct ad unit ID for your platform (Android or iOS).
• BannerAd: Creates a new BannerAd instance.
• AdRequest: Initiates an ad request.
• AdSize: Defines the size of the banner ad.
• Listener: Listens for ad loading success or failure.
• AdWidget: Renders the banner ad.

Step 5: Implementing Interstitial Ads

Interstitial ads are full-screen ads. Here’s how to display them:

class _MyHomePageState extends State<MyHomePage> {
  InterstitialAd? _interstitialAd;
  bool _isInterstitialAdReady = false;

  String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-xxxxxxxxxxxxx/xxxxxxxxxx'; // Replace with your AdMob Android interstitial ad unit id
    } else if (Platform.isIOS) {
      return 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyy'; // Replace with your AdMob iOS interstitial ad unit id
    }
    return '';
  }

  @override
  void initState() {
    super.initState();
    _loadInterstitialAd();
  }

  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          _interstitialAd = ad;
          _isInterstitialAdReady = true;
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (InterstitialAd ad) {
              _isInterstitialAdReady = false;
              _loadInterstitialAd(); // Load the next ad
            },
            onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
              ad.dispose();
              _isInterstitialAdReady = false;
              _loadInterstitialAd(); // Try loading another ad
            },
          );
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('InterstitialAd failed to load: $error');
        },
      ),
    );
  }

  void _showInterstitialAd() {
    if (_isInterstitialAdReady && _interstitialAd != null) {
      _interstitialAd!.show();
    } else {
      print('Interstitial ad not ready yet!');
    }
  }

  @override
  void dispose() {
    _interstitialAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AdMob Integration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _showInterstitialAd,
              child: Text('Show Interstitial Ad'),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation:

• InterstitialAd.load(): Loads the interstitial ad.
• InterstitialAdLoadCallback: Callback functions for handling ad loading results.
• _interstitialAd.show(): Shows the ad when it’s ready.
• FullScreenContentCallback: Handles ad dismissal and failure events.

Integrating Other Ad Networks

While AdMob is a primary choice, integrating multiple ad networks can improve fill rates and ad revenue. Here’s how to incorporate other networks using mediation.

Mediation Platforms

Mediation platforms help manage and optimize multiple ad networks. Popular mediation platforms include:

• AdMob Mediation: Integrated within AdMob to mediate with other networks.
• ironSource: A leading mediation platform for mobile games.
• AppLovin: Another popular mediation and marketing platform.

Integrating ironSource

1. Sign Up for ironSource: Create an account on ironSource.
2. Add Your App: Add your app to the ironSource platform and configure your ad placements.
3. Add the ironSource Plugin: In your pubspec.yaml, include the ironSource plugin.

   dependencies:
       ironsource_mediation: ^1.0.0 # Find latest version
   

4. Initialize ironSource SDK:

   
   import 'package:flutter/material.dart';
   import 'package:ironsource_mediation/ironsource_mediation.dart';
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     
     IronSource.initialize(
         appKey: "YOUR_IRONSOURCE_APP_KEY",
         onSuccess: () {
           print("IronSource SDK initialized successfully");
         },
         onFailed: (IronSourceError error) {
           print("IronSource SDK initialization failed: ${error.errorMessage}");
         }
     );
   
     runApp(MyApp());
   }
   

5. Load and Show Ads: Follow ironSource’s documentation for loading and displaying banner, interstitial, or rewarded video ads.

Integrating AppLovin

1. Sign Up for AppLovin: Create an account on AppLovin.
2. Add Your App: Add your app to the AppLovin platform and set up your ad units.
3. Add the AppLovin Plugin: Include the AppLovin plugin in your pubspec.yaml.

   dependencies:
          applovin_max: ^latest_version # Use the latest version from pub.dev
     

4. Initialize AppLovin SDK:

   
   import 'package:flutter/material.dart';
   import 'package:applovin_max/applovin_max.dart';
   
   void main() async {
    WidgetsFlutterBinding.ensureInitialized();
   
    await AppLovinMAX.initialize(
         "YOUR_APPLOVIN_SDK_KEY" // Replace with your AppLovin SDK key
     );
   
     runApp(MyApp());
   }
   
   

5. Load and Show Ads: Refer to AppLovin’s documentation to display the type of Ad you want(Banners, Interstitials, and Rewarded Videos).

Best Practices for Mobile Advertising in Flutter

• Respect User Experience: Don’t overuse ads. Provide a balanced user experience.
• Implement Ad Mediation: Use multiple ad networks to increase fill rates.
• Targeted Ads: Utilize targeting options for relevant and higher-paying ads.
• Test Ad Placement: Experiment with ad placement to optimize performance.
• Monitor Ad Performance: Track key metrics and adjust your strategy.

Conclusion

Integrating mobile advertising into your Flutter app is vital for monetization. Using AdMob, combined with other ad networks through mediation platforms like ironSource and AppLovin, you can effectively manage your ad strategy and boost your app’s revenue. Always prioritize user experience by carefully implementing ads and tracking their performance to maintain a positive balance.