Gestion des erreurs dans la procédure pas à pas pour JavaScript

Cette procédure pas à pas montre comment intercepter les erreurs liées aux publicités dans votre application JavaScript. Cette procédure pas à pas utilise un AdControl pour afficher une bannière publicitaire, mais les concepts généraux qu’il présente s’appliquent également aux publicités interstitielles et aux publicités natives.

Ces exemples supposent que vous disposez d’une application JavaScript qui contient un AdControl. Pour obtenir des instructions pas à pas qui montrent comment ajouter un AdControl à votre application, consultez AdControl dans HTML 5 et JavaScript. Pour obtenir un exemple de projet complet qui montre comment ajouter des bannières publicitaires à une application JavaScript/HTML, consultez les [exemples publicitaires sur GitHub]https://github.com/microsoft/Windows-universal-samples/tree/b1cb20f191d3fd99ce89df50c5b7d1a6e2382c01/archived/Advertising).

1. Dans le fichier default.html, ajoutez une valeur pour l’événement onErrorOccurred où vous définissez les options data-win-options dans la div pour AdControl. Recherchez le code suivant dans le fichier default.html.

   <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
   </div>
   

   Après l’attribut adUnitId , ajoutez la valeur de l’événement onErrorOccurred .

   <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test', onErrorOccurred: errorLogger}">
   

2. Créez une div qui affiche du texte afin que vous puissiez voir les messages générés. Pour ce faire, ajoutez le code suivant après le div pour myAd.

   <div style="position:absolute; width:100%; height:130px; top:300px; left:0px">
       <b>Ad Events</b><br />
       <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
   </div>
   

3. Créez un AdControl qui déclenchera un événement d’erreur. Il ne peut y avoir qu’un seul ID d’application pour tous les objets AdControl d’une application. Par conséquent, la création d’un autre ID d’application déclenche une erreur lors de l’exécution. Pour ce faire, après les sections div précédentes que vous avez ajoutées, ajoutez le code suivant au corps de la page default.html.

   <!-- Because only one applicationId can be used, the following ad control will fire an error event. -->
   <div id="liveAd" style="position: absolute; top:500px; left:0px; width:480px; height:80px"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: '00000000-0000-0000-0000-000000000000', adUnitId: 'test', onErrorOccurred: errorLogger }" >
   </div>
   

4. Dans le fichier default.js du projet, après la fonction d’initialisation par défaut, vous allez ajouter le gestionnaire d’événements pour errorLogger. Faites défiler jusqu’à la fin du fichier et, après le dernier point-virgule, vous allez placer le code suivant.

   WinJS.Utilities.markSupportedForProcessing(
   window.errorLogger = function (sender, evt) {
       adEvents.innerHTML = (new Date()).toLocaleTimeString() + ": " +
       sender.element.id + " error: " + evt.errorMessage + " error code: " +
       evt.errorCode + "<br>" + adEvents.innerHTML;
       console.log("errorhandler hit. \n");
   });
   

5. Générez et exécutez le fichier. Vous verrez la publicité d’origine de l’exemple d’application que vous avez créée précédemment et du texte sous cette publicité décrivant l’erreur. Vous ne verrez pas la publicité avec l’ID de liveAd.

Rubriques connexes

• Exemples de publicité sur GitHub