Intégrer une interstitiel AdMob dans votre application Xamarin

by Julien Gustin

June 6, 2018

1,535

0

Une interstitiel est une publicité soit image, soit vidéo de quelques secondes qui s’affiche en plein écran sur le mobile. Dans cet article, je vous explique comment intégrer une interstitiel AdMob dans votre projet Xamarin.

Démo

AdMob ne s’intégrant uniquement qu’en natif, il n’est pas possible depuis le code partagé (PCL) d’appeler directement les fonctions AdMob depuis celui-ci. Il vous faudra d’abord le référencer sur les projets  spécifique Android, Ios et Mobile Phone. Il n’est pas non plus possible d’appeler directement le code des projets spécifiques à chacune des plateformes depuis le PCL alors que le contraire est possible. Mais alors, comment fait-on ? La solution concise à travailler avec un DependencyService.

DependencyService

DependencyService permet aux applications d’appeler dans les fonctionnalités spécifiques à la plateforme à partir de code partagé. Cette fonctionnalité permet à des applications de Xamarin.Forms faire tout ce qu’une application native peut faire.

DependencyService est un résolveur de dépendance. Dans la pratique, une interface est définie et DependencyService recherche l’implémentation correcte de cette interface à partir de divers projets de plateforme.

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 interstitiel afin d’obtenir votre Application ID et AdUnitId. Ca se passe sur https://apps.admob.com/. Une chose à savoir également, c’est qu’après avoir créé votre bloc d’annonce, elle ne fonctionnera pas immédiatement ! J’en ai fais les frais à chercher pendant une heure pourquoi mon interstitiel ne s’affichait pas, alors qu’il suffisait d’attendre.

Téléchargez le Package NuGet

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

Interface pour le DependencyService

Il nous faut donc créer notre Interface qui contiendra juste une méthode Show. Cette classe se place donc dans le projet partagé (PCL). J’ai organisé la structure dans une arboréscence Models/Dependency/I_InterstitialAd.cs

namespace JitsAdMobInterstitial.Models.Dependency
{
    public interface I_InterstitialAd
    {
        void show();
    }
}

Listener

Un listener est nécessaire pour ouvrir l’interstitiel une fois que celle ci est chargée car sinon, le code de l’ouverture serait exécuté avant même que l’interstitiel ne soit entièrement chargée. Le listener peut aussi servir à récupérer les événements click et close de l’interstitiel.

J’ai pour ma part créé un dossier PlatformSpecific dans le projet Android où j’y ai placé mes classes nécessaires. Voici le code du listener qui nous permettra d’ouvrir l’interstitiel une fois l’événement onLoad déclenché :

using Android.Gms.Ads;

namespace JitsAdMobInterstitial.Droid.PlatformSpecific
{
    class InterstitialAdListener : AdListener
    {
        readonly InterstitialAd _ad;

        public InterstitialAdListener(InterstitialAd ad)
        {
            _ad = ad;
        }

        public override void OnAdLoaded()
        {
            base.OnAdLoaded();

            if (_ad.IsLoaded)
                _ad.Show();
        }
    }
}

Notre classe principale qui va initialiser l’ouverture d’une interstitiel, et qui sera placé dans le projet spécifique android dans le même dossier que le listener :

using Android.Gms.Ads;
using JitsAdMobInterstitial.Models.Dependency;
using JitsAdMobInterstitial.Droid.PlatformSpecific;
using Android.App;

[assembly: Xamarin.Forms.Dependency(typeof(AdmobInterstitial))]
namespace JitsAdMobInterstitial.Droid.PlatformSpecific
{
    public class AdmobInterstitial : I_InterstitialAd
    {
        Android.Gms.Ads.InterstitialAd _ad;

        public void show()
        {
            var context = Application.Context;

            _ad = new InterstitialAd(context);
            _ad.AdUnitId = "ca-app-pub-9122365822495930/4770566486"; // Bloc d'annonce INTERSTITIEL !

            var intlistener = new InterstitialAdListener(_ad);
            _ad.AdListener = intlistener;
            intlistener.OnAdLoaded();

            var requestbuilder = new AdRequest.Builder();
            _ad.LoadAd(requestbuilder.Build());
        }

    }
}

Veuillez à remplacer votre AdUnitId avec votre bloc d’annonce. Ne vous trompez pas avec votre AppId qui lui contient un caractère “~”.

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" />

Et pour terminer, appeller la méthode show pour ouvir l’interstitiel depuis un bouton par exemple :

namespace JitsAdMobInterstitial
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();

            BtnOpen.Clicked += OpenAdInt;
        }

        void OpenAdInt(object sender, EventArgs args)
        {
            DependencyService.Get<Models.Dependency.I_InterstitialAd>().show();
        }
    }
}

Code

Téléchargez la solution sur github

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