Friday, November 27, 2015

Interstitial Video Ads in Universal Windows Application

In this article of Interstitial Video ads, we will focus on how to Implement video ads in your Universal Windows Application. You can implement it separately in windows phone and windows store application by using the 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 Drop down of Installed, Templates, Visual C#, Store app, and select universal app.
  4. Select Blank App(Universal Apps) give the 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 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.
        • 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.
        •  Following are the Screenshots of the running app.






        Sample is available to download below.


        No comments:

        Post a Comment