Guide de résolution des problèmes pour HTML et JavaScriptHTML and JavaScript troubleshooting guide

Avertissement

Depuis le 1er juin 2020, la plateforme de monétisation Microsoft AD pour les applications Windows UWP sera arrêtée.As of June 1, 2020, the Microsoft Ad Monetization platform for Windows UWP apps will be shut down. En savoir plusLearn more

Cette rubrique contient des solutions aux problèmes de développement courants liés aux bibliothèques de publicités Microsoft dans les applications JavaScript/HTML.This topic contains solutions to common development issues with the Microsoft advertising libraries in JavaScript/HTML apps.

HTMLHTML

AdControl invisibleAdControl not appearing

  1. Assurez-vous que la fonctionnalité Internet (client) est sélectionnée dans le fichier Package.appxmanifest.Ensure that the Internet (Client) capability is selected in Package.appxmanifest.

  2. Vérifiez la présence des informations de référence JavaScript.Ensure the JavaScript reference is present. Sans la référence ad.js dans la section <head> (après la référence default.js), le contrôle AdControl n’est pas en mesure de s’afficher, et une erreur se produit lors de la génération.Without the ad.js reference in the <head> section (after the default.js reference) the AdControl will be unable to display and an error will occur during build.

    <head>
        ...
        <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
        ...
    </head>
    
  3. Vérifiez l’ID de l’application et l’ID d’unité publicitaire.Check the application ID and ad unit ID. Ces ID doivent correspondre à l’ID d’application et à l’ID d’unité Active Directory que vous avez obtenus dans l’espace partenaires.These IDs must match the application ID and ad unit ID that you obtained in Partner Center. Pour plus d’informations, voir Configurer des unités publicitaires dans votre application.For more information, see Set up ad units in your app.

    <div id="myAd" style="position: absolute; top: 50px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  4. Vérifiez les propriétés height et width.Check the height and width properties. Celles-ci doivent être définies sur l’une des tailles de publicités prises en charge pour les bannières publicitaires.These must be set to one of the supported ad sizes for banner ads.

    <div id="myAd" style="position: absolute; top: 50px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  5. Vérifiez la position des éléments.Check the element positioning. Le contrôle AdControl doit se situer à l’intérieur de la zone d’affichage.The AdControl must be inside the viewable area.

  6. Vérifiez la propriété Visibility .Check the visibility property. Cette propriété ne doit pas être définie sur collapsed ou hidden.This property must not be set to collapsed or hidden. Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.This property can be set inline (as shown below) or in an external style sheet.

    <div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                          left: 500px; width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  7. Vérifiez la propriété position.Check the position property. La propriété position doit être définie sur une valeur appropriée en fonction des autres propriétés de l’élément (par exemple, les marges dans l’élément parent et l’index z).The position property must be set to an appropriate value depending on the element’s other properties (for example, margins in parent element and z-index). Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.This property can be set inline (as shown below) or in an external style sheet.

    <div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                          left: 500px; width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  8. Vérifiez la propriété z-index.Check the z-index property. La propriété z-index doit être définie sur une valeur suffisamment élevée pour que le contrôle AdControl apparaisse toujours au-dessus des autres éléments.The z-index property must be set high enough so the AdControl always appears on top of other elements. Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.This property can be set inline (as shown below) or in an external style sheet.

    <div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                          left: 500px; width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  9. Vérifiez les feuilles de style externes.Check external style sheets. Si les propriétés sont définies dans l’élément AdControl par le biais d’une feuille de style externe, assurez-vous que toutes les propriétés mentionnées ci-dessus sont correctement définies.If properties are set on the AdControl element through an external style sheet, ensure all of the above properties are correctly set.

    <div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                          left: 500px; width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
    
  10. Vérifiez le parent du AdControl.Check the parent of the AdControl. Si le AdControl réside dans un élément parent, ce dernier doit être actif et visible.If the AdControl resides in a parent element, the parent must be active and visible.

    <div style="position: absolute; width: 500px; height: 500px;">
        <div id="myAd" style="position: relative; top: 0px; left: 100px;
                              width: 250px; height: 250px; z-index: 1"
             data-win-control="MicrosoftNSJS.Advertising.AdControl"
             data-win-options="{applicationId: 'ApplicationID',
                                adUnitId: 'AdUnitID'}">
        </div>
    </div>
    
  11. Vérifiez que le AdControl n’est pas masqué dans la fenêtre d’affichage.Ensure the AdControl is not hidden from the viewport. Le AdControl doit être visible afin que les publicités s’affichent correctement.The AdControl must be visible for ads to display properly.

  12. Les valeurs dynamiques des paramètres ApplicationId et AdUnitId ne doivent pas être testées dans l’émulateur.Live values for ApplicationId and AdUnitId should not be tested in the emulator. Pour vous assurer que le classe AdControl fonctionne comme prévu, utilisez les valeurs de test pour ApplicationID et AdUnitId.To ensure the AdControl is functioning as expected, use the test values for both ApplicationId and AdUnitId.

  1. Vérifiez toutes les étapes indiquées dans la section précédente AdControl invisible.Double-check all steps in the previous AdControl not appearing section.

  2. Gérez l’événement onErrorOccurred, puis utilisez le message transmis au gestionnaire d’événements pour déterminer si une erreur s’est produite et identifier le type d’erreur levée.Handle the onErrorOccurred event, and use the message that is passed to the event handler to determine whether an error occurred and what type of error was thrown. Pour plus d’informations, voir Gestion des erreurs dans la procédure pas à pas pour JavaScript.More details can be found in Error handling in JavaScript walkthrough.

    <div id="myAd" style="position: absolute; top: 0px; left: 0px;
                          width: 728px; height: 90px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID',
                            onErrorOccurred: errorLogger}">
    </div>
    <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>
    

    L’erreur la plus courante provoquant une boîte noire est la suivante : « Aucune publicité disponible ».The most common error that causes a black box is “No ad available.” Cette erreur signifie qu’aucune publicité n’est disponible pour être retourné à partir de la demande.This error means there is no ad available to return from the request.

  3. Le contrôle AdControl se comporte normalement.The AdControl is behaving normally. Par défaut, le AdControl est réduit s’il ne peut pas afficher de publicité.By default, the AdControl will collapse when it cannot display an ad. Si d’autres éléments sont des enfants du même parent, ils peuvent être déplacés pour combler le vide du contrôle AdControl réduit, et développés à la prochaine demande.If other elements are children of the same parent they may move to fill the gap of the collapsed AdControl and expand when the next request is made.

