Crear anuncios de Gmail con HTML personalizado

El HTML personalizado es una opción idónea para los anunciantes avanzados y permite crear anuncios distintos a partir de las plantillas de anuncio de Gmail. Estos anuncios pueden incluir vídeos y varias llamadas a la acción. Para crear anuncios de Gmail con un diseño personalizado, sube tus propios archivos HTML a Google Ads.

En este artículo se explica cómo configurar y subir anuncios de Gmail personalizados.

Antes de empezar

Importante: Los anuncios de Gmail con HTML personalizado conservan el formato de la URL de destino, y en ellos no pueden usarse URL finales ni plantillas de seguimiento. Más información sobre las URL mejoradas

Instrucciones

Un anuncio de Gmail con HTML personalizado es una carpeta ZIP que contiene los archivos de las versiones contraída y expandida de un anuncio determinado. Para evitar problemas, se debe prestar mucha atención a las estrictas especificaciones de formato que se detallan a continuación.

Estos son los límites de tamaño generales del anuncio:

  • Tamaño total de la carpeta ZIP: 1,25 MB como máximo
  • Número de archivos: 100 archivos como máximo
  • Tamaño de cada archivo: 500 kB como máximo

Cómo crear el anuncio contraído

Para crear el anuncio contraído, debe añadir dos archivos a la carpeta ZIP:

  • La imagen del logotipo (llamada "logo.png", "logo.jpg" o "logo.gif")
  • El archivo de texto (llamado "teaser.txt")

Especificaciones de la imagen del logotipo

El archivo debe llamarse exactamente "logo.png", "logo.jpg" o "logo.gif", y el formato de archivo debe ser PNG, JPG o GIF.

  • Tamaño de la imagen del logotipo: 144x144 píxeles como máximo y relación de aspecto de 1:1
  • Tamaño de archivo máximo: 150 kB
  • Formatos de archivo: PNG, JPG, o GIF (no animado)

La imagen de logotipo es un pequeño icono, gráfico o logotipo de marca.

Esta imagen se mostrará como un cuadrado de 50x50 píxeles en los dispositivos de resolución normal, pero aceptamos hasta 150 kB para ofrecer una visualización más clara en algunas pantallas.

Especificaciones del archivo de texto

El archivo debe llamarse exactamente "teaser.txt" y su formato debe ser TXT. A continuación, se muestra un ejemplo de un archivo de texto con formato correcto.

Advertiser: Nombre de la empresa
Subject: Todo al 20 % de descuento en Nombre de la empresa
Description: ¡Todos los productos a los precios más bajos!
Display Url: www.example.com
Landing Page: https://www.example.com/rebajas

Nota: Sigue exactamente el ejemplo e introduce los títulos en inglés como se indica a continuación. No te olvides de incluir la categoría (por ejemplo, "Advertiser") y tu información específica. En la siguiente tabla se muestran los límites de caracteres y más instrucciones sobre qué se debe incluir.

Títulos Límite de caracteres Elementos que se deben incluir
Advertiser (Anunciante) 20 Nombre o dominio de la empresa.
Subject (Título) 25 El título puede incluir una oferta, un descuento o una frase atractiva.
Description (Descripción) 90 La descripción puede ser un resumen breve o una llamada a la acción.
Display URL (URL visible) 32 La URL, tal como se mostrará en el anuncio.
Landing page (Página de destino) Sin límite URL de redireccionamiento del teaser: se usa como la URL de destino de los clics que se realizan en la URL corta del remitente al abrir el anuncio expandido. Puedes añadir una URL de seguimiento de clics estática a este campo. Es la página que se mostrará a los usuarios tras hacer clic en la URL visible.

 

Crear anuncios expandidos

Para crear un anuncio expandido debes añadir un archivo HTML y una carpeta de imágenes a la carpeta ZIP:

  • Carpeta de imágenes (llamada "Images"), que contenga los archivos de imagen del anuncio expandido.
  • Archivo HTML, denominado exactamente "index.html".

Especificaciones de la carpeta de imágenes

  • El anuncio debe contener, como mínimo, una imagen y, como máximo, 100. Para insertar vídeos en el anuncio expandido, consulta la sección correspondiente, que encontrarás más adelante.
  • Anchura máxima por imagen: 650 píxeles.
  • Altura máxima por imagen: 1000 píxeles. Para que los anuncios sean más eficaces, se recomienda utilizar un lienzo con una altura máxima de 650 píxeles para todo el texto y las imágenes.

Especificaciones del archivo HTML

Detalles técnicos

  • URLs: debe contener, como mínimo, una URL absoluta y, como máximo, 15; todos los caracteres especiales deben estar codificados (por ejemplo, espacios o signos "#").
  • Formato: el diseño se debe controlar con tablas HTML estándar para que la presentación sea similar en todos los dispositivos.
  • Seguimiento: se pueden usar URL de seguimiento estáticas para hacer el seguimiento de los clics externos (no pueden usarse píxeles de seguimiento de impresiones ni URLs de seguimiento dinámicas).Si utilizas la plantilla de anuncio HTML personalizado de Gmail, añade las URL de seguimiento que quieras usar en el archivo index.html, así como en el archivo teaser.txt.
  • Etiquetas: puede utilizarse código HTML (se debe usar la codificación UTF8), algunas etiquetas HTML5 ("ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME" y "WBR") y parte del código CSS (solo el atributo de estilo de las etiquetas, por ejemplo: <div style="color: black" >).

Etiquetas no permitidas

  • Código JavaScript: las etiquetas <script> se quitarán automáticamente del anuncio.
  • Hojas de estilo: las etiquetas <link> se quitarán automáticamente del anuncio.
  • Código Flash
  • Código HTML5: las únicas etiquetas admitidas son "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME" y "WBR".
  • Sonido
  • iFrames
  • Imágenes animadas: GIFs

Propiedades CSS admitidas

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Añadir un vídeo al archivo HTML de un anuncio expandido

  1. Cómo añadir un vídeo

    Se puede insertar un vídeo de YouTube en un anuncio con una ventana de vista previa. Cuando un usuario hace clic en la imagen del vídeo desde un ordenador, el vídeo se reproduce en un lightbox de Gmail. Cuando el usuario haya terminado de ver el vídeo, volverá al anuncio de Gmail expandido. En un dispositivo móvil, el vídeo se mostrará en el reproductor de vídeo especificado por el usuario (como la aplicación de YouTube o un navegador). 

    Instrucciones: Para añadir un vídeo de YouTube, incluye en el código, adaptándolos a tu anuncio, el enlace de YouTube, la fuente de la imagen y el texto que quieres mostrar. Por ejemplo:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Gmail Video"></a>

    Nota: Al obtener la vista previa del anuncio en Google Ads, el vídeo de YouTube no se mostrará ni reproducirá en el lightbox.

  2. Cómo añadir un vídeo en una pestaña nueva

    Si quieres reproducir un vídeo de YouTube en una pestaña nueva en lugar de en un lightbox, elige la clase "nonplayable".

    Por ejemplo:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Vídeo de Gmail"></a>

  3. Importante: Incluye un botón de reproducción en la imagen de vista previa

    Para indicar a los usuarios que al hacer clic en la imagen se reproducirá un vídeo, la imagen de vista previa debe incluir algún tipo de botón de reproducción. Google Ads no añade nada a las imágenes de vista previa para indicar que son vídeos.

Enlaces relacionados

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.