JavaScript의 중간 광고 샘플 코드

  • 아티클

경고

2020년 6월 1일부로 Windows UWP 앱용 Microsoft 광고 수익 창출 플랫폼이 종료됩니다. 더 알아보기

이 항목은 중간 광고를 표시하는 기본 JavaScript 및 HTML UWP(Universal Windows Platform) 앱에 대한 전체 샘플 코드를 제공합니다. 이 코드를 사용하도록 프로젝트를 구성하는 방법을 보여 주는 단계별 지침은 중간 광고를 참조하세요. 전체 샘플 프로젝트는 GitHub의 광고 샘플을 참조하세요.

코드 예시

이 섹션은 중간 광고를 보여주는 기본 앱에 있는 HTML 및 JavaScript 파일의 콘텐츠를 보여 줍니다. 이러한 예시를 사용하려면 이 코드를 Visual Studio의 JavaScript WinJS App (Universal Windows) 프로젝트로 복사합니다.

이 샘플 앱은 두 개의 버튼을 사용하여 중간 광고 요청을 한 뒤 시작합니다. Visual Studio에서 생성된 main.js 및 index.html 파일은 수정되었으며 아래에 나타나 있습니다. 아래에 나타난 script.js 파일에는 샘플의 코드 대부분이 포함되어 있으며, 이 파일을 프로젝트의 js 폴더에 추가해야 합니다.

앱을 Store에 제출하기 전에 파트너 센터에서 applicationId 및 adUnitId 변수의 값을 라이브 값으로 바꿉니다. 자세한 정보는 앱에서 광고 단위 설정하기를 참조하세요.

참고

동영상 중간 광고 대신 배너 중간 광고를 표시하도록 이 예시를 변경하려면 RequestAd 메서드의 첫 번째 매개 변수에 InterstitialAdType.video 대신 InterstitialAdType.display 값을 전달합니다. 자세한 정보는 중간 광고를 참조하세요.

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

})();