Interstitial Video Ads In Universal Windows Application

What are Interstitial Video Ads

Interstitial Video Ads are full screen video ads that are displayed between two contents. Microsoft offers an Ad Client SDK that can be used to build various ad options in your Windows apps. 

 

In this article, you will see how to use Microsoft Universal Ad Client SDK to implement Interstitial Video Ads. You can implement it separately in a Windows Phone and a Windows Store app using same methods/code.

Prerequisites:

1. Install the Microsoft Universal Ad Client SDK with Visual Studio 2015 or Visual Studio 2013.
   
   
2. Now Open Visual Studio and click on new project.
   
   
3. Now Open the Dropdown of Installed, Templates, Visual C#, Store app, and select universal app.
   
   
4. Select Blank App (Universal Apps) and give a name e.g. "VideoAdsSample".
   
   
5. Click OK.
   
   
   
   

Working in Project

The code sample is in C#.

1. Go to Solution Explorer and select References of both Windows project and WindowsPhone Project, One by one.
2. Right click on the References and then Add reference.
3. Now select Windows 8.1 from drop down then select Extensions.
4. Now select ad Mediator SDK for Windows 8.1 XAML version 1.0. Then Press Ok.
5. After adding the above extension, two references will be added in the reference drop down.
6. Do this in both projects, respectively.
   
   
   
   
   
   

When you will add these references, you will see a Caution sign in the start of these two references.



To remove these signs do the following steps:

1. Select "Build" option from the menu bar.
   
2. Select "Configuration Manager".
   
3. Change the Platform of both projects, Windows & WindowsPhone from drop down from "Any CPU" to "x86" and "ARM", Respectively.
   
4. Now close Configuration Manager window. Now you can see the Signs are removed from there.
   
   
   
   
   
   

Now open App.xaml.cs from the Shared project.

In the app code, include the following namespace reference.

using Microsoft.Advertising.WinRT.UI;

Create a object of Class InterstitialAd

public static InterstitialAd VideoAd = new InterstitialAd();





Now we will make four events.

VideoAd.AdReady += MyVideoAd_AdReady;
VideoAd.ErrorOccurred += MyVideoAd_ErrorOccurred;
VideoAd.Completed += MyVideoAd_Completed;
VideoAd.Cancelled += MyVideoAd_Cancelled;
// Send request 30 to 60 seconds before you need the ad.
VideoAd.RequestAd(AdType.Video, MyAppId, MyAdUnitId);#
region Events
void MyVideoAd_AdReady(object sender, object e)
{
    //When Ad is ready this event will hit.
    //Your Code
}
void MyVideoAd_ErrorOccurred(object sender, AdErrorEventArgs e)
{
    //When Some Error Occurred during loading the Ad this Event will hit.
    //Your Code
}
void MyVideoAd_Completed(object sender, object e)
{
    //When ad completes, This Event will be hit.
    //Your Code
}
void MyVideoAd_Cancelled(object sender, object e)
{
    //When ad is canceled by the user this event will be hit.
    //Your Code
}#
endregion

Now in the Constructor of App.cs define "MyAppID" and "MyAdUnitID".

var MyAppId = "<Your App ID>";
var MyAdUnitId = "<Your AD Unit ID>";

You will replace the test values with live values before submitting your app for submission.

I am using Test mode Values you can get them by clicking on the link.

And I have written some code for getting message box when the events will hit (you can see that in the screeshot given below) and I have used the Test Mode Values in "MyAppId" and "MyAdUnitId".

I am using a Bool data member named "AdIsReady" to check that the add is ready to load or not.













After doing everything told above, Open the WindowsPhone Project and then open the designer MainPage.xaml.

From toolbox drag the button control to the screen and make it's click event.

Now move to the MainPage.xaml.cs and in that click event and write the following code.

if (App.AdIsReady)
{
   App.VideoAd.Show();
}
else
{
   var dialog = new MessageDialog("Ad is not ready, Please check the Internet Connection or Wait for the ad to get ready for load.");
   dialog.Commands.Add(new UICommand("ok"));
   await dialog.ShowAsync();
}

Above code is checking that if the ad is ready then it will show the ad and if not then it will pop up the message box.





Now run the application on device or on Emulator by clicking the play button on top.

I am running the application on the device.

Please wait for the pop up that the ad is ready and make sure your device or emulator is connected to the internet.



The following are the screenshots of the running app.













Now we are done with the Windows Phone Project.

Open Windows Project and open the MainPage.xaml.

Drag button control from toolbox and make it's click event.

After making the event in the Xaml file open MainPage.xaml.cs and paste the following code in the button event which you have just created.

if (App.AdIsReady)
{
   App.VideoAd.Show();
}
else
{
   var dialog = new MessageDialog("Ad is not ready, Please check the Internet Connection or Wait for the ad to get ready for load.");
   dialog.Commands.Add(new UICommand("ok"));
   await dialog.ShowAsync();
}

Now run the application on the Local machine or on the simulator.

Before running the app change the start up project from windows phone to windows.



The following are the screenshots of the running app,













You can find the sample code in the link.