Cómo crear anuncios de Gmail con HTML personalizado

Ideal para los anunciantes avanzados, el HTML personalizado le permite crear anuncios diferentes de las plantillas de anuncios de Gmail existentes. Estos anuncios pueden incluir video y varios llamados a la acción. Para crear anuncios de Gmail con su propio diseño personalizado, suba sus propios archivos HTML personalizados a Google Ads. 

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

Antes de comenzar

Importante: Tenga en cuenta que los anuncios HTML personalizados de Gmail conservan el formato de la URL de destino y no son compatibles con las URL finales y las plantillas de seguimiento. Obtenga más información sobre las URL actualizadas.

Instrucciones

Un anuncio HTML personalizado de Gmail es una carpeta ZIP que contiene todos los archivos de su anuncio contraído y expandido. Para evitar problemas, preste especial atención a las especificaciones estrictas de formato que se detallan a continuación.

Los límites de tamaño generales de su anuncio son los siguientes:

  • Total de la carpeta ZIP: <1.25 MB.
  • Cantidad de archivos: <100 archivos.
  • Tamaño del archivo: <500 KB.

Cómo crear su anuncio contraído

Para crear su anuncio contraído, debe agregar dos archivos a la carpeta ZIP:

  • La imagen del logotipo (denominada “logo.png”, “logo.jpg” o “logo.gif”).
  • El archivo de texto (denominado “teaser.txt”).

Especificaciones de la imagen del logotipo

El archivo se debe denominar 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: 144 px x 144 px, como máximo, con una relación de aspecto de 1:1
  • Tamaño máximo del archivo: 150 KB
  • Formatos de archivo: PNG, JPG o GIF (no animado)

La imagen del logotipo es un ícono, gráfico o logotipo de la marca pequeños.

La imagen aparecerá como un cuadrado de 50 x 50 en los dispositivos de resolución normal, pero aceptamos un tamaño de hasta 150 KB para obtener una vista más nítida en algunas pantallas.

Especificaciones del archivo de texto

El archivo se debe denominar exactamente “teaser.txt” y el formato del archivo debe ser TXT. A continuación, presentamos un ejemplo de un archivo de texto con un formato adecuado.

Anunciante: Nombre de la empresa
Asunto: 20% de descuento en todos los productos de Nombre de la empresa
Descripción: Compre productos nuevos a precios bajos
URL visible: www.example.com
Página de destino: https://www.example.com/oferta

Nota: Siga el ejemplo tal como está y asegúrese de ingresar los títulos en inglés exactamente como se muestra a continuación. Además, asegúrese de incluir tanto la categoría (por ejemplo, "Anunciante") como su información específica. La siguiente tabla proporciona los límites de caracteres y más orientación sobre la información que debe incluir.

Títulos Límites de caracteres Información que debe incluir
Anunciante 20 Nombre o dominio de su empresa.
Asunto 25 El título puede incluir una oferta, un porcentaje de descuento o un anuncio atractivo.
Descripción 90 La descripción puede ser un resumen breve o un llamado a la acción.
URL Visible 32 Su URL, tal como se mostrará en el anuncio.
Página de destino sin límite URL de redireccionamiento del avance: Se usa como la URL de destino para los clics en la “URL corta visible del remitente” cuando se abre el anuncio expandido. Puede agregar una URL de seguimiento de clics estática en este campo. Esta es la página adonde se dirigirá a los usuarios cuando hagan clic en su URL visible.

 

Cómo crear su anuncio expandido

Para crear su anuncio expandido, debe agregar un archivo HTML y una carpeta de imágenes a su carpeta ZIP:

  • Carpeta de imágenes (denominada “Imágenes”) que contenga los archivos de imagen para el anuncio expandido
  • Archivo HTML denominado exactamente “index.html”

Especificaciones de la carpeta de imágenes

  • Su anuncio debe contener, al menos, una imagen y puede contener hasta 100 imágenes (para incorporar videos a su anuncio expandido, consulte la sección sobre videos a continuación)
  • Ancho máximo por imagen: 650 px
  • Altura máxima por imagen: 1,000 px (Nota: Para lograr anuncios más efectivos, recomendamos que la altura del cuadro total del anuncio, que incluye todo el texto y las imágenes, no supere los 650 px)

Especificaciones del archivo HTML

Detalles técnicos

  • URL: Debe contener, al menos, una URL absoluta (hasta un máximo de 15), y todos los caracteres especiales deben estar codificados (p. ej., los espacios, #).
  • Formato: Controle el diseño con tablas HTML estándares para asegurarse de que la presentación sea coherente en todos los dispositivos.
  • Seguimiento: Se pueden usar URL de seguimiento estáticas para realizar un seguimiento de los clics externos. No se permiten píxeles de seguimiento de impresiones ni URL de seguimiento dinámicas. Si está utilizando la plantilla "Anuncio HTML personalizado de Gmail", asegúrese de agregar las URL de seguimiento que desea utilizar en el archivo index.html, así como también en el archivo teaser.txt.
  • Lenguaje de marcado: Se admite el lenguaje HTML (utilice la codificación UTF8), algunas etiquetas HTML5 ("ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") y algunos estilos CSS (solo los atributos de estilo de las etiquetas, p. ej. <div style="color: black" >).

Lenguajes de marcado no permitidos

  • Javascript: Las etiquetas <script> se quitarán automáticamente del anuncio
  • Hojas de estilo: Las etiquetas <link> se quitarán automáticamente del anuncio
  • Flash
  • HTML5: Las únicas etiquetas que se admiten son "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"
  • Audio
  • iFrames
  • Imágenes animadas: GIF

Estilos CSS admitidos

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  

Agregue un video al archivo HTML de su anuncio expandido

  1. Cómo agregar un video

    Se puede incorporar un video de YouTube a un anuncio con una ventana de vista previa. Cuando un usuario que utiliza una computadora hace clic en la imagen de video, el video se reproduce en un lightbox en Gmail. Una vez que termina de ver el video, se lo redirige al anuncio expandido de Gmail. En un dispositivo móvil, el video se reproduce en el reproductor de video designado por el usuario (por ejemplo, la aplicación de YouTube o un navegador). 

    Instrucciones: Si desea agregar un video de YouTube, codifique el vínculo de YouTube, la fuente de la imagen y el texto visible de manera adecuada para su anuncio. Por ejemplo:

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

    Nota: Si realiza una vista previa del anuncio en Google Ads, el video de YouTube no aparecerá ni se reproducirá en el lightbox.

  2. Cómo agregar un video en una pestaña nueva

    Si desea que el video se reproduzca en YouTube en una pestaña nueva, en lugar de reproducirse en un lightbox, establezca la clase como “nonplayable”.

    Por ejemplo:

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

  3. Importante: Incluya un botón de reproducción en su imagen de vista previa.

    Para que los usuarios comprendan que, si hacen clic en la imagen, se reproducirá un video, su imagen de vista previa debe incluir algún tipo de botón de reproducción. Google Ads no agregará ningún elemento a sus imágenes de vista previa para indicar que son videos.

Vínculos relacionados

¿Te resultó útil esto?
¿Cómo podemos mejorarla?

¿Necesitas más ayuda?

Accede para ver las opciones de asistencia adicionales y resolver tu problema rápidamente