Compartir a través de

Configuración de ubicaciones con AST

Esta página contiene una página web de ejemplo que muestra cómo se pueden implementar las funciones de etiqueta de vendedor (AST) de Microsoft Advertising en el encabezado y el cuerpo de una página de cliente de ejemplo.

Nota:

Como parte de nuestra transición continua para mejorar el rendimiento y alinearnos con los servicios de Microsoft, estamos migrando el producto AST de Xandr CDN a Microsoft CDN.

Este cambio garantiza que sigue recibiendo actualizaciones críticas, incluido el cumplimiento de estándares de privacidad en constante evolución, como las directivas de Fledge y CMP.

Para asegurarse de que recibe las actualizaciones y mejoras más recientes del producto AST, incluidas las características de privacidad esenciales, siga estos pasos para actualizar las páginas web con las nuevas direcciones URL de Microsoft CDN:

Si usa una directiva de seguridad de contenido (CSP), asegúrese de que se agregan los siguientes dominios a la lista de permitidos:

  • adsdk.microsoft.com
  • adsdk.bing.net (si procede)

Para obtener más información, consulte la Referencia de api de AST.

Importante

Más allá del cambio de red CDN, hemos actualizado recientemente el código de instalación de ejemplo que carga el ast.js archivo. Ahora se recomienda incluir una crossOrigin propiedad en el elemento de script que carga la biblioteca de JavaScript. Le rogamos que incluya este código adicional para ayudar a AST a capturar errores del lado cliente relacionados con el script de AST.

Paso 1: Crear el objeto APN y cargar la biblioteca de JavaScript de Xandr

En la línea 5, configuramos un objeto AST vacío. En la línea 7, creamos una cola de funciones en ese objeto que nos permite insertar funciones en esa cola con la información sobre las etiquetas y poder solicitar ofertas desde el servidor de anuncios Xandr. En las líneas 10 a 15, cargamos de forma asincrónica la biblioteca de subastas del lado cliente desde la red CDN de Xandr. Si el script existe, lo procesamos; De lo contrario, se coloca en la cola.

Nota:

Este código se puede pegar directamente en la página web; no se requieren cambios adicionales para desarrolladores. Puede separar el código en head y body como se muestra a continuación o, si no tiene acceso a la página head, puede colocar la etiqueta completa en un bloque de código en .body

Advertencia

La implementación de la etiqueta de AST en un archivo Javascript externo u otras personalizaciones para la implementación de este código podría dar lugar a resultados no deseados o a la pérdida de funcionalidad, y requerirá la acción del cliente para probar y usar características en futuras versiones de AST. Es posible que Xandr no pueda solucionar problemas o soporte técnico en esta instancia.

<html>
<head>
    <script type="text/javascript">
    //create empty apntag object if it doesn't exist
    var apntag = apntag || {};
    //create a queue on the apntag object        
    apntag.anq = apntag.anq || [];
        
        //load ast.js - async
    (function() {
       var d = document, e = d.createElement('script'), p = d.getElementsByTagName('head')[0];
       e.type = 'text/javascript';  e.async = true;
       e.crossOrigin = 'anonymous';
       e.src = 'https://adsdk.microsoft.com/ast/ast.js';
       p.insertBefore(e, p.firstChild);
    })();

Paso 2: Establecer opciones de página globales

Ahora se establecen las opciones de página globales con la setPageOpts función . Aquí, establecemos el identificador de miembro en 958 y definimos los parámetros de destino de toda la página. member es necesario en o setPageOptsdefineTag (vea a continuación). En este ejemplo se usa la edad y el género.

    //push commands to loading queue, to allow for async loading
    apntag.anq.push(function() {
        //set global page options
        apntag.setPageOpts({
            member: 958,
            keywords: {
                'artist': 'Prince',
                                'genre': ['rock', 'pop']
            },
                        user: {
                                age: 26,
                                gender: 1
                        }
        });

Paso 3: Definir etiquetas de anuncios

A continuación, definimos todas las ubicaciones de anuncios que queremos en esta página mediante la defineTag función . Aquí se especifica lo siguiente para cada ubicación:

  • member: puede invalidar la opción de página global con el identificador de miembro para esta ubicación (opcional; debe estar presente si no se especifica en setPageOpts)

  • invCode: el código de selección de ubicación de esta ubicación. (invCode O tagId obligatorio)

  • tagId: el identificador de selección de ubicación de esta ubicación ( invCode O tagId obligatorio)

  • sizes: si usa varios tamaños, el primer elemento de la lista es el tamaño de ubicación y otros tamaños son tamaños de promoción.

  • targetId: cualquier cadena única; debe corresponder a un identificador único div en el cuerpo de la página.

  • Otras opciones disponibles; consulte la referencia de la API de AST.

            //define ad tags
        apntag.defineTag({
                        invCode: 'ABC1234',
            sizes: [728,90],
            targetId: 'apn_ad_slot_1'
        });
        apntag.defineTag({
                        tagId: 123456,
            sizes: [[300,250],[300,600]],
            targetId: 'apn_ad_slot_2'
        });

Paso 4: Cargar etiquetas

En cuanto se definan todas las etiquetas, llame a la loadTags función . Esta función envía solicitudes de anuncios para las etiquetas de una llamada de anuncio de forma asincrónica.

        //start loading tags
        apntag.loadTags();
    });
    </script>
</head>

Paso 5: Definir la ubicación de las ubicaciones

En el cuerpo de la página, especifique la ubicación de cada ubicación mediante div etiquetas que corresponden a los targetId elementos de cada una de las defineTag llamadas. Use la showTag función para indicar que la ubicación está lista para recibir un anuncio. Una vez llamada a esta función, la impresión se marcará como transacda y se considerará una "impresión" con fines contables.

Nota:

AST administra todos los elementos DOM dentro de la etiqueta de marcador de posición div de anuncio mediante programación. Dado que estos elementos pueden cambiar, no acceda directamente a ninguno de los elementos; use solo las funciones de AST integradas, como refresh. Acceder directamente a estos elementos puede dar lugar a un comportamiento inesperado, como anuncios que aparecen en la ubicación incorrecta de la página, anuncios duplicados o espacios en blanco.

<body>
    <div id='apn_ad_slot_1'>
      <script type="text/javascript">
        apntag.anq.push(function() {
            //signal to script that this DOM element has been loaded and is ready to be populated with an ad
            apntag.showTag('apn_ad_slot_1');
        });
        </script>
    </div>
    
    <br>
    <div id='apn_ad_slot_2'>
      <script type="text/javascript">
        apntag.anq.push(function() {
            apntag.showTag('apn_ad_slot_2');
        });
        </script>
    </div>
    
 
</body>
</html>