Integrate Banner Ads

Vungle Banner 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.

Banner Size Dimensions
VungleBannerSizes.Banner_320x50 320x50
VungleBannerSizes.BannerShort_300x50 300x50
VungleBannerSizes.BannerLeaderboard_728x90 728x90

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"
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. 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" 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. 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();
Powered by Creativity Driven by Performance Sign Up Here

Questions?

Need further assistance, feel free to reach out to us, we’re here to help!

Was this article helpful?