Install the SDK or NuGet

Before we get started, we need to install the official SDK for Microsoft Advertising, which is usually what is recommended.

This works with Visual Studio 2015 & 2017 and is a quick install.  However, the better way is simply to install a NuGet into our project. Simply search for Microsoft.Services.Store.SDK. There are guides if you already installed the SDK manually, so read up here. 

Add the SDK Reference

Once the SDK or the NuGet is installed, we can open up our UWP project and add that reference hidden under Windows Universal -> Extensions. It is officially called Microsoft Advertising SDK for XAML:

If you don’t see this, simply close the solution and re-open it.

Create Xamarin.Forms Control

The control itself is super crazy simple and doesn’t do to much besides be a placeholder:

We can immediately add it into our XAML:

Create UWP Custom Renderer

The control API is extremely easy to use. I am using the test IDs here for the application and the test banner id, but those can be created later. All we need to do is create it and set the width and height and we are done!

Run it!

Finishing Up & Creating Ad Unit

Now it is time to go and create a real Ad Unit, which you can do in the dev center. Additionally, I would recommend creating different sizes based on your device that you are on, you can read about this in the supported banner ad sizes documentation.

Registring with AdMob

So, the first thing that you will need to do is actually register for AdMob. This is the same thing that I did in Android, but I created an iOS project. This will give you two important pieces of information, your “Application Code” and your “Ad Unit Id”. We will use these later, but simply go to: https://apps.admob.com, register for a new app, link to an app in Firebase, and you will be off running.

Add GoogleService-Info.plist

When you create the new app in Admob/Firebase there will be a Google Service config plist file that gets downloaded. Add this to the root of your iOS project and make sure that the Build Action is set to BundleResource. This is super important!

Downloading NuGet Package

The nice thing about integrating ads in iOS is that we don’t have to worry about Google Play version issues at all. Search for “Xamarin.Google.iOS.MobileAds” and the Xamarin package should be the first one to come up. You can install the latest, which as of today is 7.11.0

Custom Control

For my application I am not adding any custom data bindings or anything like that for the Ad Ids, so I just create a very very very simple custom control in my shared code. This is the same one that is shared with my Android app:

using Xamarin.Forms;

namespace MeetupManager.Controls
{
    public class AdControlView : Xamarin.Forms.View
    {
    }
}

Ad View Renderer

Now, we have to go into our iOS project and implement the custom control. Essentially just a method to create the native AdView and then set it when the page loads up.

using CoreGraphics;
using Google.MobileAds;
using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using MeetupManager.UI;
using MeetupManager.Views;

[assembly: ExportRenderer(typeof(MeetupManager.Controls.AdControlView), typeof(MeetupManager.iOS.PlatformSpecific.AdViewRenderer))]
namespace MeetupManager.iOS.PlatformSpecific
{
    public class AdViewRenderer : ViewRenderer<Controls.AdControlView, BannerView>
    {
        string bannerId = "Your Ad Unit Id";
        BannerView adView;
        BannerView CreateNativeAdControl()
        {
            if (adView != null)
                return adView;

            // Setup your BannerView, review AdSizeCons class for more Ad sizes.
            adView = new BannerView(size: AdSizeCons.SmartBannerPortrait,
                                           origin: new CGPoint(0, UIScreen.MainScreen.Bounds.Size.Height - AdSizeCons.Banner.Size.Height))
            {
                AdUnitID = bannerId,
                RootViewController = GetVisibleViewController()
            };

            // Wire AdReceived event to know when the Ad is ready to be displayed
            adView.AdReceived += (object sender, EventArgs e) =>
            {
                //ad has come in
            };

            adView.LoadRequest(GetRequest());
            return adView;
        }

        Request GetRequest()
        {
            var request = Request.GetDefaultRequest();
            // Requests test ads on devices you specify. Your test device ID is printed to the console when
            // an ad request is made. GADBannerView automatically returns test ads when running on a
            // simulator. After you get your device ID, add it here
            //request.TestDevices = new [] { Request.SimulatorId.ToString () };
            return request;
        }

        ///
        /// Gets the visible view controller.
        ///
        /// The visible view controller.
        UIViewController GetVisibleViewController()
        {
            var rootController = UIApplication.SharedApplication.KeyWindow.RootViewController;

            if (rootController.PresentedViewController == null)
                return rootController;

            if (rootController.PresentedViewController is UINavigationController)
            {
                return ((UINavigationController)rootController.PresentedViewController).VisibleViewController;
            }

            if (rootController.PresentedViewController is UITabBarController)
            {
                return ((UITabBarController)rootController.PresentedViewController).SelectedViewController;
            }

            return rootController.PresentedViewController;
        }

        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            if(Control == null)
            {
                CreateNativeAdControl();
                SetNativeControl(adView);

            }
        }
    }
}

