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ínimo, 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 empresaAsunto: 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
-
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.
-
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>
-
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
- Para obtener información sobre los conceptos básicos, consulte Acerca de los anuncios de Gmail
- Para excluir los anuncios de Gmail de su campaña, consulte cómo excluir páginas web y aplicaciones