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: [caption id="attachment_5503" align="alignnone" width="422"]
Gmail annotation example[/caption]
[caption id="attachment_5324" align="alignnone" width="388"]
Gmail annotation with Email on Acid info.[/caption]
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.
Table of content
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
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.
