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. Sube tus propios archivos HTML a Google Ads para crear anuncios de Gmail con un diseño personalizado. 

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

 

Para la mayoría de los usuarios, la nueva experiencia de Google Ads es ahora la única forma de gestionar sus cuentas. Si todavía usas la experiencia anterior (AdWords), selecciona Anterior abajo. Más información

Instrucciones

Un anuncio de Gmail con HTML personalizado es una carpeta ZIP que contiene los archivos del anuncio contraído y expandido. 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: menos de 1,25 MB
  • Número de archivos: menos de 100 archivos
  • Tamaño de cada archivo: menos de 500 kB

Cómo crear el anuncio contraído

En un anuncio contraído se añaden 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: menos de 144x144
  • Tamaño del archivo: menos de 500 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 en los dispositivos de resolución normal, pero aceptamos hasta 144x144 para facilitar su visualización 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 el ejemplo de forma exacta. Incluya la categoría (como "Anunciante") y su información concreta. En la siguiente tabla se muestran los límites de caracteres y más instrucciones sobre qué se debe incluir.

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

 

Crear el anuncio expandido

Para crear el 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 realizar el seguimiento de los clics externos (no se permiten los píxeles de seguimiento de impresiones ni las URL de seguimiento dinámicas). Si utilizas la plantilla de anuncio HTML personalizado de Gmail, asegúrate de añadir las URL de seguimiento que quieras utilizar en el archivo index.html, así como en el archivo teaser.txt.
  • Etiquetas: se admiten el 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 del 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="Vídeo de Gmail"></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 el vídeo de YouTube en una pestaña nueva en lugar de en un lightbox, define la clase como "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.