Diseñar una creatividad expandible con Google Web Designer

Al principio, los anuncios expandibles tienen el mismo tamaño que el espacio publicitario en el que se publican. Cuando los usuarios interactúan (por ejemplo, al hacer clic en un botón), el anuncio se hace más grande que el espacio publicitario y muestra más contenido. Para crear un anuncio expandible en Google Web Designer, comience a partir de un archivo en blanco o abra una plantilla expandible predefinida. Después, añada el texto, las imágenes y otros elementos.

Empezar desde cero

Paso 1: Cree un archivo

Para crear un anuncio expandible con una creatividad de vídeo en Google Web Designer, siga estos pasos:

1. Abra Google Web Designer y haga clic en Archivo > Nuevo archivo. Se mostrará la ventana “Crear un archivo vacío”.
2. En la lista Anuncios, seleccione Expandible.
3. En Entorno, elija Display & Video 360.
4. Defina las dimensiones de los tamaños contraídos y expandibles del anuncio.
5. Asigne un nombre a la creatividad, que será el del archivo HTML.
6. Elija la ubicación del ordenador donde se guardarán los archivos de Google Web Designer. Introduzca la ruta de la ubicación o haga clic en el icono de búsqueda para desplazarse a la que desee.
7. Defina el Modo de animación:
   1. Rápido: anime su anuncio escena por escena. Para obtener más información, consulte el artículo sobre cómo crear animaciones en el modo Rápido del Centro de Ayuda de Google Web Designer.
   2. Avanzado: anime elementos individuales en su propia línea de tiempo. Para obtener más información, consulte el artículo sobre cómo crear animaciones en el modo Avanzado del Centro de Ayuda de Google Web Designer.
8. Haga clic en Aceptar.

Google Web Designer crea las páginas iniciales contraídas y expandidas (llamadas Página de banner y Página expandida). Además, añade automáticamente un evento de área de pulsación en la página contraída, que mostrará el anuncio, y un área de pulsación de cierre en una página expandida para volver a ocultar el anuncio. El código necesario para que el anuncio se comunique con el servidor de anuncios y se recopilen métricas de seguimiento también se añade automáticamente.

Paso 2: Configure la página de Banner

Para configurar el anuncio contraído en la página de banner, siga estos pasos:

1. Importe las imágenes arrastrándolas hasta la escena, o bien arrástrelas desde el panel Biblioteca de recursos.
2. (Opcional) Cree animaciones o añada componentes integrados o personalizados a la página.
3. Cuando haya acabado el banner, seleccione el componente Área de pulsación y haga clic en el botón “Mover a la parte superior”.
4. Guarde la configuración.

Para hacer que la creatividad se expanda al desplazar el ratón por encima, siga estos pasos:

1. Abra el panel Eventos y haga clic en el botón + para añadir un evento de movimiento del cursor.
2. Seleccione expand-button como objetivo.
3. Elija Ratón > mouseover como evento.
4. Seleccione Anuncio de Google > Ir a la página como acción.
5. Elija gwd-ad como receptor.

Más información sobre cómo usar eventos en Google Web Designer

Paso 3: Configure la página Expandida

1. Acceda a la Página expandida mediante el indicador de página que aparece en la parte inferior de la escena .
2. Importe las imágenes arrastrándolas hasta la escena, o bien arrástrelas desde el panel Biblioteca de recursos.
3. (Opcional) Cree animaciones o añada componentes integrados o personalizados a la página.
4. Haga clic en Guardar.

Añadir una llamada a la acción

1. Asegúrese de que su anuncio disponga de un botón u otro elemento visual claro de llamada a la acción para que el usuario pueda tocarlo o hacer clic en él.
2. Arrastre el componente Área de pulsación desde el panel de componentes a la escena y sitúelo sobre la llamada a la acción.
3. En el panel Eventos, haga clic en el botón de nuevo evento .
4. En el cuadro de diálogo Eventos, seleccione las siguientes opciones:

   Objetivo	El componente Área de pulsación (gwd-taparea_1)
   Evento	Área de pulsación > Toque o clic
   Acción	Anuncio de Google > Salir del anuncio Nota: Una acción similar, Salida con sobreescritura de URL, no permite modificar la URL fuera de la creatividad, como Studio o Campaign Manager 360, y solo debe usarse con anuncios dinámicos.
   Receptor	gwd-ad
   Configuración	ID de métricas: una etiqueta (por ejemplo, "CTA") para facilitar la comprensión de los informes. URL: indica la URL de salida. Contraer al salir: marque esta casilla para que se cierre el anuncio cuando el usuario lo cierre. Pausar medios al salir: marque esta casilla para que la reproducción de vídeo y audio se detenga cuando el usuario cierre el anuncio. Página minimizada a la que se accede al salir: la página se muestra cuando el usuario cierra un anuncio expandible.

   

Opcional: Añadir un video

Si quiere añadir un vídeo a la creatividad, use el componente Vídeo o el componente YouTube. Si el vídeo está alojado en YouTube, use el componente YouTube. En caso contrario, use el componente Vídeo en los siguientes formatos de vídeo HTML5 compatibles: 

• .MP4
• .OGG/.OGV
• .WEBM

Crear anuncios a partir de plantillas

Las plantillas son anuncios que ya están creados y que tienen tamaños, estilos y funciones que se usan habitualmente. Si sustituye las imágenes y otros recursos, podrá crear anuncios útiles y funcionales en poco tiempo.

Paso 1: Cree un archivo a partir de una plantilla

