Compartir a través de

AdControl en HTML 5 y JavaScript

  • Artículo

Advertencia

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

En este tutorial se muestra cómo usar la clase AdControl para mostrar anuncios de banner en una aplicación JavaScript/HTML de Plataforma universal de Windows (UWP) para Windows 10 y Windows 11.

Para obtener un ejemplo de proyecto completo que muestre cómo agregar anuncios en banner a una aplicación JavaScript o HTML, consulta los ejemplos de publicidad en GitHub.

Requisitos previos

Nota

Si ha instalado la versión 10.0.14393 del SDK de Windows 10 o una versión posterior de Windows SDK, también debe instalar la biblioteca winJS. Esta biblioteca solía incluirse en versiones anteriores de Windows SDK para Windows 10, pero a partir de la versión 10.0.14393 del SDK de Windows 10, esta biblioteca debe instalarse por separado.

Integración de un anuncio de banner en la aplicación

  1. En Visual Studio, abre el proyecto o crea uno nuevo.

    Nota

    Si usa un proyecto existente, abra el archivo Package.appxmanifest en el proyecto y asegúrese de que la funcionalidad Internet (cliente) esté seleccionada. Tu aplicación necesita esta funcionalidad para recibir anuncios de prueba y anuncios en directo.

  2. Si el destino del proyecto es Cualquier CPU, actualiza el proyecto para que use una salida de compilación específica por arquitectura (por ejemplo, x86). Si el destino del proyecto es Cualquier CPU, no podrás agregar una referencia a la biblioteca de publicidad de Microsoft correctamente a través de los siguientes pasos. Para obtener más información, consulta Errores de referencia derivados de orientar el proyecto a Cualquier CPU.

  3. Agregue una referencia al SDK de Microsoft Advertising en el proyecto:

    1. En la ventana Explorador de soluciones, haga clic con el botón derecho en Referencias y seleccione Agregar referencia...
    2. En el Administrador de referencias, expande Universal Windows, haz clic en Extensiones y, después, selecciona la casilla junto a Microsoft Advertising SDK for JavaScript (versión 10.0).
    3. En el Administrador de referencias, haz clic en Aceptar.

  4. Abre el archivo index.html (u otro archivo html adecuado para el proyecto).

  5. En la <sección head> , después de las referencias de JavaScript del proyecto de default.css y main.js, agregue la referencia a ad.js.

    <!-- Advertising required references -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>

    Nota

    Esta línea debe colocarse en la <sección principal> después de incluir main.js; de lo contrario, se producirá un error al compilar el proyecto.

  6. Modifique la <sección body> del archivo default.html (u otro archivo HTML según corresponda para el proyecto) para incluir el div para AdControl. Asigne las propiedades applicationId y adUnitId de AdControl a los valores de unidad de anuncio de prueba. Ajuste también el alto y el ancho , por lo que el control es uno de los tamaños de anuncios admitidos para los anuncios de banner.

    Nota

    Cada AdControl tiene una unidad de anuncio correspondiente que usan nuestros servicios para servir anuncios al control, y cada unidad de anuncio consta de un identificador de unidad de anuncios y un identificador de aplicación. En estos pasos, asignará los valores de identificador de unidad de anuncio de prueba y id. de aplicación al control. Estos valores de prueba solo se pueden usar en una versión de prueba de la aplicación. Antes de publicar la aplicación en la Tienda, debes reemplazar estos valores de prueba por valores dinámicos del Centro de partners.

    <div id="myAd" style="position: absolute; top: 50px; 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>

  7. Compila y ejecuta la aplicación para verla con un anuncio.

En el ejemplo siguiente se muestra el index.html completo para una aplicación sencilla.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AdControlExampleApp</title>
    <!-- WinJS references -->
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <!-- AdControlExampleApp references -->
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <!-- Required reference for AdControl -->
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body>
    <div id="myAd" style="position: absolute; top: 50px; 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>
    <p>Content goes here</p>
