Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal

Guía de compilación de creatividades desplegables HTML5

Configurar paneles principales, contraídos y expandidos

Cómo posicionar un anuncio en la página y establecer la dirección de expansión

Dos de las funciones básicas de una creatividad expandible es ayudar al sitio web a identificar el objeto de su archivo que representa el panel contraído y determinar la dirección de la expansión. Dado que el objeto principal del archivo es mayor que el área del panel contraído y que la expansión puede configurarse para que tenga lugar en cualquier dirección es importante definir el área contraída, de manera que la página sepa dónde procesar el anuncio.

Cuando el anuncio se publica en la página de un sitio, la página posiciona la creatividad en función de la desviación de píxeles superior e izquierda que establece y hace coincidir el tamaño de su creatividad con el espacio publicitario. A continuación, determina la dirección de expansión. Para ello, debe configurar sus archivos en consecuencia:

  • En el HTML, cree tres paneles:
    • Panel principal: contiene tanto paneles contraídos como expandidos.
    • Panel contraído: tiene contenido de panel contraído.
    • Panel expandido: tiene contenido de panel expandido.
  • En el archivo CSS, diseñe los tres objetos para reflejar la posición del anuncio y la dirección de expansión.
  • En el archivo JavaScript, utilice el método de Enabler setExpandingPixelOffsets para alinear el panel contraído con la ubicación del anuncio. En el ejemplo que se muestra a continuación, el desplazamiento hacia la izquierda corresponde a 200 píxeles.
2-part expanding ad in a web page. Collapsed portion is a 300x250 inpage colored purple and exanded is a 500X300 expanding left and down over content colored blue

300 x 250 = contraído
500 x 300 = expandido

Para asegurarse de que el anuncio se expanda correctamente cuando se muestra dentro de una aplicación, debe diseñar la creatividad de forma que se expanda hacia abajo, o bien para ocupar la pantalla completa. Información sobre cómo habilitar la expansión a pantalla completa

Crear objetos

Cree tres objetos en su archivo HTML mediante etiquetas <div> y asígneles los ID correspondientes.

Fragmento de código:

<body>
  <div id="main-panel">
    <div id="collapsed-panel">
      <!-- Añada contenido contraído aquí. -->
    </div>
    <div id="expanded-panel">
      <!-- Añada contenido expandido aquí. -->
    </div>
  </div>
</body>
Dar estilo a los objetos

Diseñe los objetos que ha creado en el CSS usando los ID que les ha asignado.

  • El panel principal debe tener las mismas dimensiones que el panel desplegado y debe posicionarse siempre en 0,0.
  • La posición del panel contraído depende de la dirección de expansión:
    • Despliegue a la derecha o derecha y abajo
      • izquierda = 0 px
      • parte superior = 0 px
    • Despliegue a la izquierda o izquierda y abajo
      • izquierda =  ancho del panel desplegado [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
      • parte superior = 0 px
    • Despliegue a la derecha y arriba
      • izquierda= 0 px
      • parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
    • Expansión a la izquierda y arriba
      • izquierda =  ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
      • parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
  • Posicione siempre el panel expandido en 0,0.
Fragmento de código:
#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
}
      
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 0px;
  width: 300px;
  height: 250px;
}

#expanded-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
} 
Definir los desplazamientos de posicionamiento

Establezca los desplazamientos de píxeles del panel contraído en el anuncio y defina los tamaños de las dimensiones del panel expandido. Esto ayuda a Studio a identificar la posición del anuncio en la página del sitio web en el que se está publicando y la dirección de expansión. Para ello, utilice el método setExpandingPixelOffsets.

Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);

  • Al igual que ocurre con los estilos de los paneles contraídos, los valores que defina para los parámetros left y top dependen de la dirección de expansión:
    • Expansión a la derecha o derecha y abajo
      • izquierda= 0 px
      • parte superior = 0 px
    • Expansión a la izquierda o izquierda y abajo
      • izquierda =  ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
      • parte superior = 0 px
    • Expansión a la derecha y arriba
      • izquierda= 0 px
      • parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
    • Expansión a la izquierda y arriba
      • izquierda =  ancho del panel expandido [menos] ancho del panel contraído (por ejemplo, 500 px - 300 px = 200 px)
      • parte superior = altura del panel expandido [menos] altura del panel contraído (por ejemplo, 300 px - 250 px = 50 px)
  • Defina opt_expandedWidth y opt_expandedHeight para que coincidan con las dimensiones del panel expandido.
Fragmento de código:
// Se puede invocar antes del evento INIT del Enabler.
Enabler.setExpandingPixelOffsets(
  200, // Desplazamiento hacia la izquierda del anuncio expandido.
  100, // Desplazamiento hacia arriba del anuncio expandido.
  700, // Anchura en expansión del anuncio.
  450); // Altura en expansión del anuncio.
También puede establecer estos parámetros en la interfaz de usuario web de DoubleClick Studio después de subir los elementos. Consulte también Propiedades de la vista previa de las creatividades expandibles.
¿Te ha sido útil este artículo?