Non-actualisation des publicitésAds not refreshing

  1. Vérifiez la propriété isAutoRefreshEnabled.Check the isAutoRefreshEnabled property. Par défaut, cette propriété facultative est définie sur true.By default, this optional property is set to true. Lorsque la valeur est false, la méthode Refresh doit être utilisée pour récupérer une autre publicité.When set to false, the refresh method must be used to retrieve another ad.

    <div id="myAd" style="position: absolute; top: 0px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{ applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID',
                            onErrorOccurred: errorLogger,
                            isAutoRefreshEnabled: true}">
    </div>
    
  2. Vérifiez les appels à la méthode refresh.Check calls to the refresh method. Lors de l’utilisation de l’actualisation automatique, l' actualisation ne peut pas être utilisée pour récupérer une autre publicité.When using automatic refresh, refresh cannot be used to retrieve another ad. Lors de l’utilisation d’une actualisation manuelle, l' actualisation ne doit être appelée qu’après un minimum de 30 à 60 secondes, en fonction de la connexion de données actuelle de l’appareil.When using manual refresh, refresh should be called only after a minimum of 30 to 60 seconds depending on the device’s current data connection.

    Cet exemple montre comment utiliser la méthode refresh.This example demonstrates how to use the refresh method. Le code HTML suivant montre un exemple d’instanciation du contrôle AdControl avec la propriété isAutoRefreshEnabled définie sur false.The following HTML code shows an example of how to instantiate the AdControl with isAutoRefreshEnabled set to false.

    <div id="myAd" style="position: absolute; top: 0px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{ applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID',
                            onErrorOccurred: errorLogger,
                            isAutoRefreshEnabled: false}">
    </div>
    

    Cet exemple montre comment utiliser la fonction refresh.Theis example demonstrates how to use the refresh function.

    args.setPromise(WinJS.UI.processAll()
        .then(function (args) {
            window.setInterval(function()
            {
                document.getElementById("myAd").winControl.refresh();
            }, 60000)
        })
    );
    
  3. Le contrôle AdControl se comporte normalement.The AdControl is behaving normally. Parfois, une même publicité s’affiche plusieurs fois dans une ligne, ce qui donne l’impression que les publicités ne sont pas actualisées.Sometimes the same ad will appear more than once in a row giving the appearance that ads are not refreshing.

