Guide de résolution des problèmes pour HTML et JavaScript

Article
07/13/2023

Avertissement

À compter du 1er juin 2020, la plateforme de monétisation Microsoft Ad pour les applications Windows UWP sera arrêtée. En savoir plus

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.

HTML
JavaScript

HTML

AdControl invisible

Assurez-vous que la fonctionnalité Internet (client) est sélectionnée dans le fichier Package.appxmanifest.
Vérifiez la présence des informations de référence JavaScript. 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.
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```
Vérifiez l’ID de l’application et l’ID d’unité publicitaire. Ces ID doivent correspondre à l’ID d’application et à l’ID d’unité publicitaire que vous avez obtenus dans l’Espace partenaires. Pour plus d’informations, voir Configurer des unités publicitaires dans votre application.
```
<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>
```

Vérifiez les propriétés height et width. Celles-ci doivent être définies sur l’une des tailles d’annonces prises en charge pour les bannières publicitaires.

<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>

Vérifiez la position des éléments. Le contrôle AdControl doit se situer à l’intérieur de la zone d’affichage.

Vérifiez la propriété de visibilité . Cette propriété ne doit pas être définie sur collapsed ou hidden. Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.

<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>

Vérifiez la propriété position. 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). Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.
```
<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>
```

Vérifiez la propriété z-index. 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. Cette propriété peut être incluse (comme illustré ci-dessous) ou définie dans une feuille de style externe.

<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>

Vérifiez les feuilles de style externes. 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.

<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>

Vérifiez le parent du AdControl. Si le AdControl réside dans un élément parent, ce dernier doit être actif et 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>

Vérifiez que le AdControl n’est pas masqué dans la fenêtre d’affichage. Le AdControl doit être visible afin que les publicités s’affichent correctement.
Les valeurs dynamiques des paramètres ApplicationId et AdUnitId ne doivent pas être testées dans l’émulateur. Pour vous assurer que AdControl fonctionne comme prévu, utilisez les valeurs de test pour ApplicationId et AdUnitId.

Une boîte noire clignote et disparaît

Vérifiez toutes les étapes indiquées dans la section précédente AdControl invisible.

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. Pour plus d’informations, voir Gestion des erreurs dans la procédure pas à pas pour JavaScript.

<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 ». Cette erreur signifie qu’aucune publicité n’est disponible pour être retourné à partir de la demande.

Le contrôle AdControl se comporte normalement. Par défaut, le AdControl est réduit s’il ne peut pas afficher de publicité. 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.

Non-actualisation des publicités

Vérifiez la propriété isAutoRefreshEnabled. Par défaut, cette propriété facultative est définie sur true. Lorsque la valeur est false, la méthode refresh doit être utilisée pour récupérer une autre publicité.

<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>

Vérifiez les appels à la méthode refresh. Lorsque vous utilisez l’actualisation automatique, l’actualisation ne peut pas être utilisée pour récupérer une autre publicité. Lorsque vous utilisez l’actualisation manuelle, l’actualisation doit être appelée uniquement après un minimum de 30 à 60 secondes, selon la connexion de données actuelle de l’appareil.

Cet exemple montre comment utiliser la méthode refresh. Le code HTML suivant montre un exemple d’instanciation du contrôle AdControl avec la propriété isAutoRefreshEnabled définie sur 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.
```
args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);
```
Le contrôle AdControl se comporte normalement. 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.

JavaScript

AdControl invisible

Assurez-vous que la fonctionnalité Internet (client) est sélectionnée dans le fichier Package.appxmanifest.

Vérifiez que le contrôle AdControl est instancié. Si AdControl n’est pas instancié. c’est qu’il n’est pas disponible.

Les extraits de code suivants illustrent un exemple d’instanciation du contrôle AdControl. Le code HTML suivant montre un exemple de configuration de l’interface utilisateur pour le contrôle 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.

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 {
            ...
        }
    }
}

Vérifiez l’élément parent. La div> parente< doit être correctement affectée, active et visible.

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

Vérifiez l’ID de l’application et l’ID d’unité publicitaire. Ces ID doivent correspondre à l’ID d’application et à l’ID d’unité publicitaire que vous avez obtenus dans l’Espace partenaires. Pour plus d’informations, voir Configurer des unités publicitaires dans votre application.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
Vérifiez l’élément parent du AdControl. Le parent doit être actif et visible.
Les valeurs dynamiques des paramètres ApplicationId et AdUnitId ne doivent pas être testées dans l’émulateur. Pour vous assurer que AdControl fonctionne comme prévu, utilisez les valeurs de test pour ApplicationId et AdUnitId.

Une boîte noire clignote et disparaît

Vérifiez toutes les étapes indiquées dans la section AdControl invisible.
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. Pour plus d’informations, voir Gestion des erreurs dans la procédure pas à pas pour JavaScript.

Cet exemple montre comment implémenter un gestionnaire d’erreurs signalant des messages d’erreur. Cet extrait de code HTML fournit un exemple de configuration de l’interface utilisateur pour afficher les messages d’erreur.
```
<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. Cette fonction est insérée dans le fichier app.onactivated.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});                
myAdControl.onErrorOccurred = myAdError;
```
Cet exemple illustre le signalement des erreurs. Cette fonction est insérée sous la fonction exécutée automatiquement dans le fichier default.js.
```
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 ». Cette erreur signifie qu’aucune publicité n’est disponible pour être retourné à partir de la demande.
Le contrôle AdControl se comporte normalement. 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.

Non-actualisation des publicités

Vérifiez si la propriété IsAutoRefreshEnabled de votre AdControl est définie sur false. Par défaut, cette propriété facultative a la valeur true. Lorsque la valeur est false, la méthode Refresh doit être utilisée pour récupérer une autre publicité.
Vérifiez les appels à la méthode Refresh . 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é. 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.

Cet exemple montre comment créer l’élément div pour le contrôle 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.
```
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)
    })
);
```
Le contrôle AdControl se comporte normalement. 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.

Partager via

Guide de résolution des problèmes pour HTML et JavaScript

HTML

AdControl invisible

Une boîte noire clignote et disparaît

Non-actualisation des publicités

JavaScript

AdControl invisible

Une boîte noire clignote et disparaît

Non-actualisation des publicités

Commentaires

Commentaires

Ressources supplémentaires