Ajouter une annonce à l'ouverture d'une application AdMob à une application Unity

1. Introduction

Dans cet atelier de programmation, vous allez implémenter une annonce à l'ouverture d'une application AdMob dans une application Unity.

Objectifs de l'atelier

Cet atelier de programmation explique comment implémenter une annonce à l'ouverture d'une application AdMob dans une application Unity à l'aide du plug-in Google Mobile Ads Unity.

Si vous rencontrez des problèmes (bugs de code, erreurs grammaticales, formulations imprécises, etc.) au cours de cet atelier de programmation, signalez-le via le lien Signaler une erreur en bas à gauche de l'atelier de programmation.

Points abordés

• Comment configurer le plug-in Google Mobile Ads Unity ?
• Comment intégrer une annonce à l'ouverture d'une application Unity ?

Prérequis

• Unity 2018.4 ou version ultérieure
• Xcode 12 ou version ultérieure et CocoaPods (à déployer sur iOS)

Comment évalueriez-vous votre niveau d'expérience avec AdMob ?

Débutant Intermédiaire Expert

2. Configurer l'environnement de développement

Télécharger le code

Télécharger le code source Afficher le dépôt sur GitHub

Une fois le fichier ZIP téléchargé, extrayez son contenu. Vous obtiendrez un dossier nommé admob-appopen-unity-main.

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande :

$ git clone https://github.com/googlecodelabs/admob-appopen-unity

Le dépôt contient deux dossiers :

•  starter : code de démarrage que vous allez compiler dans cet atelier de programmation.
•  complete : code final de cet atelier de programmation.

3. Configurer l'application et les blocs d'annonces AdMob

Unity étant un SDK multiplate-forme, vous devez ajouter une application et des blocs d'annonces pour Android et iOS dans AdMob.

Remarque : Si vous souhaitez suivre l'atelier de programmation au lieu de créer vous-même une application et des blocs d'annonces, accédez à la section Utiliser l'application et les blocs d'annonces AdMob de test.

Configurer pour Android

Pour configurer pour Android, vous devez ajouter une application Android et créer des blocs d'annonces.

Ajouter une application Android

1. Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
2. Sélectionnez la plate-forme Android. Lorsque le message L'application est-elle disponible sur une plate-forme de téléchargement compatible ? s'affiche, cliquez sur NON.
3. Saisissez AdMob app open ad dans le champ du nom de l'application.
4. Il n'est pas nécessaire d'activer les métriques utilisateur pour suivre cet atelier de programmation. Nous recommandons toutefois de le faire, car cela permet de mieux comprendre le comportement des utilisateurs. Cliquez sur Ajouter pour terminer le processus.

Créer un bloc d'annonces

1. Sélectionnez l'application Annonce à l'ouverture d'une application AdMob (Android) dans le menu Applications de la console AdMob.
2. Cliquez sur le menu Blocs d'annonces.

Cliquez sur Ajouter un bloc d'annonces. Sélectionnez le format Annonce à l'ouverture. Saisissez android-appopen dans le champ Nom du bloc d'annonces. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Important : Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces de test plutôt que des annonces de production. Sinon, votre compte pourrait être suspendu. Pour en savoir plus sur le fonctionnement des annonces tests du SDK Mobile Ads, consultez Annonces tests.

Il faut généralement compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.

Si vous souhaitez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application de test et les ID de blocs d'annonces indiqués dans les tableaux "ID d'application Android/ID de bloc d'annonces" et "ID d'application iOS/ID de bloc d'annonces".

Configurer pour iOS

Pour configurer pour iOS, vous devez ajouter une application iOS et créer des blocs d'annonces.

Ajouter une application iOS

1. Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
2. Sélectionnez la plate-forme iOS. Lorsque le message L'application est-elle disponible sur une plate-forme de téléchargement compatible ? s'affiche, cliquez sur NON.
3. Saisissez AdMob app open ad dans le champ du nom de l'application.
4. Il n'est pas nécessaire d'activer les métriques utilisateur pour suivre cet atelier de programmation. Nous recommandons toutefois de le faire, car cela permet de mieux comprendre le comportement des utilisateurs. Cliquez sur Ajouter pour terminer le processus.

Créer un bloc d'annonces

1. Sélectionnez l'application Annonces intégrées AdMob (iOS) dans le menu Applications de la console AdMob.
2. Cliquez sur le menu Blocs d'annonces.

Cliquez sur Ajouter un bloc d'annonces. Sélectionnez le format Annonce à l'ouverture. Saisissez ios-appopen dans le champ Nom du bloc d'annonces. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Important : Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces de test plutôt que des annonces de production. Sinon, votre compte pourrait être suspendu. Pour en savoir plus sur le fonctionnement des annonces tests du SDK Mobile Ads, consultez Annonces tests.

Il faut généralement compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.

Si vous souhaitez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application de test et les ID de blocs d'annonces indiqués dans le tableau suivant.

(Facultatif) Utiliser l'application et les blocs d'annonces AdMob de test