JavaScriptJavaScript

AdControl invisibleAdControl not appearing

  1. Assurez-vous que la fonctionnalité Internet (client) est sélectionnée dans le fichier Package.appxmanifest.Ensure that the Internet (Client) capability is selected in Package.appxmanifest.

  2. Vérifiez que le contrôle AdControl est instancié.Ensure the AdControl is instantiated. Si le classe AdControl n’est pas instancié.If the AdControl is not instantiated. c’est qu’il n’est pas disponible.it will not be available.

    Les extraits de code suivants illustrent un exemple d’instanciation du contrôle AdControl.The following snippets show an example of instantiating the AdControl. Le code HTML suivant montre un exemple de configuration de l’interface utilisateur pour le contrôle AdControlThis HTML code shows an example of setting up the UI for the AdControl

    <div id="myAd" style="position: absolute; top: 0px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl">
    </div>
    

    Le code JavaScript suivant illustre un exemple d’instanciation du contrôle AdControl.The following JavaScript code shows an example of instantiating the AdControl

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
                    activation.ApplicationExecutionState.terminated)
            {
                var adDiv = document.getElementById("myAd");
                var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
                {
                    applicationId: "{ApplicationID}",
                    adUnitId: "{AdUnitID}"
                 });                
                 myAdControl.onErrorOccurred = myAdError;
            } else {
                ...
            }
        }
    }
    
  3. Vérifiez l’élément parent.Check the parent element. La ** < balise > div** parente doit être correctement assignée, active et visible.The parent <div> must be correctly assigned, active, and visible.

    var adDiv = document.getElementById("myAd");
    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
        applicationId: "{ApplicationID}",
        adUnitId: "{AdUnitID}"
    });  
    
  4. Vérifiez l’ID de l’application et l’ID d’unité publicitaire.Check the application ID and ad unit ID. Ces ID doivent correspondre à l’ID d’application et à l’ID d’unité Active Directory que vous avez obtenus dans l’espace partenaires.These IDs must match the application ID and ad unit ID that you obtained in Partner Center. Pour plus d’informations, voir Configurer des unités publicitaires dans votre application.For more information, see Set up ad units in your app.

    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
        applicationId: "{ApplicationID}",
        adUnitId: "{AdUnitID}"
    });  
    
  5. Vérifiez l’élément parent du AdControl.Check the parent element of the AdControl. Le parent doit être actif et visible.The parent must be active and visible.

  6. Les valeurs dynamiques des paramètres ApplicationId et AdUnitId ne doivent pas être testées dans l’émulateur.Live values for ApplicationId and AdUnitId should not be tested in the emulator. Pour vous assurer que le classe AdControl fonctionne comme prévu, utilisez les valeurs de test pour ApplicationID et AdUnitId.To ensure the AdControl is functioning as expected, use the test values for both ApplicationId and AdUnitId.

  1. Vérifiez toutes les étapes indiquées dans la section AdControl invisible.Double-check all steps in the AdControl not appearing section.

  2. Gérez l’événement onErrorOccurred, puis utilisez le message transmis au gestionnaire d’événements pour déterminer si une erreur s’est produite et identifier le type d’erreur levée.Handle the onErrorOccurred event, and use the message that is passed to the event handler to determine whether an error occurred and what type of error was thrown. Pour plus d’informations, voir Gestion des erreurs dans la procédure pas à pas pour JavaScript.More details can be found in Error handling in JavaScript walkthrough.

    Cet exemple montre comment implémenter un gestionnaire d’erreurs signalant des messages d’erreur.This example demonstrates how to implement an error handler that reports error messages. Cet extrait de code HTML fournit un exemple de configuration de l’interface utilisateur pour afficher les messages d’erreur.This snippet of HTML code provides an example of how to set up the UI to display error messages.

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

    Cet exemple montre comment instancier le contrôle AdControl.This example demonstrates how to instantiate the AdControl. Cette fonction est insérée dans le fichier app.onactivated.This function would be inserted in the app.onactivated file.

    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
    {
        applicationId: "{ApplicationID}",
        adUnitId: "{AdUnitID}"
    });                
    myAdControl.onErrorOccurred = myAdError;
    

    Cet exemple illustre le signalement des erreurs.This example demonstrates how to report errors. Cette fonction est insérée sous la fonction exécutée automatiquement dans le fichier default.js.This function would be inserted below the self-running function in the default.js file.

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

    L’erreur la plus courante provoquant une boîte noire est la suivante : « Aucune publicité disponible ».The most common error that causes a black box is “No ad available.” Cette erreur signifie qu’aucune publicité n’est disponible pour être retourné à partir de la demande.This error means there is no ad available to return from the request.

  3. Le contrôle AdControl se comporte normalement.The AdControl is behaving normally. Parfois, une même publicité s’affiche plusieurs fois dans une ligne, ce qui donne l’impression que les publicités ne sont pas actualisées.Sometimes the same ad will appear more than once in a row giving the appearance that ads are not refreshing.

