Compartir a través de

AdControl en HTML 5 y JavaScript

  • Artículo

Advertencia

A partir del 1 de junio de 2020, se cerrará 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 proyecto de ejemplo completo que muestra cómo agregar anuncios de banner a una aplicación JavaScript/HTML, consulte los ejemplos de publicidad en GitHub.

Requisitos previos

Nota:

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

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

  1. En Visual Studio, abra el proyecto o cree un proyecto.

    Nota:

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

  2. Si el proyecto tiene como destino Cualquier CPU, actualice el proyecto para usar una salida de compilación específica de la arquitectura (por ejemplo, x86). Si el proyecto tiene como destino Cualquier CPU, no podrá agregar correctamente una referencia a la biblioteca de Microsoft Advertising en los pasos siguientes. Para obtener más información, consulte Errores de referencia causados por cualquier CPU en el proyecto.

  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, expanda Universal Windows, haga clic en Extensiones y, a continuación, active la casilla situada junto a SDK de Microsoft Advertising para JavaScript (versión 10.0).
    3. En el Administrador de referencias, haga clic en Aceptar.

  4. Abra el archivo index.html (u otro archivo HTML según corresponda para el proyecto).

  5. En la <sección principal> , 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 la inclusión de 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 anuncios de prueba. Ajuste también el alto y el ancho para que el control sea uno de los tamaños de anuncios admitidos para los anuncios de banner.

    Nota:

    Cada AdControl tiene una unidad de anuncio correspondiente utilizada por nuestros servicios para servir anuncios para el control, y cada unidad de anuncio consta de un identificador de unidad de anuncio e id. de aplicación. En estos pasos, asignará los valores de id. 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: '00001111-aaaa-2222-bbbb-3333cccc4444', adUnitId: 'test'}">
</div>

  7. Compile y ejecute la aplicación para verlo 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: '00001111-aaaa-2222-bbbb-3333cccc4444', adUnitId: 'test'}">
    </div>
    <p>Content goes here</p>
</body>
</html>

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

Los pasos anteriores muestran cómo declarar un AdControl en el marcado HTML. Como alternativa, puede crear un AdControl mediante programación 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 ha declarado métodos de controlador de eventos denominados myAdError, myAdRefreshed y myAdEngagedChanged.

Si usa este código y no ve anuncios, puede intentar insertar un atributo de position:relative en el div que contiene AdControl. Esto invalidará la configuración predeterminada del IFrame. Los anuncios se mostrarán correctamente, a menos que no se muestren debido al valor de este atributo. Tenga en cuenta que es posible que las nuevas unidades de anuncios no estén disponibles durante un máximo de 30 minutos.

Nota:

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

Liberar 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 en la aplicación y cree una unidad de anuncios. Para el tipo de unidad de anuncio, especifique Banner. Anote tanto el identificador de unidad de anuncios como 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 en directo tienen diferentes formatos. Los valores de identificador de aplicación de prueba son GUID. Cuando creas una unidad de anuncios para UWP activa en el Centro de partners, el valor de id. de aplicación de la unidad de anuncios siempre coincide con el id. de la Tienda para 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 le permite maximizar los ingresos de anuncios y las funcionalidades de promoción de aplicaciones 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 anuncios de prueba (applicationId y adUnitId) por los valores dinámicos que generó en el Centro de partners.

  5. Envíe la 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 diferentes unidades de anuncios para cada control permite configurar por separado las opciones de mediación y obtener datos discretos de informes para cada control. Esto también permite que nuestros servicios optimicen mejor los anuncios que servimos a su aplicación.

Importante

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