Insérer une bannière AdMob dans Xamarin

by Julien Gustin

June 2, 2018

1,818

0

Dans cet article, je vous explique comment insérer une bannière AdMob à votre projet Android. J’ai moi même beaucoup cherché sur internet pour trouver des exemples de code et je dois avouer que ça manque de documentation. L’insertion d’une bannière AdMob doit se faire via un composant natif pour chaque plateforme. Seul Android est expliqué dans cet article.

S’inscrire sur AdMob

La première chose à faire, c’est de s’inscrire sur AdMob et de créer un bloc d’annonce de type bannière afin d’obtenir votre Application ID et AdUnitId. Ca se passe sur https://apps.admob.com/

Téléchargez le Package NuGet

Rechercher le package ‘Google Play Ads’ dans le Gestionnaire de Package NuGet et installer sa dernière version.

Créer un custom control

Créer un simple custom control dans votre projet partagé.  Je l’ai ajouté dans un dossier /Controls/AdControlView.cs

using Xamarin.Forms;

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

Ad View Renderer

C’est là où ça se complique et où les exemples trouvés sur le net étaient soit pas très claire, soit obsolète. Ça consiste à créer une classe dans le projet Android qui étant la classe ViewRenderer avec notre type AdControlView. Cette classe permettra d’initialiser le contrôle natif AdView d’Android. Ajoutez un fichier classe nommé AdViewRenderer.cs dans un nouveau dossier PlatformSpecific. Veuillez  à remplacer le namespace avec le vôtre.

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

[assembly: ExportRenderer(typeof(JitsAdMob.Controls.AdControlView), typeof(JitsAdMob.Droid.PlatformSpecific.AdViewRenderer))]
namespace JitsAdMob.Droid.PlatformSpecific
{
    public class AdViewRenderer : ViewRenderer<Controls.AdControlView, AdView>
    {
        string adUnitId = string.Empty;
        AdSize adSize = AdSize.Banner;
        AdView adView;

        Context _context;

        public AdViewRenderer(Context context) : base(context)
        {
            _context = context;
        }

        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 = "ca-app-pub-3940256099942544/6300978111"; // Test banner unit
            adView = new AdView(_context);
            adView.AdSize = adSize;
            adView.AdUnitId = adUnitId;

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

            AdRequest adRequest = new AdRequest
                                    .Builder()
                                    .Build();

            adView.LoadAd(adRequest);

            return adView;
        }

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

La valeur de adUnitId se trouve dans votre compte AdMob après avoir créé un bloc d’annonce de type bannière. La valeur comprends le caractère “/”.

Dans les exemples trouvé sur le net, adSize était défini à AdSize.SmartBanner. J’ai perdu 4 heures pour comprendre pourquoi ma bannière ne s’affichait pas avant de changer sur AdSize.Banner. N’hésitez pas à commenter si vous savez pourquoi SmartBanner affiche une zone blanche au lieu de la bannière.

Modifier le fichier MainActivity

Rajoutez MobileAds.Initialize dans le fichierMainActivity.cs de votre projet Android en renseignant l’app id que vous trouverez dans votre compte AdMob. Sans oublier d’importer le namespace Android.Gms.Ads

...
using Android.Gms.Ads;

namespace JitsAdMob.Droid
{
    [Activity(Label = "JitsAdMob", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            ...

            base.OnCreate(bundle);

            MobileAds.Initialize(ApplicationContext, "ca-app-pub-9122365822495930~1685120609");

            ...
    }
}

L’app ID comitent le caractère ~ dans la chaine. Vous ne pouvez pas vous tromper.

Modifiez le fichier AndroidManifest.xml

Rajouter d’abord ces deux permission dans le fichier AndroidManifest.xml qui se trouve dans le Properties de votre projet Android

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

Dans ce fichier, rajouter également ces deux lignes de paramètres également.

<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
<activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />

La dernière étape, c’est l’utilisation de votre Custom Control dans une Page xaml. Il faut d’abord référencer le contrôle en rajoutant un attribut dans la balise contentPage. N’oubliez pas de modifier avec namespace.

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

Ensuite, vous pouvez utiliser votre custom control :

<controls:AdControlView></controls:AdControlView>

La page xaml complète :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:JitsAdMob"
             xmlns:controls="clr-namespace:JitsAdMob.Controls;assembly=JitsAdMob"
             x:Class="JitsAdMob.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
    	<Label Text="JitsAdMob" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
        <controls:AdControlView></controls:AdControlView>
    </StackLayout>

</ContentPage>

Code

Téléchargez la solution sur github

https://github.com/julien-its/xamarinAdMob