Si vous souhaitez suivre l'atelier de programmation au lieu de créer vous-même une application et des blocs d'annonces, vous pouvez utiliser l'ID de l'application AdMob de test et les ID de blocs d'annonces indiqués dans les tableaux suivants.

ID d'application Android/ID de bloc d'annonces

Élément	ID de l'application/ID du bloc d'annonces
ID d'application AdMob	ca-app-pub-3940256099942544~3347511713
ID de bloc d'annonces	ca-app-pub-3940256099942544/3419835294

ID d'application iOS/ID de bloc d'annonces

Élément	ID de l'application/ID du bloc d'annonces
ID d'application AdMob	ca-app-pub-3940256099942544~1458002511
ID de bloc d'annonces	ca-app-pub-3940256099942544/5662855259

Pour en savoir plus sur les annonces tests, consultez la documentation destinée aux développeurs sur les annonces tests Android et les annonces tests iOS.

4. Ajouter le plug-in Google Mobile Ads Unity

Pour diffuser des annonces AdMob et générer des revenus, vous devez commencer par intégrer le plug-in Google Mobile Ads Unity.

Télécharger le plug-in Mobile Ads Unity

Le plug-in Google Mobile Ads Unity permet aux développeurs Unity de diffuser facilement des annonces Google pour mobile dans des applications Android et iOS. Le plug-in fournit une interface C# pour demander les annonces utilisées par les scripts C# de votre projet Unity.

Cliquez sur le lien ci-dessous afin de télécharger le package Unity pour le plug-in.

Télécharger le plug-in

Ouvrir le projet de départ

1. Lancez Unity Hub.
2. Dans l'onglet Projects (Projets), cliquez sur le bouton ADD (AJOUTER).
3. Accédez au dossier dans lequel vous avez extrait le code téléchargé à l'étape "Configurer l'environnement de développement".
4. Ouvrez le dossier starter.
5. Le projet starter s'affiche dans la liste des projets. Cliquez sur le projet pour l'ouvrir dans l'éditeur Unity.

Importer le plug-in Mobile Ads Unity

1. Dans l'éditeur Unity, sélectionnez Assets > Import Package > Custom Package (Ressources > Importer un package > Package personnalisé) dans le menu.
2. Sélectionnez le GoogleMobileAds-{VERSION}.unitypackage que vous avez téléchargé à l'étape précédente.
3. Vérifiez que tous les fichiers sont sélectionnés, puis cliquez sur Import (Importer).

Définir votre ID d'application AdMob

1. Dans l'éditeur Unity, sélectionnez Assets > Google Mobile Ads > Settings (Ressources > Google Mobile Ads > Paramètres) dans le menu.
2. Saisissez votre ID d'application AdMob Android et iOS dans chaque champ. Si vous souhaitez suivre l'atelier de programmation au lieu de créer vous-même une application et des blocs d'annonces, saisissez l'ID de l'application AdMob de test comme suit.

Important : Si vous ne saisissez pas l'ID d'application AdMob, l'application plante.

5. Créer une classe utilitaire

Créez une classe appelée AppOpenAdManager dans le dossier Scripts. Cette classe gère une variable d'instance pour suivre une annonce chargée et l'ID du bloc d'annonces pour chaque plate-forme.

AppOpenAdManager.cs

using System;
using GoogleMobileAds.Api;
using UnityEngine;

public class AppOpenAdManager
{
#if UNITY_ANDROID
    // Test ad unit ID: ca-app-pub-3940256099942544/3419835294
    private const string AD_UNIT_ID = "<YOUR_ANDROID_APPOPEN_AD_UNIT_ID>";
#elif UNITY_IOS
    // Test ad unit ID: ca-app-pub-3940256099942544/5662855259
    private const string AD_UNIT_ID = "<YOUR_IOS_APPOPEN_AD_UNIT_ID>";
#else
    private const string AD_UNIT_ID = "unexpected_platform";
#endif

    private static AppOpenAdManager instance;

    private AppOpenAd ad;

    private bool isShowingAd = false;

    public static AppOpenAdManager Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new AppOpenAdManager();
            }

            return instance;
        }
    }

    private bool IsAdAvailable
    {
        get
        {
            return ad != null;
        }
    }

    public void LoadAd()
    {
        // TODO: Load an app open ad.
    }
}

Charger une annonce

Pour charger une annonce, la méthode statique AppOpenAd.LoadAd() doit être utilisée. La méthode de chargement nécessite un ID de bloc d'annonces, un mode ScreenOrientation, un objet AdRequest et un gestionnaire d'achèvement appelé lorsque le chargement de l'annonce réussit ou échoue.

L'objet AppOpenAd chargé est fourni en tant que paramètre dans le gestionnaire d'achèvement. Implémentez la méthode LoadAd() comme suit.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void LoadAd()
    {
        AdRequest request = new AdRequest.Builder().Build();

        // Load an app open ad for portrait orientation
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                // Handle the error.
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            // App open ad is loaded.
            ad = appOpenAd;
        }));
    }
}