1. Seleccione Nuevo desde plantilla... en el menú Archivo. Se abrirá la galería de plantillas.
2. Para encontrar las plantillas de banner en Google Marketing Platform:
   1. Haga clic en Buscar .
   2. Abra la sección Tipos de anuncio y seleccione Desplegable. 
   3. Expanda la sección Plataformas y elija Display & Video 360.
   4. Cierre el panel de filtros. Se mostrará una lista con los diseños compatibles.
3. Vaya al diseño que quiera y haga clic en Usar diseño.
4. Si hay varias opciones de tamaño, seleccione la que quiera.
5. Asigne un nombre al archivo (obligatorio).
6. Si quiere, puede cambiar la ubicación en la que se guardará el archivo. Introduzca la ruta de la ubicación o haga clic en el icono de la carpeta  para desplazarse a la ubicación donde quiere que se guarde el archivo.
7. Haga clic en Crear.

Paso 2: Añada o sustituya imágenes en la plantilla

Las plantillas de anuncios expandibles de Google Web Designer contienen la página de Banner, que es el anuncio contraído, y la página Expandida, que corresponde al anuncio expandido. Cuando cree un archivo, se mostrará la página de Banner de forma predeterminada. Acceda a la página Expandida mediante el indicador de página que aparece en la parte inferior de la escena .

Las páginas incluyen recursos de marcador de posición y los ID descriptivos de cada elemento. Comience por sustituir cada recurso de marcador de posición genérico por uno adecuado para su anuncio. Los anuncios creados a partir de plantillas se pueden modificar totalmente: puede añadir o eliminar los recursos, componentes y eventos que quiera para crear un anuncio más personalizado.

La función "Cambiar imagen" le permite sustituir una imagen por otra de la biblioteca o por una que suba. Esta función resulta muy útil para sustituir imágenes de archivo de las plantillas.

Para sustituir una imagen de un anuncio creado a partir de una plantilla:

1. Haga clic con el botón derecho en la imagen que desee sustituir.
2. Seleccione Cambiar imagen... en el menú emergente.
3. En el cuadro de diálogo, seleccione una imagen de la biblioteca o haga clic en el botón de añadir  para elegir una imagen que tenga guardada en el ordenador.
4. Haga clic en Aceptar.

Obtener una vista previa de la creatividad final

Para obtener una vista previa de su anuncio en Google Web Designer, siga estos pasos:

1. En la parte inferior de la pantalla, haga clic en el botón de vista previa . Google Web Designer reconocerá los navegadores compatibles con su sistema y le permitirá elegir cuál de ellos quiere utilizar.
2. Para elegir el navegador en el que desea obtener una vista previa del trabajo, haga clic en la flecha de selección situada a la derecha del botón de vista previa y seleccione un navegador de la lista.
3. Cuando se cargue la página, revise el anuncio contraído.
4. Haga clic en la llamada a la acción para ver cómo se expande el anuncio.

Opcional: Configurar una creatividad expandible en varias direcciones

Las creatividades expandibles en varias direcciones pueden expandirse en la dirección que corresponda en función de la ubicación que ocupen en el sitio web. Siga los pasos que figuran a continuación para crear una creatividad expandible en varias direcciones.

Ahorrará tiempo si empieza utilizando en Google Web Designer la plantilla de expansión en varias direcciones, ya que incluye gran parte del código y la configuración de los pasos siguientes.

Configuración de varias direcciones

Paso 1: Aumente el tamaño de la escena

1. Aumente el tamaño de la página expandida para que el área expandida tenga espacio suficiente en todas las direcciones.

   Por ejemplo, si el tamaño de creatividad contraída es de 300x250, la creatividad expandida es de 600x250 y la creatividad puede mostrarse a la derecha o izquierda: defina el tamaño de la página expandida como 900x250.
   
   

2. Use el indicador de página para volver a la página de Banner .
3. Haga clic en el botón de visualización de expansión de anuncios . 
4. Cambie de posición el área visible expandible para que el tamaño contraído quede en el centro. Obtenga más información acerca de cómo utilizar el botón de visualización de expansión de anuncios en el Centro de Ayuda de Google Web Designer.
5. Acceda a la Página expandida mediante el indicador de página que aparece en la parte inferior de la escena .
6. Ajuste la posición de los elementos de las creatividades al tamaño de la escena.

Paso 2: Añada el código de posicionamiento

1. Haga clic en Vista de código.
2. Desplácese hacia abajo hasta la etiqueta de secuencia de comandos con el ID gwd-init-code: 
   <script type="text/javascript" id="gwd-init-code">
3. Añada código para habilitar la expansión en varias direcciones y para la gestión de eventos. Consulte el SDK de HTML5 de Studio para ver ejemplos y métodos de API.

   Código de ejemplo 

   Con este ejemplo, la creatividad solo se expandirá a la izquierda y a la derecha. Consulte el SDK de HTML5 de Studio para obtener más detalles.

   Enabler.setIsMultiDirectional(true);
   
   // Cambie la posición de los elementos en función de la dirección de expansión.
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // Añada código aquí para colocar los elementos cuando se expandan a la derecha.
       // Cambie btnClose para que coincida con el ID del botón de cierre y modifique la posición.
       btnClose.style.left = '875px';
     } else {
       // Añada código aquí para colocar los elementos cuando se expandan a la izquierda.
       // Cambie btnClose para que coincida con el ID del botón de cierre y modifique la posición.
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. Añada código para colocar cada elemento de creatividad según las direcciones de expansión que desee.

Cuando haya terminado de diseñar la creatividad, podrá publicarla en Studio.