Les vues de bannière 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 l'actualiser. automatiquement après un certain temps. Si vous faites vos premiers pas sur mobile publicitaires, c'est un bon point de départ.
Ce guide vous explique comment intégrer des vues de bannière dans une application Unity. De plus, aux extraits de code et aux instructions, mais aussi des informations sur le dimensionnement les bannières et les liens vers des ressources supplémentaires.
Prérequis
- Suivez le guide de démarrage.
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 tests des annonces de production pour chaque requête, ce qui vous permet de les utiliser en toute sécurité.
Cependant, une fois que vous avez enregistré une application dans de l'interface Web Ad Manager et créé votre propre bloc d'annonces ID à utiliser dans votre application, configurez explicitement votre appareil en tant que test de l'appareil développement d'applications.
/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 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 ait lieu avant de charger les annonces en tant que afin de garantir que tous les adaptateurs de médiation sont initialisés.
Exemple d'utilisation de BannerView
L'exemple de code ci-dessous explique comment utiliser l'affichage sous forme de bannière. Dans cet exemple, vous
créer une instance d'affichage de bannière, utiliser un
AdManagerAdRequest
pour charger une annonce dans la vue "Bannière" ;
et d'étendre ses capacités
en gérant les événements de cycle de vie.
Créer une vue de bannière
Pour utiliser un affichage de type bannière, la première étape consiste à créer une instance de ce type d'affichage.
dans un script C# associé à un fichier 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 éléments suivants :
paramètres:
adUnitId
: ID du bloc d'annonces à partir duquel leAdManagerBannerView
doit charger les annonces.AdSize
: taille d'annonce que vous souhaitez utiliser. Consultez les tailles de bannière. pour en savoir plus.AdPosition
: position à laquelle les vues de la bannière doivent être placées. La L'énumérationAdPosition
répertorie les valeurs de position d'annonce valides.
Notez la façon dont les blocs d'annonces sont utilisés selon la plate-forme. Vous devez utiliser un bloc d'annonces iOS pour envoyer des demandes d'annonces sur iOS et un bloc d'annonces Android pour sur Android.
(Facultatif) Créer un affichage de bannière avec une position personnalisée
Pour mieux contrôler l'emplacement d'un AdManagerBannerView
à l'écran que ce qui est proposé par les valeurs AdPosition
, utilisez le constructeur
dont les paramètres sont définis sur les coordonnées X et Y:
// 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 votre AdManagerBannerView
est
positionnée aux valeurs x et y transmises au constructeur, où l'origine est
en haut à gauche de l'écran.
(Facultatif) Créer un affichage 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 susceptibles d'ê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
à 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'adaptent automatiquement à la nouvelle taille. AdManagerAdView
est défini par défaut sur la taille
transmis au premier paramètre jusqu'au retour de l'annonce suivante.
Charger une bannière
Une fois l'AdManagerBannerView
en place, poursuivre le chargement
Une annonce avec la méthode LoadAd()
dans AdManagerBannerView
. Il utilise un paramètre qui contient
les informations d'exécution, telles que les informations de ciblage, les libellés d'exclusion et l'éditeur ;
fourni.
/// <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 d'affichage de la bannière
Pour personnaliser le comportement de votre annonce, vous pouvez intégrer un certain nombre d'événements dans du cycle de vie de l'annonce (chargement, ouverture ou fermeture). Pour les écouter : é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.");
};
}
Détruire l'affichage de la bannière
Lorsque vous avez terminé d'utiliser l'affichage de la bannière, veillez à appeler Destroy()
pour libérer
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.
Tailles des bannières
Le tableau ci-dessous répertorie les tailles de bannière standard.
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 | IAB Rectangle moyen | Téléphones et tablettes | MEDIUM_RECTANGLE |
468 x 60 | Bannière IAB en taille réelle | 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 d'application
Les événements d'application vous permettent de créer des annonces qui peuvent envoyer des messages au code de l'application. L'application peut ensuite prendre des mesures en fonction de ces messages.
Vous pouvez écouter des événements d'application spécifiques à Ad Manager à l'aide de AppEvent
. Ces événements
peut survenir à tout moment au cours du cycle de vie de l'annonce, même avant l'appel du chargement.
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 déclenché lorsqu'un événement d'application se produit dans une annonce. Voici une
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 montrant 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;
}
}
};
Et voici la création correspondante qui envoie un événement d'application 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
- Exemple HelloWorld: Une implémentation minimale de tous les formats d'annonces.