Diffuser l'annonce

Avant de diffuser l'annonce, enregistrez chaque gestionnaire d'événements pour écouter tous les événements d'annonce.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void ShowAdIfAvailable()
    {
        if (!IsAdAvailable || isShowingAd)
        {
            return;
        }

        ad.OnAdDidDismissFullScreenContent += HandleAdDidDismissFullScreenContent;
        ad.OnAdFailedToPresentFullScreenContent += HandleAdFailedToPresentFullScreenContent;
        ad.OnAdDidPresentFullScreenContent += HandleAdDidPresentFullScreenContent;
        ad.OnAdDidRecordImpression += HandleAdDidRecordImpression;
        ad.OnPaidEvent += HandlePaidEvent;

        ad.Show();
    }

    private void HandleAdDidDismissFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Closed app open ad");
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        isShowingAd = false;
        LoadAd();
    }

    private void HandleAdFailedToPresentFullScreenContent(object sender, AdErrorEventArgs args)
    {
        Debug.LogFormat("Failed to present the ad (reason: {0})", args.AdError.GetMessage());
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        LoadAd();
    }

    private void HandleAdDidPresentFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Displayed app open ad");
        isShowingAd = true;
    }

    private void HandleAdDidRecordImpression(object sender, EventArgs args)
    {
        Debug.Log("Recorded ad impression");
    }

    private void HandlePaidEvent(object sender, AdValueEventArgs args)
    {
        Debug.LogFormat("Received paid event. (currency: {0}, value: {1}",
                args.AdValue.CurrencyCode, args.AdValue.Value);
    }
}

Prendre en compte l'expiration des annonces

Les annonces à l'ouverture expirent quatre heures après leur demande. Les annonces diffusées plus de quatre heures après l'heure de la demande ne seront plus valides et ne pourront pas générer de revenus.

Pour vous assurer de ne pas diffuser une annonce arrivée à expiration, remplacez la propriété IsAdAvailable par l'AppOpenAdManager pour vérifier le temps écoulé depuis le chargement de votre annonce. Utilisez ensuite cette méthode pour vérifier si l'annonce est toujours valide.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    // TODO: Add loadTime field
    private DateTime loadTime;

    private bool IsAdAvailable
    {
        get
        {
            // TODO: Consider ad expiration
            return ad != null && (System.DateTime.UtcNow - loadTime).TotalHours < 4;
        }
    }

    public void LoadAd()
    {
        if (IsAdAvailable)
        {
            return;
        }

        AdRequest request = new AdRequest.Builder().Build();
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            ad = appOpenAd;
            Debug.Log("App open ad loaded");

            // TODO: Keep track of time when the ad is loaded.
            loadTime = DateTime.UtcNow;
        }));
    }
}

6. Mettre à jour la scène pour charger/diffuser l'annonce

Mettez à jour la méthode Start() dans la classe MainScene pour charger une annonce à l'ouverture de l'application au début de la scène.

Pour être informé des événements de premier plan de l'application, nous vous recommandons d'écouter le Singleton AppStateEventNotifier. Avec le délégué AppStateEventNotifier.AppStateChanged implémenté, votre application sera alertée du lancement et des événements de premier plan, et pourra diffuser l'annonce.

MainScene.cs

using GoogleMobileAds.Api;
using GoogleMobileAds.Common;
using UnityEngine;

public class MainScene : MonoBehaviour
{
    public void Start()
    {
        // TODO: Request an app open ad.
        MobileAds.Initialize((initStatus) =>
        {
            AppOpenAdManager.Instance.LoadAd();
            AppStateEventNotifier.AppStateChanged += OnAppStateChanged;
        });
    }

    public void OnAppStateChanged(AppState state)
    {
        if (state == AppState.Foreground)
        {
            // TODO: Show an app open ad if available.
            AppOpenAdManager.Instance.ShowAdIfAvailable();
        }
    }
}

Important  : AppStateEventNotifier est recommandé, car OnApplicationPause donne de faux signaux de premier plan et d'arrière-plan lorsque l'application affiche une annonce en plein écran.

Remarque : Les annonces à l'ouverture d'une application peuvent être diffusées lorsque l'utilisateur revient dans l'application depuis une autre application (par exemple, pour choisir une photo dans la galerie), car il s'agit également d'un événement de changement d'application. Nous vous recommandons de désactiver/d'activer les annonces à l'ouverture d'une application pour éviter qu'elles ne soient diffusées au milieu d'un parcours utilisateur important.

C'est tout ! Créez et exécutez le projet sur un appareil ou un émulateur. Une fois l'application lancée, attendez quelques secondes pour que l'annonce soit entièrement chargée.

Ensuite, lorsque vous revenez à l'application depuis une autre application ou l'écran d'accueil, l'annonce à l'ouverture de l'application s'affiche comme ci-dessous.

7. C'est terminé !

Vous avez terminé l'atelier de programmation. Vous trouverez le code final de cet atelier de programmation dans le dossier complete.