Intégrer des bannières publicitaires

Vungle Banner est actuellement en phase BÊTA. De ce fait, il est possible que vous obteniez des réponses publicitaires limitées pour des demandes de bannières publicitaires. Veuillez contacter directement le responsable de votre compte pour obtenir un accès afin d'assurer un lancement réussi.

Vue d'ensemble

À partir du SDK Vungle v.6.5.2 pour Windows, Vungle prend en charge les bannières publicitaires. Les publicités MREC et les bannières publicitaires nécessitent la version 16 de l'API ou une version ultérieure.

Tout comme les publicités MREC, les bannières vidéo sont des publicités rectangulaires qui occupent un emplacement n'importe où dans la structure de l'application, généralement affichées en haut ou en bas de l'écran, afin que l'utilisateur puisse continuer à interagir avec l'application pendant la diffusion de la publicité. Ce format de publicité ne nécessite pas un plein écran. Le diffuseur choisit l'emplacement du conteneur dans l'application. La taille du conteneur pour afficher les bannières publicitaires peut être de 320x50, 300x50 ou 728x90 (pour les tablettes). 

Configuration nécessaire des bannières publicitaires

• Vungle SDK v6.5.2 pour Windows
• Windows 10 UWP

Tailles de bannière prises en charge

La taille du conteneur des bannières publicitaires peut être de 320 x 50, 300 x 50 ou 728 x 90 (pour les tablettes). Vous pouvez définir des bannières publicitaires n'importe où sur l'écran et l'utilisateur peut continuer à utiliser l'application pendant la diffusion de la publicité.

Étape 1. Intégration de base complète

Pour intégrer des bannières publicitaires dans votre application Windows, commencez par suivre les instructions de l'article sur l'intégration de base . Cet article contient des informations supplémentaires et suppose que vous avez effectué l'intégration de base.

Étape 2. Intégrer des bannières publicitaires

Utilisez VungleAdControl pour charger et diffuser une bannière publicitaire dans un conteneur. Pour une intégration plus simple et plus facile, vous pouvez transférer le contrôle à VungleAdControl et intégrer en XAML uniquement. Pour une intégration qui vous donne un contrôle plus détaillé, vous pouvez spécifier le conteneur publicitaire en XAML et contrôler la bannière publicitaire par programme.

Option 1. Intégration simple de bannières à l'aide de XAML

Vous devez déclarer VungleAdControl avec l'ID de l'application Vungle et l'ID de placement pour le placement de la bannière. Précisez que ce VungleAdControl est pour une bannière publicitaire en passant isBannerAd défini sur « True » et autorisez-le à charger et diffuser automatiquement une bannière publicitaire en passant AutoRun défini sur « True ».

Exemple de code :

<UI:VungleAdControl x:Name="vungleBannerControl" AutomationProperties.AutomationId="vungleBannerControl"
    IsBannerAd="True"
    AutoRun="True"
    <!-- Specify dimensions: 320x50, 300x50, 728x90 -->
    Width="SIZE_OF_WIDTH" 
    Height="SIZE_OF_HEIGHT" 
    Margin="10" 
    HorizontalAlignment="Left"
    AppID="<YOUR_VUNGLE_APP_ID>"
    Placement="<YOUR_BANNER_PLACEMENT_ID>"
    <Border BorderBrush="Black" BorderThickness="1" Margin="10">
        <TextBlock Text="Banner Ads will show here..." VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
</UI:VungleAdControl>

Option 2. Intégration de la bannière avec le contrôle programmatique

Vous pouvez utiliser XAML en conjonction avec du code pour contrôler par programmation quand LoadBannerAd, PlayBannerAd ou LoadAndPlayBannerAd pour charger et diffuser des bannières publicitaires au moment qui vous convient le mieux dans le cycle de vie de votre application.

1. Spécifiez le conteneur publicitaire en XAML. Vous devez configurer VungleAdControl en XAML avec isBannerAd défini sur « True ». Spécifiez la taille du conteneur publicitaire pour qu'il corresponde à la taille de la bannière que vous voulez afficher en passant les valeurs correctes Width et Height.
   
   Exemple de XAML :
   <UI:VungleAdControl x:Name="vungleBannerControl" AutomationProperties.AutomationId="vungleBannerControl"
       IsBannerAd="True"
       Width="320" Height="50" Margin="10" HorizontalAlignment="Left">
       <Border BorderBrush="Black" BorderThickness="1" Margin="10">
           <TextBlock Text="Banner Ads will show here..." VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Border>
   </UI:VungleAdControl>

2. Définissez l'ID d'application pour VungleAdControl. Commencez par envoyer l'ID d'application pour VungleAdControl en utilisant l'API AppID. Notez que le SDK Vungle est une classe simple et que vous ne pouvez utiliser qu'un seul ID d'application à la fois. Si vous diffusez une bannière publicitaire avec des publicités en plein écran, passez l'ID d'application identique que vous utilisez dans la fonction GetInstance pour initialiser le SDK.

   Instancier VungleAdControl :

   VungleSDKConfig sdkConfig = new VungleSDKConfig();
   sdkConfig.DisableBannerRefresh = true; // Default: false
   
   sdkInstance = AdFactory.GetInstance(vungleAppID, sdkConfig);
   this.vungleBannerControl.AppID = vungleAppID;

Étape 3. Charger et lire une bannière publicitaire

Vous pouvez charger et lire une bannière publicitaire en même temps en utilisant l'API LoadAndPlayBannerAd. Si vous préférez précharger une bannière publicitaire et la lire plus tard, vous pouvez utiliser les API LoadBannerAd et PlayBannerAd pour avoir un contrôle plus précis du moment de placement de la bannière. Vous devez transmettre l'ID de placement de la bannière publicitaire et la taille de bannière prise en charge lorsque vous utilisez ces API, appelées sur un thread d'IU. Vous pouvez utiliser StopBannerAd pour arrêter l'affichage d'une bannière publicitaire à tout moment.

LoadAndPlayBannerAd :

await vungleBannerControl.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
    this.vungleBannerControl.LoadAndPlayBannerAd("YOUR_PLACEMENT_ID", VungleBannerSizes.Banner_320x50);
});

LoadBannerAd :

this.vungleBannerControl.LoadBannerAd("YOUR_PLACEMENT_ID", VungleBannerSizes.Banner_320x50);

PlayBannerAd :

this.vungleBannerControl.PlayBannerAd("YOUR_PLACEMENT_ID", VungleBannerSizes.Banner_320x50);

StopBannerAd :

this.vungleBannerControl.StopBannerAd();