Create Gmail ads with custom HTML

Suitable for advanced advertisers, custom HTML lets you create ads different from existing Gmail ad templates. These ads can include video and multiple calls-to-action. To create Gmail ads with your own customized layout, upload your own custom HTML files into Google Ads.

This article explains how to configure and upload your custom Gmail ads.

Before you begin

Important: Keep in mind that custom HTML Gmail ads retain a destination URL formatting, and are incompatible with final URLs and tracking templates. Learn more about Upgraded URLs.

Instructions

A custom HTML Gmail ad is a ZIP folder that contains all the files for your collapsed and expanded ad. To avoid problems, pay close attention to the strict formatting specifications detailed below.

The overall size limits of your ad are the following:

Your total ZIP folder: <1.25 MB
Number of files: <100 files
File size: <500KB

How to create your collapsed ad

For your collapsed ad, you’ll add 2 files to your ZIP folder:

the logo image (named “logo.png,” “logo.jpg,” or “logo.gif”)
the text file (named “‘teaser.txt”)

Logo image specifications

The file must be named exactly “logo.png,” “logo.jpg,” or “logo.gif” and the file format must be PNG, JPG, or GIF.

Logo image size: maximum 144px x 144px with aspect ratio 1:1
Maximum file size: 150KB
File formats: PNG, JPG, or GIF (non-animated)

The logo image is a small icon, graphic or brand logo.

The image will be displayed as a 50 x 50 square on normal resolution devices, but we accept up to 150KB for clearer viewing on some screens.

Text file specifications

The file must be named exactly “teaser.txt” and the file format must be TXT. Here’s an example of a properly formatted text file.

Advertiser: Business Name
Subject: Everything 20% Off at Business Name
Description: Buy new products at low prices!
Display Url: www.example.com
Landing Page: https://www.example.com/sale

Note: Follow the example exactly and be sure to enter the headings in English exactly as shown below. Also, be sure to include both the category (like “Advertiser”) and your specific information. The table below gives character limits and more guidance about what to include.

Headings	Character limits	What to include
Advertiser	20	Your company’s name or domain.
Subject	25	Your title can include an offer, % discount, or compelling announcement.
Description	90	Your description can be a short summary or a call to action.
Display URL	32	Your URL, as it will show in your ad
Landing page	no limit	Teaser redirect URL --used as the destination url for clicks on the "Sender displayed short URL" when the Expanded Ad is opened. You can add a static click tracking URL in this field. This is the page people will land on after clicking your display URL.

How to create your expanded ad

For your expanded ad, you’ll add 1 HTML file and 1 image folder to your ZIP folder:

Image Folder (named ‘Images’) containing image files for the expanded ad
HTML file named exactly “‘index.html”

Image folder specifications

Your ad must contain at least 1 image, and can contain up to 100 images. To embed videos in your expanded ad, jump to the video section below.
Max width per image: 650px
Max height per image: 1000px (Note: For the most effective ads, we recommend of no more than 650px height for the total ad canvas, which includes all your text and images.)

HTML file specifications

Technical Details

URLs: Must contain at least 1 absolute URL (can contain up to 15) and all special characters must be encoded (e.g. spaces, #).
Formatting: Control the layout using standard HTML tables to ensure consistent presentation across devices
Tracking: Static tracking URLs can be used to track external clicks. Impression tracking pixels and dynamic tracking URLs are not permitted. If you are using the "Gmail custom HTML ad" template, make sure to add the tracking URLs you want to use in the index.html file as well as in the teaser.txt file.
Markup: HTML (use UTF8 encoding), some HTML5 tags ( "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"), and some CSS (style attribute of tags only e.g. <div style="color: black" >) are supported

Markup not permitted

Javascript: <script> tags will automatically be removed from the ad
Stylesheets: <link> tags will automatically be removed from the ad
Flash
HTML5: The only supported tags are "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"
Audio
iFrames
Animated images: GIFs

Supported CSS

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

Add a video to your expanded ad HTML file

How to add a video

A YouTube video can be embedded into an ad with a preview window. When someone using a computer clicks the video image, the video will play in a lightbox within Gmail. After the user is done watching the video, they are returned to the Gmail expanded ad. On mobile, the video will play on the person’s designated video player (like the YouTube app or a browser).

Instructions: To add video from YouTube, code the YouTube link, image source, and display text to be appropriate for your ad. For example:

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

Note: When you preview the ad in Google Ads, the YouTube video will not show or play in the lightbox.
How to add a video in new tab

If you want the video to play in YouTube in a new tab, rather than in a lightbox, set the class as "nonplayable.”

For example:

<a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail Video"></a>
Important: include a “play” button in your preview image.

To show people that clicking the image will play a video, your preview image should include some type of play button. Google Ads does not add anything to preview images to indicate that they are videos.