Bannières

Les vues de bannières sont des annonces textuelles ou illustrées rectangulaires qui occupent une place à 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ère 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

Effectuez toujours 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 de test plutôt que des annonces de production pour chaque requête, 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 les annonces, demandez à votre application d'initialiser le SDK Mobile Ads en appelant MobileAds.Initialize(). Cette opération ne doit être effectuée qu'une seule fois, idéalement au démarrage 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, car cela garantit que tous les adaptateurs de médiation sont initialisés.

Exemple de BannerView

L'exemple de code ci-dessous montre comment utiliser la vue bannière. Dans l'exemple, vous 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

La première étape de l'utilisation d'une vue de bannière consiste à créer une instance de vue de bannière dans un script C# associé à un GameObject.


  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/21775744923/example/adaptive-banner";

  AdManagerBannerView _bannerView;

  /// <summary>
  /// Creates a 320x50 banner view at top of the screen.
  /// </summary>
  public void CreateBannerView()
  {
      Debug.Log("Creating banner view");

      // If we already have a banner, destroy the old one.
      if (_bannerView != null)
      {
          DestroyAd();
      }

      // Create a 320x50 banner at top of the screen
      _bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
  }

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

  • adUnitId: ID du bloc d'annonces à partir duquel AdManagerBannerView doit charger des annonces.
  • AdSize: taille de l'annonce que vous souhaitez utiliser. Pour en savoir plus, consultez la section Tailles des bannières.
  • AdPosition: position où les vues de bannière doivent être placées. L'énumération AdPosition liste les valeurs de position d'annonce valides.

Notez comment les différents blocs d'annonces sont utilisés en fonction de la plate-forme. Vous devez utiliser un bloc d'annonces iOS pour effectuer des requêtes d'annonces sur iOS et un bloc d'annonces Android pour effectuer des requêtes sur Android.

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

Pour un contrôle plus précis de l'emplacement d'un AdManagerBannerView à l'écran que ce qui est proposé par les valeurs AdPosition, utilisez le constructeur qui utilise les coordonnées X et Y comme paramètres:

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

L'angle supérieur gauche de AdManagerBannerView 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:

// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);

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

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

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

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

Charger une bannière publicitaire

Une fois le AdManagerBannerView en place, chargez une annonce avec la méthode LoadAd() de 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.

/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
    // create an instance of a banner view first.
    if(_bannerView == null)
    {
        CreateAdManagerBannerView();
    }

    // create our request used to load the ad.
    var adRequest = new AdManagerAdRequest();

    // send the request to load the ad.
    Debug.Log("Loading banner ad.");
    _bannerView.LoadAd(adRequest);
}

Écouter les événements de visionnage 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é:

/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
    // Raised when an ad is loaded into the banner view.
    _bannerView.OnBannerAdLoaded += () =>
    {
        Debug.Log("Banner view loaded an ad with response : "
            + _bannerView.GetResponseInfo());
    };
    // Raised when an ad fails to load into the banner view.
    _bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
    {
        Debug.LogError("Banner view failed to load an ad with error : "
            + error);
    };
    // Raised when the ad is estimated to have earned money.
    _bannerView.OnAdPaid += (AdValue adValue) =>
    {
        Debug.Log(String.Format("Banner view paid {0} {1}.",
            adValue.Value,
            adValue.CurrencyCode));
    };
    // Raised when an impression is recorded for an ad.
    _bannerView.OnAdImpressionRecorded += () =>
    {
        Debug.Log("Banner view recorded an impression.");
    };
    // Raised when a click is recorded for an ad.
    _bannerView.OnAdClicked += () =>
    {
        Debug.Log("Banner view was clicked.");
    };
    // Raised when an ad opened full screen content.
    _bannerView.OnAdFullScreenContentOpened += () =>
    {
        Debug.Log("Banner view full screen content opened.");
    };
    // Raised when the ad closed full screen content.
    _bannerView.OnAdFullScreenContentClosed += () =>
    {
        Debug.Log("Banner view full screen content closed.");
    };
}

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

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

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 parvient pas à se charger. Le SDK Google Mobile Ads 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, comme la définition d'une fréquence d'actualisation, consultez la section Fréquence d'actualisation des annonces dans les applications mobiles.

Le tableau ci-dessous liste les tailles de bannière 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 de l'IAB Téléphones et tablettes MEDIUM_RECTANGLE
468 x 60 Bannière pleine taille IAB Tablettes FULL_BANNER
728 x 90 Classement 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 d'application

Les événements d'application vous permettent de créer des annonces pouvant envoyer des messages au code de votre 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 pendant le cycle de vie de l'annonce, même avant l'appel de la charge.

namespace GoogleMobileAds.Api.AdManager;

/// The App event message sent from the ad.
public class AppEvent
{
    // Name of the app event.
    string Name;
    // Argument passed from the app event.
    string Value;
}

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

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

Voici un exemple qui montre comment modifier la couleur d'arrière-plan de votre application en fonction d'un événement d'application avec un nom de couleur:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

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: 0px;
      left: 0px;
      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