Bannières

Les vues de bannières sont des annonces rectangulaires illustrées ou textuelles qui occupent une partie de l'écran. Elles restent à l'écran lorsque les utilisateurs interagissent avec l'application et peuvent s'actualiser automatiquement au bout d'un certain temps. Si vous débutez dans la publicité mobile, elles constituent un excellent point de départ.

Ce guide vous explique comment intégrer des vues de bannières dans une application Unity. En plus des extraits de code et des instructions, il inclut également des informations sur le dimensionnement correct des bannières et des liens vers des ressources supplémentaires.

Prérequis

• Suivez le guide de démarrage.

Toujours effectuer des tests avec des annonces tests

L'exemple de code suivant contient un ID de bloc d'annonces que vous pouvez utiliser pour demander des annonces tests. Il a été spécialement configuré pour renvoyer des annonces tests plutôt que des annonces de production pour chaque demande, ce qui le rend sûr à utiliser.

Toutefois, une fois que vous avez enregistré une application dans l'interface Web Ad Manager et créé vos propres ID de bloc d'annonces à utiliser dans votre application, configurez explicitement votre appareil en tant qu'appareil de test pendant le développement.

/21775744923/example/adaptive-banner

Initialiser le SDK Mobile Ads

Avant de charger des annonces, faites en sorte que votre application initialise le SDK Mobile Ads en appelant MobileAds.Initialize(). Cette opération ne doit être effectuée qu'une seule fois, idéalement au lancement de l'application.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize the Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

Si vous utilisez la médiation, attendez que le rappel se produise avant de charger les annonces. Vous vous assurerez ainsi que tous les adaptateurs de médiation sont initialisés.

Exemple BannerView

L'exemple de code suivant montre comment utiliser la vue de bannière. Dans l'exemple, créez une instance de vue de bannière, utilisez un AdManagerAdRequest pour charger une annonce dans la vue de bannière, puis étendez ses capacités en gérant les événements de cycle de vie.

Créer une vue de bannière

La première étape pour utiliser une vue de bannière consiste à créer une instance de vue de bannière.

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);
AdManagerBannerViewSnippets.cs

Remplacez AD_UNIT_ID par l'ID de votre bloc d'annonces.

Le constructeur d'un AdManagerBannerView comporte les paramètres suivants :

• adUnitId : ID du bloc d'annonces bannière à charger.
• AdSize : taille de la bannière que vous souhaitez utiliser.
• AdPosition : position où les vues de bannière doivent être placées.

(Facultatif) Créer une vue de bannière avec une position personnalisée

Pour mieux contrôler l'emplacement d'une vue de bannière à l'écran que ce que proposent les valeurs AdPosition, utilisez le constructeur qui comporte des coordonnées x et y comme paramètres :

// Create a 320x50 banner views at coordinate (0,50) on screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, 0, 50);
AdManagerBannerViewSnippets.cs

L'angle supérieur gauche de la vue de la bannière est positionné sur les valeurs x et y transmises au constructeur, où l'origine est l'angle supérieur gauche de l'écran.

(Facultatif) Créer une vue de bannière avec une taille personnalisée

En plus d'utiliser une constante AdSize, vous pouvez également spécifier une taille personnalisée pour votre annonce :

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", adSize, AdPosition.Bottom);
AdManagerBannerViewSnippets.cs

(Facultatif) Plusieurs tailles d'annonces

Ad Manager vous permet de spécifier plusieurs tailles d'annonces pouvant être diffusées dans un AdManagerBannerView. Avant d'implémenter cette fonctionnalité dans le SDK, créez un élément de campagne ciblant les mêmes blocs d'annonces associés à des créations de tailles différentes.

Dans votre application, transmettez plusieurs paramètres AdSize dans ValidAdSizes :

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner,
    new AdSize(120, 20),
    new AdSize(250, 250),
};
AdManagerBannerViewSnippets.cs

Si la taille de AdManagerAdView change lors de l'actualisation, votre mise en page doit pouvoir s'adapter automatiquement à la nouvelle taille. AdManagerAdView est défini par défaut sur la taille transmise dans le premier paramètre jusqu'à ce que la prochaine annonce soit renvoyée.

Charger une bannière

Une fois le AdManagerBannerView en place, chargez une annonce avec la méthode LoadAd() dans la classe AdManagerBannerView. Il utilise un paramètre qui contient des informations d'exécution, telles que des informations de ciblage, des libellés d'exclusion et l'ID fourni par l'éditeur.

Pour charger une annonce, créez un AdManagerAdRequest et transmettez-le à la méthode LoadAd().

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());
AdManagerBannerViewSnippets.cs

Écouter les événements de vue de bannière

Pour personnaliser le comportement de votre annonce, vous pouvez vous connecter à un certain nombre d'événements du cycle de vie de l'annonce, tels que le chargement, l'ouverture ou la fermeture. Pour écouter ces événements, enregistrez un délégué :

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};
AdManagerBannerViewSnippets.cs

Détruire la vue de la bannière

Lorsque vous avez terminé d'utiliser la vue de bannière, veillez à appeler Destroy() pour libérer les ressources.

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}
AdManagerBannerViewSnippets.cs

Et voilà ! Votre application est maintenant prête à diffuser des bannières publicitaires.

Actualiser une annonce

Si vous avez configuré votre bloc d'annonces pour qu'il s'actualise, vous n'avez pas besoin de demander une autre annonce lorsque l'annonce ne se charge pas. Le SDK Google Mobile Ads respecte toute fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur Ad Manager. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle demande. Pour en savoir plus sur l'actualisation des blocs d'annonces, par exemple sur la définition d'une fréquence d'actualisation, consultez Fréquence d'actualisation des annonces dans les applications mobiles.

Tailles des bannières

Le tableau suivant répertorie les tailles de bannières standards :

Événements d'application

Les événements d'application vous permettent de créer des annonces qui peuvent envoyer des messages à leur code d'application. L'application peut ensuite effectuer des actions en fonction de ces messages.

Vous pouvez écouter les événements d'application spécifiques à Ad Manager à l'aide de AppEvent. Ces événements peuvent se produire à tout moment au cours du cycle de vie de l'annonce, même avant l'appel de chargement.

OnAppEventReceived est déclenché lorsqu'un événement d'application se produit dans une annonce. Voici un exemple de gestion de cet événement dans votre code :

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Data}.");
};
AdManagerBannerViewSnippets.cs

Voici un exemple montrant comment modifier la couleur d'arrière-plan de votre application en fonction d'un événement d'application nommé "color" :

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            renderer.material.color = color;
        }
    }
};
AdManagerBannerViewSnippets.cs

Voici la création correspondante qui envoie l'événement d'application de couleur :

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0;
      left: 0;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>
AppEventSnippets.html

Ressources supplémentaires

• Exemple HelloWorld : Implémentation minimale de tous les formats d'annonces.