Update AppDelegate

Go into your AppDelegate.cs file and initialize your MobileAds from the SDK in the FinishedLaunching method:

MobileAds.Configure("Your Publishing App Id");

Update XAML

Now we can add the custom control to the bottom of your XAML.

First add your custom xmlns name space:

xmlns:controls="clr-namespace:MeetupManager.Controls;assembly=MeetupManager"

Then add in the custom control and boom done!

Success!

You should now be able to run your app and boom! Test Ad!

This of course was just a smart banner, but you could extend it even further and try out the other ads with custom renderers and of course be sure to add different banner Ids based on the page that you are on.!

Looking to add AdMob ads to Android apps? I have you covered in my next blog found here.

Now, it is time to go a step further and add some ads into my Xamarin.Forms application Meetup Manager that has a lot of usage. I knew I had to update the app because of changes in Android N with SQLite, so I figure what better time. I was surprised how easy it was to actually get things setup and running.

Registring with AdMob

So, the first thing that you will need to do is actually register for AdMob. This will give you two important pieces of information, your “Application Code” and your “Ad Unit Id”. We will use these later, but simply go to: https://apps.admob.com, register for a new app, link to an app in Firebase, and you will be off running.

Downloading NuGet Package

This one is a bit tricky since Xamarin.Forms requires very specific package versions. Search for “Google Play Ads” and the Xamarin package should be the first one to come up. If you are using Xamarin.Forms.Maps then you should pick 29.0.0.1, else you can pick 29.0.0.2. (Note, that if you are targeting API 24+ you can install newer support libraries and then install 42.1021.1+ of the ads sdk :))

Custom Control

For my application I am not adding any custom data bindings or anything like that for the Ad Ids, so I just create a very very very simple custom control in my shared code:

using Xamarin.Forms;

namespace MeetupManager.Controls
{
    public class AdControlView : View
    {
    }
}

Ad View Renderer

Now, we have to go into our Android project and implement the custom control. Essentially just a method to create the native AdView and then set it when the page loads up.

using Android.Widget;
using Android.Gms.Ads;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MeetupManager.Controls.AdControlView), typeof(MeetupManager.Droid.PlatformSpecific.AdViewRenderer))]
namespace MeetupManager.Droid.PlatformSpecific
{
    public class AdViewRenderer : ViewRenderer<Controls.AdControlView, AdView>
    {
        string adUnitId = string.Empty;
        //Note you may want to adjust this, see further down.
        AdSize adSize = AdSize.SmartBanner;
        AdView adView;
        AdView CreateNativeAdControl()
        {
            if (adView != null)
                return adView;

            // This is a string in the Resources/values/strings.xml that I added or you can modify it here. This comes from admob and contains a / in it
            adUnitId = Forms.Context.Resources.GetString(Resource.String.banner_ad_unit_id);
            adView = new AdView(Forms.Context);
            adView.AdSize = adSize;
            adView.AdUnitId = adUnitId;

            var adParams = new LinearLayout.LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent);

            adView.LayoutParameters = adParams;

            adView.LoadAd(new AdRequest
                            .Builder()
                            .Build());
            return adView;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Controls.AdControlView> e)
        {
            base.OnElementChanged(e);
            if(Control == null)
            {
                CreateNativeAdControl();
                SetNativeControl(adView);
            }
        }
    }
}

Update MainActivity

Go into your Main Activity and initialize your MobileAds from the SDK:

MobileAds.Initialize(ApplicationContext, "YOUR APP ID HERE FROM AdMob, has a ~ in it");

Update Manifest

You will now need to add 2 permissions:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Inside of the Application attribute you need to add this specific Activity for ads.

Update XAML

Now we can add the custom control to the bottom of your XAML.

First add your custom xmlns name space:

xmlns:controls="clr-namespace:MeetupManager.Controls;assembly=MeetupManager"

Then add in the custom control and boom done (you may need to set a HeightRequest="90" to have it show up!

Success!

You should now be able to run your app and boom! Test Ad!

This of course was just a smart banner, but you could extend it even further and try out the other ads with custom renderers. Enjoy! Looking to add AdMob ads to iOS apps? I have you covered in my next blog found here.

Important

1. A few things to know, since we are using a Smart Banner you can not have any padding around the adview it must fill the entire screen.
2. You will see a test banner on the screen. If you don’t set the background color to red or something like this and if it isn’t rendering look at the output as it may not be able to connect or you have some padding.
3. If you need padding then set it to just “Banner”