Beispielcode für Interstitialwerbung in JavaScript
Warnung
Ab dem 1. Juni 2020 wird die Microsoft Ad Monetization-Plattform für Windows UWP-Apps abgeschaltet. Weitere Informationen
Dieses Thema enthält den vollständigen Beispielcode für eine einfache JavaScript- und HTML-Universelle Windows-Plattform -App (UWP), die eine Interstitialanzeige anzeigt. Schrittweise Anleitungen, die zeigen, wie Sie Ihr Projekt für die Verwendung dieses Codes konfigurieren, finden Sie unter Interstitialanzeigen. Ein vollständiges Beispielprojekt finden Sie in den Werbebeispielen auf GitHub.
Codebeispiel
Dieser Abschnitt zeigt den Inhalt der HTML- und JavaScript-Dateien in einer einfachen App, die eine Interstitialanzeige anzeigt. Um diese Beispiele zu verwenden, kopieren Sie diesen Code in ein JavaScript-WinJS-App-Projekt (Universelle Windows-App) in Visual Studio.
Diese Beispiel-App verwendet zwei Schaltflächen, um eine Interstitialanzeige anzufordern und dann zu starten. Die von Visual Studio generierten main.js- und index.html-Dateien wurden geändert und unten angezeigt. Die unten gezeigte script.js Datei enthält den größten Teil des Codes im Beispiel, und Sie sollten diese Datei dem Js-Ordner in Ihrem Projekt hinzufügen.
Ersetzen Sie die Werte und applicationId adUnitId Variablen durch Livewerte aus Partner Center, bevor Sie Ihre App an den Store übermitteln. Weitere Informationen finden Sie unter Einrichten von Anzeigeneinheiten in Ihrer App.
Hinweis
Um dieses Beispiel so zu ändern, dass anstelle einer Interstitialvideoanzeige eine Interstitialbanneranzeige angezeigt wird, übergeben Sie den Wert InterstitialAdType.display an den ersten Parameter der RequestAd-Methode anstelle von InterstitialAdType.video. Weitere Informationen finden Sie unter Interstitialanzeigen.
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();
})();
Zugehörige Themen