Guía de solución de problemas de HTML y JavaScript

Artículo
07/13/2023

Advertencia

A partir del 1 de junio de 2020, se apagará la plataforma de monetización de Microsoft Ad para aplicaciones para UWP de Windows. Más información

En este tema encontrarás soluciones a problemas comunes de desarrollo con las bibliotecas de Microsoft Advertising en aplicaciones de JavaScript y HTML.

HTML
JavaScript

HTML

AdControl no aparece

Asegúrate de que la funcionalidad Internet (Client) esté seleccionada en Package.appxmanifest.
Asegúrate de que la referencia de JavaScript esté presente. Sin la referencia de ad.js en la sección <head> (después de la referencia de default.js), AdControl no podrá mostrarse y se producirá un error durante la compilación.
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```
Comprueba el id. de aplicación y el id. de unidad de anuncios. Estos identificadores deben coincidir con el identificador de aplicación y el identificador de unidad de anuncio que obtuvo en el Centro de partners. Para obtener más información, consulta Configurar unidades de anuncios en la aplicación.
```
<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>
```

Comprueba las propiedades height y width. Estos deben establecerse en uno de los tamaños de anuncio admitidos para anuncios de banner.

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

Comprueba el posicionamiento de elementos. AdControl debe estar dentro del área visible.

Compruebe la propiedad visibility . Esta propiedad no debe establecerse en "collapsed" ni "hidden". Esta propiedad puede establecerse en línea (como se muestra a continuación) o en una hoja de estilos externa.

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

Comprueba la propiedad position. La propiedad "position" debe establecerse en un valor adecuado en función de las otras propiedades del elemento (por ejemplo, los márgenes en el elemento primario y el índice z). Esta propiedad puede establecerse en línea (como se muestra a continuación) o en una hoja de estilos externa.
```
<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>
```

Comprueba la propiedad z-index. La propiedad z-index debe establecerse en un valor lo suficiente alto para que AdControl siempre aparezca encima de otros elementos. Esta propiedad puede establecerse en línea (como se muestra a continuación) o en una hoja de estilos externa.

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

Comprueba las hojas de estilos externas. Si las propiedades en el elemento AdControl se establecen mediante una hoja de estilos externa, asegúrate de todas las propiedades anteriores se establezcan correctamente.

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

Comprueba el elemento primario de AdControl. Si AdControl reside en un elemento primario, el elemento primario debe estar activo y 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>

Asegúrate de que AdControl no esté oculto en la ventanilla. AdControl debe ser visible para que los anuncios se muestren correctamente.
Los valores activos para ApplicationId y AdUnitId no deben probarse en el emulador. Para asegurarse de que AdControl funciona según lo previsto, use los valores de prueba para ApplicationId y AdUnitId.

La caja negra parpadea y desaparece

Vuelve a comprobar todos los pasos de la sección AdControl no aparece anterior.

Controla el evento onErrorOccurred y usa el mensaje que se pasa al controlador de eventos para determinar si se produjo un error y qué tipo de error se ha producido. Para leer más detalles, consulta Error handling in JavaScript walkthrough (Tutorial de control de errores en 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>

El error más común que provoca una caja negra es "No ad available". Este error significa que no hay ningún anuncio disponible para devolver desde la solicitud.

AdControl se comporta con normalidad. De manera predeterminada, AdControl se contraerá cuando no pueda mostrar un anuncio. Si otros elementos son elementos secundarios del mismo elemento principal, pueden moverse para rellenar el espacio de AdControl contraído y expandirse cuando se realice la siguiente solicitud.

Los anuncios no se actualizan

Compruebe la propiedad isAutoRefreshEnabled . Esta propiedad opcional está establecida en true de manera predeterminada. Cuando se establece en false, se debe usar el método refresh para recuperar otro anuncio.

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

Comprueba las llamadas al método refresh. Al usar la actualización automática, la actualización no se puede usar para recuperar otro anuncio. Al usar la actualización manual, debe llamarse a refresh solo después de un mínimo de 30 a 60 segundos, en función de la conexión de datos actual del dispositivo.

En este ejemplo se muestra cómo usar el método refresh. El siguiente código HTML muestra un ejemplo de cómo crear instancias de AdControl con isAutoRefreshEnabled establecido en 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>

En este ejemplo se demuestra cómo usar la función refresh.

args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

AdControl se comporta con normalidad. A veces el mismo anuncio aparecerá más de una vez en una fila, lo que da la apariencia de que los anuncios no se actualizan.

JavaScript

AdControl no aparece

Asegúrate de que la funcionalidad Internet (Client) esté seleccionada en Package.appxmanifest.

Asegúrate de crear la instancia de AdControl. Si no se creó la instancia de AdControl, no estará disponible.

Los siguientes fragmentos de código muestran un ejemplo de creación de instancias de AdControl. Este código HTML muestra un ejemplo de cómo configurar la interfaz de usuario para 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>

El siguiente código de JavaScript muestra un ejemplo de creación de instancias de 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 {
            ...
        }
    }
}

Comprueba el elemento primario. El div> primario< debe estar asignado, activo y visible correctamente.

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

Comprueba el id. de aplicación y el id. de unidad de anuncios. Estos identificadores deben coincidir con el identificador de aplicación y el identificador de unidad de anuncio que obtuvo en el Centro de partners. Para obtener más información, consulta Configurar unidades de anuncios en la aplicación.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
Comprueba el elemento primario de AdControl. El elemento primario debe estar activo y visible.
Los valores activos para ApplicationId y AdUnitId no deben probarse en el emulador. Para asegurarse de que AdControl funciona según lo previsto, use los valores de prueba para ApplicationId y AdUnitId.

La caja negra parpadea y desaparece

Vuelve a comprobar todos los pasos en la sección AdControl no aparece.
Controla el evento onErrorOccurred y usa el mensaje que se pasa al controlador de eventos para determinar si se produjo un error y qué tipo de error se ha producido. Para leer más detalles, consulta Error handling in JavaScript walkthrough (Tutorial de control de errores en JavaScript).

En este ejemplo se muestra cómo implementar un controlador de error que informa mensajes de error. Este fragmento de código HTML proporciona un ejemplo de cómo configurar la interfaz de usuario para mostrar mensajes de error.
```
<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>
```
En este ejemplo se muestra cómo crear instancias de AdControl. Esta función se insertará en el archivo app.onactivated.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});                
myAdControl.onErrorOccurred = myAdError;
```
En este ejemplo se muestra cómo informar de errores. Esta función se insertará debajo de la función automática en el archivo 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;
    }
);
```
El error más común que provoca una caja negra es "No ad available". Este error significa que no hay ningún anuncio disponible para devolver desde la solicitud.
AdControl se comporta con normalidad. A veces el mismo anuncio aparecerá más de una vez en una fila, lo que da la apariencia de que los anuncios no se actualizan.

Los anuncios no se actualizan

Comprueba si la propiedad IsAutoRefreshEnabled de tu AdControl está establecida en false. De forma predeterminada, esta propiedad opcional se establece en true. Cuando se establece en false, se debe usar el método Refresh para recuperar otro anuncio.

Compruebe las llamadas al método Refresh . Al usar la actualización automática (IsAutoRefreshEnabled es true), no puede usarse Refresh para recuperar otro anuncio. Al usar la actualización manual (IsAutoRefreshEnabled es false), debe llamarse a Refresh solo después de un mínimo de 30 a 60 segundos, en función de la conexión de datos actual del dispositivo.

En este ejemplo se muestra cómo crear el elemento div para 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>

En este ejemplo se muestra cómo usar la función 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 comporta con normalidad. A veces el mismo anuncio aparecerá más de una vez en una fila, lo que da la apariencia de que los anuncios no se actualizan.

Guía de solución de problemas de HTML y JavaScript

HTML

AdControl no aparece

La caja negra parpadea y desaparece

Los anuncios no se actualizan

JavaScript

AdControl no aparece

La caja negra parpadea y desaparece

Los anuncios no se actualizan

Comentarios

Comentarios

Recursos adicionales