Configurer des bannières publicitaires

Les vues de bannière sont des annonces illustrées ou textuelles rectangulaires qui occupent un espace à l'écran. Elles restent à l'écran lorsque les utilisateurs interagissent avec l'application et peuvent être actualisées 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 bannières dans une application Unity. En plus d'extraits de code et d'instructions, il inclut également des informations sur le dimensionnement correct des bannières et des liens vers des ressources supplémentaires.

Prérequis

Avant de continuer, configurez Google Mobile Ads Unity Plugin.

Toujours tester 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 de test plutôt que des annonces de production pour chaque demande, ce qui permet de l'utiliser en toute sécurité.

Toutefois, après avoir 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/interstitial

Initialiser Google Mobile Ads Unity Plugin

Avant de charger des annonces, demandez à votre application d'initialiser Google Mobile Ads Unity Plugin 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 Google Mobile Ads Unity Plugin.
        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. Cela garantit que tous les adaptateurs de médiation sont initialisés.

Exemple de BannerView

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

Créer une vue de bannière

Pour utiliser une vue de bannière, vous devez d'abord en créer une instance.

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

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 de la bannière à charger.
  • AdSize : taille de la bannière que vous souhaitez utiliser.
  • AdPosition : position où les vues de la 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 par rapport à 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);

L'angle supérieur gauche de la vue de la bannière est positionné aux 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);

(Facultatif) Plusieurs tailles d'annonce

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 différentes tailles.

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),
};

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

Charger une bannière

Une fois que AdManagerBannerView est 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 les informations de ciblage, les 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());

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

Pour personnaliser le comportement de votre annonce, vous pouvez l'associer à un certain nombre d'événements de son cycle de vie, 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.
};

Supprimer la vue de la bannière

Pour détruire la bannière, appelez la méthode Destroy() afin de libérer des ressources :

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

Pour les bannières qui ne se chargent pas, nous vous recommandons de les actualiser au lieu de les détruire et d'en créer d'autres. Pour en savoir plus, consultez Actualiser une annonce.

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. Google Mobile Ads Unity Plugin respecte la fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur d'Ad Manager. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle requête. Pour en savoir plus sur l'actualisation des blocs d'annonces, par exemple pour définir une fréquence d'actualisation, consultez Fréquence d'actualisation des annonces dans les applications mobiles.

Les grandes bannières adaptatives offrent un format plus grand conçu pour les mises en page sans défilement. Par rapport aux bannières adaptatives ancrées standards, ces bannières permettent une hauteur maximale plus élevée (jusqu'à 20 % de la hauteur de l'écran, entre 50 et 150 dp). Cet espace accru est optimisé pour les contenus vidéo.

Le tableau suivant liste les tailles de bannières standards :

Taille en dp (LxH) Description Disponibilité Constante AdSize
320 x 50 Bannière standard Téléphones et tablettes BANNER
320 x 100 Grande bannière Téléphones et tablettes LARGE_BANNER
300 x 250 Rectangle moyen IAB Téléphones et tablettes MEDIUM_RECTANGLE
468 x 60 Bannière IAB de taille standard Tablettes FULL_BANNER
728 x 90 Leaderboard IAB Tablettes LEADERBOARD
Largeur fournie x hauteur adaptative Bannière adaptative Téléphones et tablettes N/A
Largeur de l'écran x 32|50|90 Bannière intelligente Téléphones et tablettes SMART_BANNER
En savoir plus sur les bannières adaptatives, destinées à remplacer les bannières intelligentes

Événements dans l'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 prendre des mesures 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 du 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}.");
};

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

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

Voici la création correspondante qui envoie l'événement d'application "color" :

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

Ressources supplémentaires