Configuración de etiquetas en la página para vídeo outstream
Xandr Outstream Video usa la etiqueta de vendedor de Xandr (AST). AST es una etiqueta asincrónica de JavaScript que se ejecuta en el encabezado de la página. Las etiquetas AST se definen y cargan en el encabezado de página y se activan al "mostrar" las etiquetas en el cuerpo de la página.
Sugerencia
Para casos de uso seleccionados, AST también se puede definir, cargar y mostrar en el cuerpo de la página.
Cómo funciona
Se puede agregar una unidad de anuncios de vídeo de salida a una página web en las siguientes posiciones de página:
- al principio de un artículo
- entre párrafos de texto de un artículo
- al final de un artículo
En cada uno de los escenarios descritos anteriormente, la unidad de anuncios de vídeo de salida se incluye como un elemento oculto <div>
en el cuerpo de la página. El <div>
elemento del cuerpo de la página hace referencia a la unidad de anuncio de vídeo mediante un identificador de destino, que corresponde a una definición de ese identificador de destino en el encabezado de página. Cuando el contenedor entra en la vista, la unidad de anuncios de vídeo de salida se activa para la reproducción y se expande en la página para mostrar el contenido.
Ejemplo
AST le permite definir la etiqueta (ubicación) a la que va a llamar. Al definir una selección de ubicación de salida, puede pasar opciones adicionales para especificar cómo se debe mostrar el reproductor en la página y cómo debe comportarse. En el ejemplo siguiente se muestra una llamada a defineTag
para una ubicación de salida.
apntag.defineTag({
//required params
targetId: 'outstream_div',
tagId: 31,
sizes: [1, 1],
allowedFormats: ['video'],
targetingParams: {},
video: {
frameworks: [1,2]
},
//the options object is passed to the renderer which creates the outstream player on the page
rendererOptions: {
playerTechnology: [
'flash',
'html5'
],
adText: 'Ad',
showMute: true,
showVolume: true,
showProgressBar: true,
autoInitialSize: true,
allowFullscreen: true,
skippable: {
videoThreshold: 10,
videoOffset: 5,
skipLocation: 'top-right',
skipText: 'Video can be skipped in %%TIME%% seconds',
skipButtonText: 'Continue'
}
}
});
Implementación de SafeFrame con vídeo outstream
SafeFrame se creó para evitar comportamientos de anuncios perturbadores y los posibles riesgos de seguridad de publicar anuncios en línea con la página. La especificación completa de SafeFrame está disponible en el sitio web de IAB.
En el caso de las creatividades de vídeo, SafeFrame solo está disponible actualmente para vídeo outstream.
Para habilitar SafeFrame para Outstream, establezca la enableSafeFrame
opción en la apntag
definición, como se muestra en el ejemplo siguiente:
apntag.defineTag({
enableSafeFrame : true,
sizes: [640, 414]
...
Definición del tamaño del jugador para SafeFrame
Dado que autoInitialSize
aún no se admite para SafeFrame, debe establecer las dimensiones exactas del reproductor final en apntag
, como se muestra en el ejemplo anterior. Normalmente, tendrá que configurar las ubicaciones móviles y de escritorio de forma diferente para adaptarse a diferentes tamaños de reproductor.
Puede calcular el ancho y el alto necesarios del reproductor, como se muestra en el ejemplo siguiente.
Cuando el ancho de destino = 640 y aspectRatio=16:9:
- 640 / (16/9) = 360 px de altura del jugador
- 24px = la barra superior agrega 24 px al alto
- 30px = si la posición del control se establece en inferior (y no se ha superado), agregue 30 px al alto.
En este ejemplo, la suma de los altos suma hasta 414 para un tamaño de [640, 414].