Xamarin.Forms で AdMob を配置する

Programming
目次

Xamarin.Forms で Admob を使った広告を表示する方法を紹介します。

Xamarin.Forms の AdMob

AdMob というアプリなどに広告を配置して収入を得ることができるサービスがあります。

私がこの AdMob を Xamarin.Forms のプロジェクトに組み込もうとした時に、ネット上に情報が少なく、それらを見ながらやってもうまくいかないということがあったので、最終的に、どのようにして組み込んだのか、備忘録的な感じで書いておきます。

ちなみに、今回ターゲットとする環境は、Android と iOS の2つです。

仕組み

Xamarin.Forms に AdMob を組み込むには、AdMob の情報を取得して表示することができる Nuget パッケージを使います。その時、さらに Xamarin.Forms のカスタムレンダラーという機能を使います。

使用する Nuget パッケージの名前は、Android と iOS で2つです。

  • Android
    • Xamarin.GooglePlayServices.Ads
  • iOS
    • Xamarin.Google.iOS.MobileAds

共通プロジェクトの設定

最初に、カスタムレンダラーを使用するので、Android と iOS の共通プロジェクトに、プログラムを追加します。

今回は、AdMobBanner.cs という名前でファイルを作成します。

using System;
using Xamarin.Forms;

namespace Sample
{
    public class AdMobBanner : ContentView
    {
        public AdMobBanner()
        {
        }
    }
}

次に、その広告を表示したい XAML ファイルを書き換えて、AdMob を表示できるようにします。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Sample;assembly=Sample"
             x:Class="Sample.MainPage">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <controls:AdMobBanner WidthRequest="320" HeightRequest="50" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

適宜、中身は書き換えておいてください。

重要なのは、<controls:AdMobBanner WidthRequest="320" HeightRequest="50" /> というものを使って、カスタムレンダラーで使うようにしています。

Android の設定

Android のプロジェクトに、「Xamarin.GooglePlayServices.Ads」というパッケージを追加します。

この時、最新のバージョンをインストールしようとすると、エラーが発生することがありません。

その場合は、バージョンを下げてインストールする必要があります。

私の場合、最新のバージョンをインストールすることができず、代わりに、「32.940.0-beta3」 というバージョンをインストールしました。

パッケージのインストールが終わったら、Android のプロジェクトに、AdMobBannerRenderer.cs という名前で下記のプログラムを書きます。

using Sample;
using Sample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AdMobBanner), typeof(AdMobBannerRenderer))]
namespace Sample.Droid
{
	public class AdMobBannerRenderer : ViewRenderer<AdMobBanner, Android.Gms.Ads.AdView>
	{
		protected override void OnElementChanged(ElementChangedEventArgs<AdMobBanner> e)
		{
			const string adUnitID = "Insert Your AdUnitID(for Android)";

			base.OnElementChanged(e);

			if (Control == null)
			{
				var adMobBanner = new Android.Gms.Ads.AdView(Forms.Context);
				adMobBanner.AdSize = Android.Gms.Ads.AdSize.Banner;
				adMobBanner.AdUnitId = adUnitID;

				var requestbuilder = new Android.Gms.Ads.AdRequest.Builder();
				adMobBanner.LoadAd(requestbuilder.Build());

				SetNativeControl(adMobBanner);
			}
		}
	}
}

AdMob の ID など、適宜、内容は変えてください。

さらに、広告はインターネットを使って取得しているので、インターネットを使えるように設定する必要があります。

設定は、Properties の中にある AndroidManifest.xml に下記の設定を追加することでできます。

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:label="Sample">
    <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
</application>

iOS の設定

iOS のプロジェクトに、「Xamarin.Google.iOS.MobileAds」というパッケージを追加します。

こちらは、そのままインストールできるはずです。

パッケージのインストールが終わったら、iOS のプロジェクトに AdMobBannerRenderer.csという名前で下記のプログラムを書きます。

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Google.MobileAds;
using UIKit;
using CoreGraphics;
using Sample;
using Sample.iOS;

[assembly: ExportRenderer(typeof(AdMobBanner), typeof(AdMobBannerRenderer))]
namespace Sample.iOS
{
	public class AdMobBannerRenderer : ViewRenderer
	{
		const string adUnitID = "Insert Your AdUnitID(for Android)";

		UIViewController viewCtrl = null;
		BannerView adMobBanner;
		bool viewOnScreen;

		protected override void OnElementChanged(ElementChangedEventArgs<View> e)
		{
			base.OnElementChanged(e);

			if (e.NewElement == null)
				return;

			if (e.OldElement == null)
			{
				foreach (UIWindow v in UIApplication.SharedApplication.Windows)
				{
					if (v.RootViewController != null)
					{
						viewCtrl = v.RootViewController;
					}
				}
				adMobBanner = new BannerView(AdSizeCons.Banner, new CGPoint(-10, 0))
				{
					AdUnitID = adUnitID,
					RootViewController = viewCtrl
				};
				adMobBanner.AdReceived += (sender, args) =>
				{
					if (!viewOnScreen) AddSubview(adMobBanner);
					viewOnScreen = true;
				};

				var request = Request.GetDefaultRequest();

				adMobBanner.LoadRequest(request);
				SetNativeControl(adMobBanner);
			}
		}
	}
}

AdMob の ID など、適宜、内容は変えてください。

まとめ

AdMob の追加は結構面倒だと思いました。

さらに、ネットの情報通りにやってもうまくいかなくて、最初は諦めていました。

でも、諦めずにやっていたらなんとか表示することができました。

コツは、Androidの時にパッケージのバージョンを下げるということだと思います。

是非、皆さんも広告を表示して見てください。

参考