Gmail promotions annotation

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:

Gmail annotation example
Gmail annotation example

 

Email on Acid promotion card
Gmail annotation with Email on Acid info.

 

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.

Start using the optimizer!

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

6 thoughts on “How to Display Images and Offer Information in the Gmail Promotions Tab [Free Tool]”

  1. 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)

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies