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.

    new project

    Blank App

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.

    Add reference

    Extension

    Solution explorer

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

Reference

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.

    Build

    Configuration

    Configure message

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

CS File

namespace

Now we will make four events.

  1. VideoAd.AdReady += MyVideoAd_AdReady;  
  2. VideoAd.ErrorOccurred += MyVideoAd_ErrorOccurred;  
  3. VideoAd.Completed += MyVideoAd_Completed;  
  4. VideoAd.Cancelled += MyVideoAd_Cancelled;  
  5. // Send request 30 to 60 seconds before you need the ad.  
  6. VideoAd.RequestAd(AdType.Video, MyAppId, MyAdUnitId);#  
  7. region Events  
  8. void MyVideoAd_AdReady(object sender, object e)  
  9. {  
  10.     //When Ad is ready this event will hit.  
  11.     //Your Code  
  12. }  
  13. void MyVideoAd_ErrorOccurred(object sender, AdErrorEventArgs e)  
  14. {  
  15.     //When Some Error Occurred during loading the Ad this Event will hit.  
  16.     //Your Code  
  17. }  
  18. void MyVideoAd_Completed(object sender, object e)  
  19. {  
  20.     //When ad completes, This Event will be hit.  
  21.     //Your Code  
  22. }  
  23. void MyVideoAd_Cancelled(object sender, object e)  
  24. {  
  25.     //When ad is canceled by the user this event will be hit.  
  26.     //Your Code  
  27. }#  
  28. endregion  
Now in the Constructor of App.cs define "MyAppID" and "MyAdUnitID".
  1. var MyAppId = "<Your App ID>";  
  2. 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.

AdIsReady

Events

Methods

Write code

Function

Click taht ad ready

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.
  1. if (App.AdIsReady)  
  2. {  
  3.    App.VideoAd.Show();  
  4. }  
  5. else  
  6. {  
  7.    var dialog = new MessageDialog("Ad is not ready, Please check the Internet Connection or Wait for the ad to get ready for load.");  
  8.    dialog.Commands.Add(new UICommand("ok"));  
  9.    await dialog.ShowAsync();  
  10. }  
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.

Button

Code

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.

Device

The following are the screenshots of the running app.

Click after you see

Ad ready to load

Advertiesment

press back button

Ad is cancled

Ad is complete

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.
  1. if (App.AdIsReady)  
  2. {  
  3.    App.VideoAd.Show();  
  4. }  
  5. else  
  6. {  
  7.    var dialog = new MessageDialog("Ad is not ready, Please check the Internet Connection or Wait for the ad to get ready for load.");  
  8.    dialog.Commands.Add(new UICommand("ok"));  
  9.    await dialog.ShowAsync();  
  10. }  
Design

Add load

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.

Running the app

The following are the screenshots of the running app,

Videoad

Add is ready

Time left

Back Button

Add

video add

You can find the sample code in the link.