.NET MAUI で AdMob を利用する方法

はじめに

この記事は、.NET MAUI Advent Calendar 2022 の 23日目の記事です。 今回は、.NET MAUI で AdMob の広告を表示する方法について書きたいと思います。

AdMob を利用する方法

Plugin.MauiMTAdmob のインストールと設定

AdMob を簡単に利用するためのライブラリに、Plugin.MauiMTAdmob があります. これをプロジェクトにインストールしてください。

Android プラットフォームの場合は、以下の設定を行う必要があります。

• プロジェクトに Dependencies という名前でフォルダを追加する
• user-messaging-platform-2.0.0.aar ファイルを MauiMTAdmob sample repository からダウンロードする
• ダウンロードしたファイルを Dependencies フォルダにコピーする

• プロジェクトファイルに以下の設定を追加する

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

• Android manifest ファイルに <meta-data ... /> の設定を追加する

<application android:allowBackup="true" 
             android:icon="@mipmap/appicon"
             android:roundIcon="@mipmap/appicon_round"
             android:supportsRtl="true">
    <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" 
               android:value="ca-app-xxxxxxxxxxx" />
</application>

iOS プロジェクトの場合は、 info.plist ファイルに以下の設定を追加する必要があります。

<key>GADApplicationIdentifier</key>
<string>AdMob の APP ID</string>
<key>GADIsAdManagerApp</key>
<true/>

AdMob の広告をバナー表示するサンプル

UseMauiMTAdmob() メソッドを利用して、初期化処理を追加します。 以下は、サンプルです。

using Plugin.MauiMTAdmob;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseMauiMTAdmob()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    return builder.Build();
}

Android プラットフォームの初期化処理を追加します。MainActivity クラスに初期化処理を追加してください。

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        MobileAds.Initialize(this);
    }
}

iOS プラットフォームの初期化処理を追加します。AppDelegate クラスに初期化処理を追加してください。

[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();

    public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
    {
        MobileAds.SharedInstance.Start(CompletionHandler);
        return base.FinishedLaunching(application, launchOptions);
    }

    private void CompletionHandler(InitializationStatus status) { }
}

広告を表示したい画面の XAML に、ユーザーコントロールを追加してください。

<?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:ads="clr-namespace:Plugin.MauiMTAdmob.Controls;assembly=Plugin.MauiMTAdmob"
             x:Class="SampleMMTAdmob.MainPage">

    <StackLayout>
        <ads:MTAdView
            x:Name="myAds"
            AdsId="ca-app-pub-xxxxxxxxx"
            AdSize="AnchoredAdaptive"
            IsVisible="true"/>
    </StackLayout>
</ContentPage>

まとめ

• Plugin.MauiMTAdmob を利用すると、.NET MAUI で AdMob の広告を簡単に表示することができる
• Plugin.MauiMTAdmob には、ユーザーコントロールが提供されていて、XAMK 上に <ads:MTAdView AdsId="xxxxxx" /> のようにコントロールを配置するだけで、広告を表示できる
• Andorid / iOS プラットフォームで、設定を行う必要がある