Exemple de code pour spot publicitaire en JavaScript
Avertissement
Depuis le 1er juin 2020, la plateforme Microsoft Ad Monetization pour les applications Windows UWP sera arrêtée. En savoir plus
Cette rubrique fournit l’exemple de code complet d’une application de base JavaScript et HTML plateforme Windows universelle (UWP) qui affiche une publicité interstitielle. Pour obtenir des instructions pas à pas qui montrent comment configurer votre projet pour utiliser ce code, consultez les publicités interstitiales. Pour obtenir un exemple de projet complet, consultez les exemples de publicité sur GitHub.
Exemple de code
Cette section présente le contenu des fichiers HTML et JavaScript dans une application de base qui affiche une publicité interstitielle. Pour utiliser ces exemples, copiez ce code dans un projet d’application WinJS JavaScript (Windows universel) dans Visual Studio.
Cet exemple d’application utilise deux boutons pour demander, puis lancer une publicité interstitiale. Les fichiers main.js et index.html générés par Visual Studio ont été modifiés et sont présentés ci-dessous. Le fichier script.js indiqué ci-dessous contient la plupart du code dans l’exemple, et vous devez ajouter ce fichier au dossier js de votre projet.
Remplacez les valeurs des applicationId variables et adUnitId des valeurs actives de l’Espace partenaires avant de soumettre votre application au Windows Store. Pour plus d’informations, consultez Configurer des unités publicitaires dans votre application.
Remarque
Pour modifier cet exemple pour afficher une bannière publicitaire interstitielle au lieu d’une publicité vidéo interstitiale, passez la valeur InterstitialAdType.display au premier paramètre de la méthode RequestAd au lieu d’InterstitialAdType.video. Pour plus d’informations, consultez publicités interstitiales.
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();
})();
Rubriques connexes