Admob for MAUI made easy

, , , , , , , , 28

In this tutorial I’ll show you how to monetize your MAUI apps with AdMob using my MauiMTAdmob plugin.

Google Admob

To help you to speed up your MAUI development, I’ve created a set of plugins, one of them is MauiMTAdmob. Thanks to this plugin you can add Admob banners, Insterstitials, and Rewarded ads in just few lines of code. It couldn’t be easier than that and I’ll show you.

Install the plugin

First of all, right click on your MAUI solution and select “Manage Nuget packages for Solution”. Visual Studio will open a new screen where you can search and install one or more nuget packages. In this case we can search for the MauiMTAdmob plugin and select it as showed in the next image.

Admob Nuget plugins for Xamarin and MAUI

After the Admob plugin is installed we can add banners, interstitials, rewarded and rewarded interstitials to our projects.

IMPORTANT FOR ANDROID

If you are receiving some errors about UMP while compiling your projects, add the following code to your csproj file:

<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-android'">		
    <AndroidLibrary Include="Dependencies\user-messaging-platform-2.0.0.aar" Bind="false" />
</ItemGroup>

Now, follow these steps:

  • Create a folder “Dependencies” in your project
  • Download the file user-messaging-platform-2.0.0.aar from internet or from the MauiMTAdmob sample repository (https://github.com/marcojak/MauiMTAdmob)).
  • Copy the file in that folder
  • Build your project and everything will compile correctly

Add Ads to our project

MauiMTAdmob plugin supports banner, interstitials and rewarded videos for Android and iOS. If you would like to see the plugin supporting also other platforms let me now and I’ll try to add the support in a new version.

As I’ve said we can add Banners, Interstitials and Rewarded Videos ads to our project. Let’s start with the Banners

How to add an Admob Banner

An Admob banner is just a view inside our page. It means that we can add it using XAML or C#. First of all let’s see how to add an Admob banner using XAML.

Add an Admob Banner with XAML

In MauiMTAdmob to use an Admob banner I’ve created a custom control called MTAdView, so to use it we can use this code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Plugin.MauiMTAdmob.Controls;assembly=Plugin.MauiMTAdmob"
             x:Class="SampleMMTAdmob.MainPage">

<StackLayout>
    <Label Text="Let's test an Admob Banner!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    <!-- Place the Admob controls here -->
    <controls:MTAdView/>
</StackLayout>

In this example we have created a StackLayout with 2 controls: a label and an AdView (our Admob banner). Easy! Isn’t it???

The AdView control is basically a View so you can use all the properties you can think of like: HorizontalOptions, VerticalOptions, IsVisible…

In addition to these properties, I’ve added in AdView two other properties: AdsId and PersonalizedAds.

AdsId: Allows you to add the Banner Id (you can find it in your Admob account)

PersonalizedAds: This allow you to use non personalized ads. For example in case of GPDR. Of course it’s better to use personalized Ads, but please test your ads as I cannot guarantee it works as intended.

To use these properties you can update the previous code to:

<controls:AdView PersonalizedAds="true" AdsId="xxxxxxxxxxxxxxxxxx"/>

Add an Admob Banner with C#

In case you don’t write your pages with XAML or you write your UI in C# or you want to add your view only in some cases, you can add your Admob Banner using this code:

using Plugin.MauiMTAdmob;
...
MTAdView ads = new MTAdView();

Of course you need to attach this View to your layout, but you know how to do it (If not, feel free to ask).

To use the custom properties you can change the previous code to:

...
MTAdView ads = new MTAdView();
ads.AdsId = "xxx";
ads.PersonalizedAds = true;

Also in this case, to add an Admob banner is INCREDIBILY EASY!!!

Global Custom Properties

As you have seen, the properties AdsId and PersonalizedAds belong to a single AdView. It means that you have to set them for every Admob Banner.

To make things even easier I’ve added the option to set these properties only once. To do so, you can use this C# code:

CrossMauiMTAdmob.Current.UserPersonalizedAds = true;
CrossMauiMTAdmob.Current.AdsId = "xxxxxxxxxxxxxxxx";

In this case all your Admob banner will show personalized ads and will have the same Id.

If you set local and global properties, the local ones will have higher priority.

Use of Banner Events

I’ve added 4 events to the Admob banner that you could find nice to have. These events are:

  • AdsClicked When a user clicks on the ads
  • AdsClosed When the user closes the ads
  • AdsImpression Called when an impression is recorded for an ad.
  • AdsOpened When the ads is opened
  • AdsLoaded When the ads is loaded
  • AdsFailedToLoad When the ads fails to load

To use these events you can write this code:

AdView myAds = new AdView();
myAds.AdsClicked += ...;
myAds.AdsClosed += ...;
myAds.AdsImpression += ...;
myAds.AdsOpened += ...;
...

Of course you can use these events also if you have declared your AdView in your XAML code.

Admob Interstitials

Now that we know how to add Admob banners using my plugin MauiMTAdmob , let’s see how we can add Admob Interstitials. If possible, to add an Admob interstitial is even easier. You just need a single line of code. Don’t you believe me? Look here how to show an Admob interstitial:

CrossMauiMTAdmob.Current.ShowInterstitial("ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx");

I told you!!! That’s it!!! With that line of code you have just showed an Interstitial in you app. Of course you need to replace that string with the Insterstitial ID you can find in your Admob account.

To load an Interstitial you can use:

CrossMauiMTAdmob.Current.LoadInterstitial(INTERSTITIALID);

and to check if an Interstitial is loaded:

CrossMauiMTAdmob.Current.IsInterstitialLoaded()

Events for Interstitials

There 3 events that you can use with Interstitials:

OnInterstitialLoaded        
OnInterstitialOpened          
OnInterstitialClosed      
OnInterstitialFailedToLoad
OnInterstitialFailedToShow
OnInterstitialClicked
OnInterstitialImpression

Rewarded

To show a rewarded video you just need a single line of code:

CrossMTAdmob.Current.ShowRewardedVideo("xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx");

To load a Rewarded video:
CrossMTAdmob.Current.LoadRewarded("xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx");

To check if a Rewarded video is loaded:
CrossMTAdmob.Current.IsRewardedLoaded("xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx");

Events for Rewarded

There are 7 events that you can use with the Rewarded Ads:

OnRewardedLoaded
OnRewardedOpened
OnRewardedClosed
OnRewardedImpression
OnRewardedClicked
OnUserEarnedReward

Rewarded Interstitial

To show a rewarded video you just need a single line of code:

CrossMTAdmob.Current.ShowRewardInterstitial(“xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx”);

To load a Rewarded video:

CrossMTAdmob.Current.LoadRewardInterstitial(“xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx”);

To check if a Rewarded video is loaded:

CrossMTAdmob.Current.IsRewardInterstitialLoaded(“xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx”);

Events for Rewarded Interstitials

There are 7 events that you can use with the Rewarded Interstitials:

OnRewardedLoaded

OnRewardedOpened

OnRewardedClosed

OnRewardedImpression

OnRewardedClicked

OnUserEarnedReward

Initialization

Before you can use the Admob banners, Interstitials and Rewarded, you need to initialize it.

First of all in your CreateMauiApp() add this to your builder:

.UseMauiMTAdmob()

You need to do it only once so it makes sense to initialize it in the OnCreate method in Android and FinishedLaunching in iOS.

In your Android project add this line in your OnCreate method:

 MobileAds.Initialize(this);

Remeber to add this to your AppManifest:

<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID"
           android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

In your iOS project add this line in your FinishedLaunching method:

MobileAds.SharedInstance.Start(CompletionHandler);

private void CompletionHandler(InitializationStatus status){}

On iOS you need to add to your Info.plist file this:

	<key>GADApplicationIdentifier</key>
	<string>YOUR APP ID</string>
	<key>GADIsAdManagerApp</key>
	<true/>

Some useful links

Conclusion

This Admob MauiMTAdmob plugin is incredibly easy to use but in case you need help, or you want to suggest a new feature or for any other reason, write me.

Disclaimer

This plugin is free of charge and you may use it as you like, but regardless of your situation and usage, I won’t be held responsible of any loss.

It’s your responsibility to comply with every regulation around the word needed to show personalized and not personalized ads to the user.

Even though this plugin might support functionalities to help to comply with some regulations, it’s your responsibility to verify that everything works as intended and to implement any functionality that might be necessary.