Interstitial ad sample code in JavaScript

Article
10/20/2022

Warning

As of June 1, 2020, the Microsoft Ad Monetization platform for Windows UWP apps will be shut down. Learn more

This topic provides the complete sample code for a basic JavaScript and HTML Universal Windows Platform (UWP) app that shows an interstitial ad. For step-by-step instructions that show how to configure your project to use this code, see Interstitial ads. For a complete sample project, see the advertising samples on GitHub.

Code example

This section shows the contents of the HTML and JavaScript files in a basic app that shows an interstitial ad. To use these examples, copy this code into a JavaScript WinJS App (Universal Windows) project in Visual Studio.

This sample app uses two buttons to request and then launch an interstitial ad. The main.js and index.html files generated by Visual Studio have been modified and are shown below. The script.js file shown below contains most of the code in the sample, and you should add this file to the js folder in your project.

Replace the values of the applicationId and adUnitId variables with live values from Partner Center before submitting your app to the Store. For more information, see Set up ad units in your app.

Note

To alter this example to show an interstitial banner ad instead of an interstitial video ad, pass the value InterstitialAdType.display to the first parameter of the RequestAd method instead of InterstitialAdType.video. For more information, see Interstitial ads.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>InterstitialAdSamplesJS</title>
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />
    <!-- JavaScript files containing code for this example -->
    <script src="js/main.js"></script>
    <script src="js/script.js"></script>
    <!-- Required reference for InterstitialAd -->
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body class="win-type-body">
    <button id="requestAdButton" onclick="requestAdButtonClick" class="win-button">Request ad</button>
    <button id="showAdButton" onclick="showAdButtonClick" class="win-button">Show ad</button>
    <div id="description" style="height:100%; overflow:auto"></div>
</body>
</html>

script.js

(function () {
    "use strict";

    // Assign applicationId and adUnitId to test values. Replace these values with live values 
    // from Dev Center before you submit your app to the Store.
    var interstitialAd = null;
    var applicationId = "d25517cb-12d4-4699-8bdc-52040c712cab";
    var adUnitId = "test";

    window.startInterstitial = function () {
        writeText("<br>Interstitial ads in JavaScript UWP apps");
        registerButtonEvents();

        // Initialize the InterstitialAd object and set up event handlers for it.
        prepareInterstitial();

        writeText("Press the buttons to request and show an interstitial ad.");
    };

    var registerButtonEvents = function () {
        requestAdButton.addEventListener("click", requestAdButtonClick);
        showAdButton.addEventListener("click", showAdButtonClick);
    };

    // This example requests an interstitial ad when the "Request ad" button is clicked. In a real app, 
    // you should request the interstitial ad close to when you think it will be shown, but with 
    // enough advance time to make the request and prepare the ad (say 30 seconds to a few minutes).
    // To show an interstitial banner ad instead of an interstitial video ad, replace InterstitialAdType.video 
    // with InterstitialAdType.display.
    var requestAdButtonClick = function (evt) {
        if (interstitialAd) {
            interstitialAd.requestAd(MicrosoftNSJS.Advertising.InterstitialAdType.video, applicationId, adUnitId);
        }
    }

    // This example attempts to show the interstitial ad when the "Show ad" button is clicked.
    var showAdButtonClick = function (evt) {
        if (interstitialAd && interstitialAd.state !== MicrosoftNSJS.Advertising.InterstitialAdState.showing) {
            showInterstitial();
        }
    }

    var restart = function () {
        if (interstitialAd) {
            interstitialAd.dispose();
        }
        interstitialAd = null;
        window.startInterstitial();
    };

    var clearText = function (msg) {
        description.innerHTML = "";
    };

    var writeText = function (msg) {
        description.innerHTML = description.innerHTML + msg + "<br>";
        description.scrollTop = description.scrollHeight;
    };

    var prepareInterstitial = function () {
        if (!interstitialAd) {
            interstitialAd = new MicrosoftNSJS.Advertising.InterstitialAd();
            interstitialAd.onErrorOccurred = errorOccurredHandler;
            interstitialAd.onAdReady = adReadyHandler;
            interstitialAd.onCancelled = cancelledHandler;
            interstitialAd.onCompleted = completedHandler;
        }
    };

    var showInterstitial = function () {
        if (interstitialAd && interstitialAd.state === MicrosoftNSJS.Advertising.InterstitialAdState.ready) {
            interstitialAd.show();
        } else {
            // No ad is available to show. Allow user to try again anyway
            clearText();
            writeText("<br>Unable to show an ad. Check the error log. You can try again.");
            restart();
        }
    };

    var errorOccurredHandler = function (sender, args) {
        console.log("error: " + args.errorMessage + " (" + args.errorCode + ")");
        if (!isPlaying) {
            clearText();
            writeText("<br>Unable to show an ad. Check the error log. You can try again.");
            restart();
        }
    };

    var adReadyHandler = function (sender) {
        console.log("Ad ready");
    };

    var cancelledHandler = function (sender) {
        console.log("Ad cancelled");
        writeText("<br>You must watch the entire ad to continue. <b>Press the button to watch the ad.</b>");
        interstitialAd.dispose();
        interstitialAd = null;
        prepareInterstitial();
    };

    var completedHandler = function (sender) {
        console.log("Ad complete");
        clearText();
        writeText("<br>Thanks for watching the ad! You can try again!");
        restart();
    };

})();

main.js

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFirstActivation = true;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.voiceCommand) {
            // TODO: Handle relevant ActivationKinds. For example, if your app can be started by voice commands,
            // this is a good place to decide whether to populate an input field or choose a different initial view.
        }
        else if (args.detail.kind === activation.ActivationKind.launch) {
            // A Launch activation happens when the user launches your app via the tile
            // or invokes a toast notification by clicking or tapping on the body.
            if (args.detail.arguments) {
                // TODO: If the app supports toasts, use this value from the toast payload to determine where in the app
                // to take the user in response to them invoking a toast notification.
            }
            else if (args.detail.previousExecutionState === activation.ApplicationExecutionState.terminated) {
                // TODO: This application had been suspended and was then terminated to reclaim memory.
                // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
                // Note: You may want to record the time when the app was last suspended and only restore state if they've returned after a short period.
            }
        }

        if (!args.detail.prelaunchActivated) {
            // TODO: If prelaunchActivated were true, it would mean the app was prelaunched in the background as an optimization.
            // In that case it would be suspended shortly thereafter.
            // Any long-running operations (like expensive network or disk I/O) or changes to user state which occur at launch
            // should be done here (to avoid doing them in the prelaunch case).
            // Alternatively, this work can be done in a resume or visibilitychanged handler.
        }

        if (isFirstActivation) {
            // TODO: The app was activated and had not been running. Do general startup initialization here.
            document.addEventListener("visibilitychange", onVisibilityChanged);

            // Initialize interstitial ad support. 
            startInterstitial();

            args.setPromise(WinJS.UI.processAll());
        }

        isFirstActivation = false;
    };

    function onVisibilityChanged(args) {
        if (!document.hidden) {
            // TODO: The app just became visible. This may be a good time to refresh the view.
        }
    }

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
        // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
        // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    };

    app.start();

})();

Advertising samples on GitHub

Interstitial ad sample code in JavaScript

Code example

index.html

script.js

main.js

Feedback

Feedback

Additional resources

Interstitial ad sample code in JavaScript

Code example

index.html

script.js

main.js

Related topics

Feedback

Feedback

Additional resources