How to Display Images and Offer Information in the Gmail Promotions Tab [Free Tool]
Gmail announced last week that it’s adding a new, powerful tool for email marketers: annotations for the Gmail Promotions tab. The Gmail promotions annotation – which will be gradually rolling out across mobile inboxes – allows email marketers to include additional branding and offer information when an email lands in the Promotions tab.
“You guys are the experts at creating value for our users, and we want to give you the keys of how emails…get previewed,” says Jordan Grossman, product manager for Gmail and Gmail Ads.
Here’s what the new annotations will look like in Gmail’s Promotion tab:
To add these features, Gmail has provided some code that email marketers and developers can use in their email header.
Here at Email on Acid, we were so jazzed about this new feature that we decided to take it one step further. We’ve created an easy-to-use, free tool that allows you to create the code for these annotations without needing to know any HTML. Enter your promotion information, upload an image, and we’ll do the coding work for you. Then, copy-and-paste the HTML into your email header and (hopefully) watch your Gmail open rates creep up.
Gmail Annotation Precursor?
We had heard some rumblings earlier this year about “promotion cards” when Gmail started testing them on a few select accounts. At the time, the Gmail promotion annotations – or “cards” – were only images.
In addition to the images, Gmail has given email developers the ability to add other content in email previews for a while now – such as order confirmations, event information and flight time details.
The new annotations seem to be a combination of the two – images and added information.
The goal of the annotations is to boost subscribers’ interest in emails that land in their Gmail Promotions tab, an inbox feature that has vexed many email marketers. These annotations give brands the opportunity provide more detail and context to an email; they can improve branding in the “from” field with a logo and company name and give an email more urgency with an offer expiration date.
How Do the New Gmail Promotion Annotations Work?
If you want to add these new promotional preview features to your email, there is a code snippet you will need to add to your email header. The snippet looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "Organization",
"logo": "https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png"
},{
"@context": "http://schema.org/",
"@type": "EmailMessage",
"subjectLine": "Subject line"
},{
"@context": "http://schema.org/",
"@type": "DiscountOffer",
"description": "20% off",
"discountCode": "PROMO",
"availabilityStarts": "2018-01-01T08:00:00-07:00",
"availabilityEnds": "2018-12-30T23:59:59-07:00"
},{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png"
}]
</script>
</head>
<body>
<p>Email Body</p>
<p>Line 2</p>
</body>
</html>
Within this snippet, you can edit the code to adjust preview elements including:
- Brand logo
- Promotion card image
- Offer (i.e. 20% off)
- Offer code
- Offer timeline/expiration
Soon, Gmail will also be adding a preview for your subject line.
However, Gmail says they cannot guarantee your promotion annotation will display in every user’s inbox, even if you include the correct code. Also, keep in mind that this code won’t display anything in the email, only in the inbox preview.
Although your Gmail annotation may not display in every subscriber’s Promotions tab, we still think it’s a good idea to include the snippet in your header – if Gmail’s algorithm does display your annotation, why not give your email an extra boost? Plus, it’ll only take a few minutes with our handy optimizer tool.
Email on Acid’s Gmail Promotions Optimizer
If you’re not a coding expert, or you don’t have the brain space to memorize the Gmail annotation code snippet, then this optimizer is the tool for you. It’s free and open to anyone – you don’t need an Email on Acid subscription – and can be found in our Resources.
To use the tool:
- Add the email subject and a URL for your brand logo.
- Set a promotional image – this is the larger image featured in the Promotion Card. Gmail recommends using an image that is 538 x 138 pixels, 3.9 aspect ratio. Keep in mind that Gmail will not support GIF and WEBP images here.
- Click “continue” to move on to the offer section.
- Choose whether you want to add a discount offer. If you do, fill out the offer (i.e. “20% off”), discount code, the offer start and end time, and the time zone.
- Click “continue,” and we’ll provide you with the email HTML that includes the code to display the annotation.
Let Us Know What You Think!
Have you started using the Gmail promotion annotations? How’d it go? Leave a comment below or hit us up on Facebook and Twitter.
Author: Melanie Graham
Born and raised in New England, Melanie has a background as a writer, editor and journalist. After roaming the U.S. as an expert vagabond, she’s landed in Denver as Email on Acid’s content manager. She’s a music nerd at heart who loves spending time at the piano.
Author: Melanie Graham
Born and raised in New England, Melanie has a background as a writer, editor and journalist. After roaming the U.S. as an expert vagabond, she’s landed in Denver as Email on Acid’s content manager. She’s a music nerd at heart who loves spending time at the piano.
6 thoughts on “How to Display Images and Offer Information in the Gmail Promotions Tab [Free Tool]”
Comments are closed.
What about ESPs that removes Script tags in emails ?
Do you have an alternative with meta data ?
Hi Sebastien –
The Google developer resource would be a good place to check for more information on this. They have some guides and references as well as support: https://developers.google.com/gmail/promotab/
I hope that helps!
Wow, I am loving this! The code generator is awesome. I still don’t see it my Gmail previews when I test, though. How far are they with the rollout?
Hi Elaine –
Glad to hear you find it helpful! We don’t know the exact details of the rollout, but there is a developer page that may be able to answer some of your questions and help troubleshoot if you’re still not seeing anything appear: https://developers.google.com/gmail/promotab/troubleshooting
Thanks, Melanie! I spoke too soon, actually — when using the Gmail app on my iphone as the client, it works beautifully! (Just nothing on web client or regular iphone mail client as of yet.) Thanks again for making it a breeze! (emailz = hard)
You got it, Elaine! For now, yes, it’s only on mobile so that’s where you can test and check.