Пример кода межстраничного объявления на JavaScript
Предупреждение
По состоянию на 1 июня 2020 г. платформа Монетизации Microsoft Ad для приложений Windows UWP будет закрыта. Подробнее
В этом разделе представлен полный пример кода для базового приложения JavaScript и HTML-универсальная платформа Windows (UWP), отображающего промежуточное объявление. Пошаговые инструкции по настройке проекта для использования этого кода см . в разделе "Межстраничные объявления". Полный пример проекта см. в примерах рекламы на сайте GitHub.
Пример кода
В этом разделе показано содержимое HTML-файлов и javaScript в базовом приложении, где отображается промежуточное объявление. Чтобы использовать эти примеры, скопируйте этот код в проект приложения WinJS JavaScript (универсальная версия Windows) в Visual Studio.
В этом примере приложения используются две кнопки для запроса и запуска промежуточного объявления. Main.js и index.html файлы, созданные Visual Studio, были изменены и показаны ниже. Файл script.js, показанный ниже, содержит большую часть кода в примере, и этот файл следует добавить в папку js в проекте.
Замените значения и adUnitId переменные динамическими значениями applicationId из Центра партнеров перед отправкой приложения в Магазин. Дополнительные сведения см. в разделе "Настройка рекламных блоков" в приложении.
Примечание.
Чтобы изменить этот пример, чтобы отобразить промежуточное баннерное объявление вместо промежуточного видео, передайте значение InterstitialAdType.display в первый параметр метода RequestAd вместо InterstitialAdType.video. Дополнительные сведения см . в разделе "Межстраничные объявления".
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();
})();
См. также