Search
Clear search
Close search
Google apps
Main menu
true

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 AdWords. 

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.

 

Choose the AdWords experience you're using. Learn more

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: < 144 x 144
  • File size: < 500KB
  • 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 144 x 144 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. 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.

  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 100 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

  1. 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 AdWords, the YouTube video will not show or play in the lightbox.

  2. 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>

  3. 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. AdWords does not add anything to preview images to indicate that they are videos.

  4. How to remove ad overlays from your embedded videos

    Within the host YouTube account, you can disable ads on top of your videos. Learn more

Add an embedded form to your expanded ad HTML file

Note: this functionality is only available to whitelisted clients. 

HTML forms in Gmail ads shorten the steps to conversion. Create the form using HTML and the supported CSS, and be sure to only use fields from the list of permitted form fields below.

Privacy concerns

If a form is embedded in the ad, you must include a link to your privacy policy and comply with the AdWords irresponsible data collection and use policy.

All information entered in the forms will be passed directly to you via the GET or POST method, nothing is passed or saved on Google servers. You are responsible for processing the data.

When creating forms in your custom HTML ads, remember that users may be hesitant or unwilling to share certain information, especially when submitting information outside of your website.

Consider the following questions before creating an HTML form:

  • Is the information you’re requesting unnecessary for giving a relevant offer for the user?
  • Could the information, in the wrong hands, be used to harm the user?

If you answered "yes" to either of these questions, it may not be a good idea to include HTML forms in your promotion.

Step 1. Create your form

The following are form fields permitted in HTML forms for Gmail ads.

Basic info Permitted form fields
Category Name (First name, Last name)
Address
City
State
Zip code
Country
Email address
Phone number
Age
13-18
18-24
25-34
35-44
45-54
55-64
65 or more
Gender
Best time to call
Program or product of interest
Education Year graduated
Highest level of education
Local and classifieds Desired location of service
Type of service
Finance/Insurance
ranges for $ fields:
0 - 14999
15000 - 24999
25000 - 39999
40000 - 59999
60000 - 74999
75000 - 99999
100000+
Amount of loan (range)
Currency
Finance type (loan, mortgage, credit card)
Household income (range)
Investible assets (range)
Life insurance cover amount (range)
Military member
Own or rent (auto, home, etc.)
Rate your credit
very poor
poor
fair
good
excellent
What is your home worth? (range)
Automotive Car make/model
Travel Origin or destination
Departure/return date
B2B Company
Job
Title
Number of employees
1-10
10-50
50-100
100-500
more than 500

Step 2. Add form validations

To make sure people enter valid information, you can add the following form validations.

Non-empty input: To ensure that a field is not left empty, add 'required' to the input <input required type="text" size="25">
border-Telephone type input*: To ensure a valid phone number format, add 'x-autocompletetype="phone-full"' Accepted format will be anything that has 10 digits <input type="text" x-autocompletetype="phone-full" size="25">
Email type input*: To ensure a valid email format, add the attribute 'x-autocompletetype="email"' Accepted format will be a text string in the format xxx@xxx.xxx. <input type="text" x-autocompletetype="email" size="25">
Zip code type input*: To ensure a valid zip format, add the attribute 'x-autocompletetype="postal-code"' Accepted format will be a string beginning with 5 digits. <input type="text" x-autocompletetype="postal-code" size="25">

*If the field is not marked as 'required', it will only be validated if it contains a value.

Related links

Was this article helpful?
How can we improve it?
Previous New
Reach more customers with an online ad

With AdWords, you can run ads on Google to stand out on local searches. Only pay when your ad is clicked. [Learn more]

Sign Up for AdWords