Non-actualisation des publicitésAds not refreshing

  1. Vérifiez si la propriété IsAutoRefreshEnabled de votre AdControl est définie sur false.Check whether the IsAutoRefreshEnabled property of your AdControl is set to false. Par défaut, cette propriété facultative a la valeur true.By default, this optional property is set to true. Lorsque la valeur est false, la méthode Refresh doit être utilisée pour récupérer une autre publicité.When set to false, the Refresh method must be used to retrieve another ad.

  2. Vérifiez les appels à la méthode Refresh .Check calls to the Refresh method. Si vous utilisez l’actualisation automatique (IsAutoRefreshEnabled est définie sur true), la méthode Refresh ne permet pas de récupérer une autre publicité.When using automatic refresh (IsAutoRefreshEnabled is true), Refresh cannot be used to retrieve another ad. Si vous utilisez l’actualisation manuelle (IsAutoRefreshEnabled est définie sur false), la méthode Refresh doit être appelée uniquement après un minimum de 30 à 60 secondes en fonction de la connexion de données actuelle de l’appareil.When using manual refresh (IsAutoRefreshEnabled is false), Refresh should be called only after a minimum of 30 to 60 seconds depending on the device’s current data connection.

    Cet exemple montre comment créer l’élément div pour le contrôle AdControl.This example demonstrates how to create the div for the AdControl.

    <div id="myAd" style="position: absolute; top: 0px; left: 0px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl">
    </div>
    

    Cet exemple montre comment utiliser la fonction Refresh.This example shows how to use the Refresh function

    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
    {
      applicationId: "{ApplicationID}",
      adUnitId: "{AdUnitID}",
      isAutoRefreshEnabled: false
    });
    ...
    args.setPromise(WinJS.UI.processAll()
        .then(function (args) {
            window.setInterval(function()
            {
                document.getElementById("myAd").winControl.refresh();
            }, 60000)
        })
    );
    
  3. Le contrôle AdControl se comporte normalement.The AdControl is behaving normally. Parfois, une même publicité s’affiche plusieurs fois dans une ligne, ce qui donne l’impression que les publicités ne sont pas actualisées.Sometimes the same ad will appear more than once in a row giving the appearance that ads are not refreshing.