</body>
</html>

Creación de un objeto AdControl mediante programación en JavaScript

Los pasos anteriores muestran cómo declarar un objeto AdControl en el marcado HTML. Como alternativa, puede crear mediante programación un objeto AdControl mediante JavaScript. En este ejemplo se supone que usa un div existente en el código HTML con el identificador myAd.

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "3f83fe91-d6be-434d-a0ae-7351c5a997f1",
    adUnitId: "test",
});

myAdControl.isAutoRefreshEnabled = false;
myAdControl.onErrorOccurred = myAdError;
myAdControl.onAdRefreshed = myAdRefreshed;
myAdControl.onEngagedChanged = myAdEngagedChanged;

En este ejemplo se supone que ya has declarado los métodos del controlador de eventos llamados myAdError, myAdRefreshed y myAdEngagedChanged.

Si usas este código y no ves anuncios, puedes intentar insertar un atributo position:relative en div que contenga AdControl. Esto invalidará la configuración predeterminada de IFrame. Los anuncios se mostrarán correctamente, a menos que no se muestren debido al valor de este atributo. Ten en cuenta que es posible que las nuevas unidades de anuncios no estén disponibles hasta 30 minutos.

Nota

Los valores applicationId y adUnitId que se muestran en este ejemplo son valores de modo de prueba. Debes reemplazar estos valores por valores dinámicos del Centro de partners antes de enviar la aplicación para su envío.

Lanzamiento de la aplicación con anuncios en directo

  1. Asegúrate de que tu uso de anuncios de banner en tu aplicación sigue nuestras directrices para anuncios de banner.

  2. En el Centro de partners, vaya a la página Anuncios desde la aplicación y cree una unidad de anuncios. Especifica el tipo de unidad de anuncio Banner. Anota el identificador de unidad de anuncio y el identificador de la aplicación.

    Nota

    Los valores de identificador de aplicación para las unidades de anuncios de prueba y las unidades de anuncios para UWP activos tienen formatos diferentes. Los valores de identificador de aplicación de prueba son GUID. Cuando creas una unidad de anuncios de UWP activa en el Centro de partners, el valor del identificador de aplicación de la unidad de anuncios siempre coincide con el id. de la Tienda de la aplicación (un valor de id. de la Tienda de ejemplo es similar a 9NBLGGH4R315).

  3. Opcionalmente, puedes habilitar la mediación de anuncios para AdControl configurando los valores de la sección Configuración de mediación en la página Anuncios desde la aplicación . La mediación de anuncios te permite maximizar tus capacidades de promoción de anuncios y anuncios de anuncios mostrando anuncios de varias redes publicitarias, incluidos anuncios de otras redes publicitarias de pago, como Tabúla y Smaato y anuncios para campañas de promoción de aplicaciones de Microsoft.

  4. En el código, reemplace los valores de unidad de anuncio de prueba (applicationId y adUnitId) por los valores dinámicos que generó en el Centro de partners.

  5. Envía tu aplicación a la Tienda mediante el Centro de partners.

  6. Revise los informes de rendimiento de publicidad en el Centro de partners.

Administrar unidades de anuncios para varios controles de anuncios en la aplicación

Puedes usar varios objetos AdControl en una sola aplicación (por ejemplo, cada página de la aplicación podría hospedar un objeto AdControl diferente). En este escenario, se recomienda asignar una unidad de anuncio diferente a cada control. El uso de unidades de anuncios diferentes para cada control permite configurar por separado las opciones de mediación y obtener datos de informes discretos para cada control. Esto también permite a nuestros servicios optimizar mejor los anuncios que servimos a tu aplicación.

Importante

Puedes usar cada unidad de anuncio en una sola aplicación. Si usas una unidad de anuncios en más de una aplicación, los anuncios no se atenderán para esa unidad de anuncios.