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

Article
07/05/2024

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 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 n’apparaît pas

Vérifiez que la fonctionnalité Internet (client) est sélectionnée dans Package.appxmanifest.
Vérifiez que la référence JavaScript est présente. Sans la référence ad.js dans la <section en tête> (après la référence default.js), adControl ne peut pas s’afficher et une erreur se produit pendant la génération.
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```
Vérifiez l’ID d’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, consultez 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 de hauteur et de largeur . Celles-ci doivent être définies sur l’une des tailles de publicité 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 le positionnement de l’élément. AdControl doit se trouver à l’intérieur de la zone visible.

Vérifiez la propriété de visibilité. Cette propriété ne doit pas être définie sur réduite ou masquée. Cette propriété peut être définie inline (comme indiqué ci-dessous) ou 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, des marges dans l’élément parent et z-index). Cette propriété peut être définie inline (comme indiqué ci-dessous) ou 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 suffisamment élevée pour que AdControl apparaisse toujours sur d’autres éléments. Cette propriété peut être définie inline (comme indiqué ci-dessous) ou 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 sur l’élément AdControl via une feuille de style externe, vérifiez que toutes les propriétés 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 d’AdControl. Si AdControl réside dans un élément parent, le parent 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 AdControl n’est pas masqué dans la fenêtre d’affichage. AdControl doit être visible pour que les publicités s’affichent correctement.
Les valeurs actives pour 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.

Clignotements de boîte noire et disparaît

Vérifiez toutes les étapes de la section AdControl précédente.

Gérez l’événement onErrorOccurred et utilisez le message transmis au gestionnaire d’événements pour déterminer si une erreur s’est produite et quel type d’erreur a été levée. Vous trouverez plus d’informations dans la gestion des erreurs dans la procédure pas à pas 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 qui provoque une boîte noire est « Aucune publicité disponible ». Cette erreur signifie qu’aucune publicité n’est disponible pour retourner à partir de la demande.

AdControl se comporte normalement. Par défaut, AdControl s’effondre lorsqu’il ne peut pas afficher une publicité. Si d’autres éléments sont des enfants du même parent, ils peuvent se déplacer pour combler l’écart de l’AdControl réduit et développer lorsque la requête suivante est effectuée.

Publicités non actualisées

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 d’actualisation 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 d’actualisation. 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 en fonction de la connexion de données actuelle de l’appareil.

Cet exemple montre comment utiliser la méthode d’actualisation. Le code HTML suivant montre un exemple d’instanciation d’AdControl avec isAutoRefreshEnabled défini 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>
```
L’exemple Theis montre comment utiliser la fonction d’actualisation.
```
args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);
```
AdControl se comporte normalement. Parfois, la même publicité apparaît plusieurs fois dans une ligne donnant l’apparence que les publicités ne sont pas actualisées.

JavaScript

AdControl n’apparaît pas

Vérifiez que la fonctionnalité Internet (client) est sélectionnée dans Package.appxmanifest.

Vérifiez que AdControl est instancié. Si AdControl n’est pas instancié. elle ne sera pas disponible.

Les extraits de code suivants montrent un exemple d’instanciation d’AdControl. Ce code HTML montre un exemple de configuration de l’interface utilisateur pour 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 montre un exemple d’instanciation d’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> parent <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 d’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, consultez 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 de AdControl. Le parent doit être actif et visible.
Les valeurs actives pour 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.

Clignotements de boîte noire et disparaît

Vérifiez toutes les étapes de la section AdControl qui n’apparaît pas.
Gérez l’événement onErrorOccurred et utilisez le message transmis au gestionnaire d’événements pour déterminer si une erreur s’est produite et quel type d’erreur a été levée. Vous trouverez plus d’informations dans la gestion des erreurs dans la procédure pas à pas JavaScript.

Cet exemple montre comment implémenter un gestionnaire d’erreurs qui signale 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 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 montre comment signaler des erreurs. Cette fonction est insérée sous la fonction en cours d’exécution 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 qui provoque une boîte noire est « Aucune publicité disponible ». Cette erreur signifie qu’aucune publicité n’est disponible pour retourner à partir de la demande.
AdControl se comporte normalement. Parfois, la même publicité apparaît plusieurs fois dans une ligne donnant l’apparence que les publicités ne sont pas actualisées.

Publicités non actualisées

Vérifiez si la propriété IsAutoRefreshEnabled de votre AdControl a la valeur false. 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é.

Vérifiez les appels à la méthode Refresh . Lorsque vous utilisez l’actualisation automatique (IsAutoRefreshEnabled a la valeur true), l’actualisation ne peut pas être utilisée pour récupérer une autre publicité. Lorsque vous utilisez l’actualisation manuelle (IsAutoRefreshEnabled est false), l’actualisation 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 la div pour 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)
    })
);

AdControl se comporte normalement. Parfois, la même publicité apparaît plusieurs fois dans une ligne donnant l’apparence que les publicités ne sont pas actualisées.

Partager via

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

HTML

AdControl n’apparaît pas

Clignotements de boîte noire et disparaît

Publicités non actualisées

JavaScript

AdControl n’apparaît pas

Clignotements de boîte noire et disparaît

Publicités non actualisées

Commentaires

Ressources supplémentaires