Integrate Banner Ads

The Vungle Banner format is currently in BETA phase and you may get limited ad responses for banner ad requests. Please contact your account manager directly for access to ensure a successful launch.

Overview

Starting with Vungle SDK v6.5.2 for Windows, Vungle supports banner ads. Both MREC and banner ads require API version 16 or higher.

Similar to MREC ads, banner video ads are rectangular ads occupying a location anywhere within the app's layout, typically displayed on the top or bottom of the screen, so that the user can continue to interact with the app while the ad is playing. This ad format does not require a full screen; instead, the publisher determines the location of the ad container within their app. However, the size of the banner container must be either 320x50, 300x50, or 728x90 (for tablets). 

Banner Ad Requirements

• Vungle SDK v6.5.2 or higher for Windows
• Windows 10 UWP

Supported Banner Sizes

The container size to render banner ads can be 320 x 50, 300 x 50 or 728 x 90 (for tablets). You can set banner ads anywhere on the screen, and the user can continue using the app while the ad plays.

Step 1. Complete Basic Integration

To integrate banner ads in your Windows app, begin by following the instructions in the basic integration article. This article contains supplementary information and assumes you have completed basic integration.

Step 2. Integrate Banner Ads

Use VungleAdControl to load and play a banner ad in a container. For a simpler and easier integration, you can hand control over to VungleAdControl, and integrate using XAML only. For an integration that gives you more detailed control, you can specify the ad container in XAML and programmatically control the banner ad.

Option 1. Simple Banner Integration Using XAML

You must declare VungleAdControl with the Vungle app ID and placement ID for the banner placement. Specify that this VungleAdControl is for a banner ad by passing isBannerAd set to 'True' and allow it to automatically load and play a banner ad by passing AutoRun set to 'True'.

Sample 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"
    AppID="YOUR_VUNGLE_APP_ID"
    Placement="YOUR_BANNER_PLACEMENT_ID"
</UI:VungleAdControl>

Option 2. Banner Integration With Programmatic Control

You can use XAML in conjunction with code to programmatically control when to LoadBannerAd, PlayBannerAd, or LoadAndPlayBannerAd to load and play banner ad at your preferred timing in your app's lifecycle.

1. Specify the ad container In XAML. You must configure VungleAdControl in XAML with isBannerAd set to 'True'. Specify the ad container size to fit the banner size that you want to display by passing the correct Width and Height values.
   
   Sample XAML:
   <UI:VungleAdControl x:Name="vungleBannerControl" AutomationProperties.AutomationId="vungleBannerControl"
       IsBannerAd="True"
       Width="320" 
       Height="50" >
   </UI:VungleAdControl>

2. Set the app ID for VungleAdControl. Start by sending the app ID for the VungleAdControl using AppID API. Note that the Vungle SDK is a singleton class, and you can use only one app ID at any one time. If you are playing a banner ad with fullscreen ads, pass in the identical app ID that you use in the GetInstance function to initialize the SDK.

   Instantiate VungleAdControl:

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

Step 3. Load and Play a Banner Ad

You can load and play a banner ad at the same time using the LoadAndPlayBannerAd API. If you prefer to preload a banner ad and play it later, you can use the LoadBannerAd and PlayBannerAd instead, to have finer control of the banner placement timing. You must pass the placement ID for banner ad and supported banner size when using these APIs, called on a UI thread. You can use StopBannerAd to stop displaying a banner ad at anytime.

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();