Gmail unveiled yesterday a slew of new features for the Promotion Tab in their iOS and Android Gmail app. Technically some of these changes have been out for a while as early as as April of this year. In fact, Jordan Grossman, Google’s Product Manager of Gmail and Gmail ads gave a presentation on these features at the DDMA Email Summit in Netherlands back in July.

The new features include Single Image Previews, Deal Badges and Custom Logos although Jordan’s presentation also covered several “upcoming” features such as Topic Bundles and Catalog Cards.

Google terms these features as Annotations as senders would “annotate” the emails with Schema markup that allows Gmail to pick up these features.

Top Promotions

Before we go into the details, know that your email will display with these features only if it is featured in the Top Promotions section in the Gmail iOS or Android App. Otherwise it appears below in chronological order. Google has not offered any details how emails are selected to be displayed in the section but read on below for some tips.

Single Image Previews (PromotionCard)

Promotion Card Image Previews are images that are displayed underneath an email entry in the Promotion Tab. Senders can customize what is being displayed in these previews by inserting some Schema formatted code in the email. The Schema type for Single Image Previews is PromotionCard.

Gmail allows two options to embed Schema data. JSON (in the head) of the email or Microdata which fits better in the email body. Also some Email Service Providers strip the JSON code as it is embedded within a script tag. Therefore I prefer the Microdata format.

The preview image’s dimension is 538×138 although any image of a 3.9 (width/height) aspect ratio will work. Using images of different aspect ratios will result in the image being cropped (See the Eat24 example below).

PromotionCard JSON

<script type="application/ld+json">
[{
  "@context": "http://schema.org/",
  "@type": "PromotionCard",
  "image": "https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png"
}]
</script>

PromotionCard Microdata

<div itemscope itemtype="http://schema.org/PromotionCard">
  <meta itemprop="image" content="https://gmail-ads-markup-test.sandbox.google.com/sample.png" />
</div>

Many brands have already been testing Single Image Previews over the past few months and here are a few examples:

I reached out to some email marketers that have been part of the beta test on their experience and got a mixed feedback. Generally retailers who embedded imagery of products or call to actions that had a good tie in with their subject line saw a good lift in engagement and click throughs. However, emails that were less product oriented with more generic imagery saw less lift using Single Image Previews – which isn’t surprising actually.

Deal Badges (DiscountOffer)

Deal badges displays a deal description and promotion code under an email in the Promotion Tab. The deal description is highlighted in green and the promotion code is highlighted in grey. Deal Badges are specified in the email using the DiscountOffer Schema code.

Deal Badges consists of 3 parts:

• Description
  The description of the deal. Highlighted in green.
  
• DiscountCode
  Any coupon codes to redeem the deal (optional)
  (Otherwise set to blank value)
• Availability Start and End Dates
  Optional dates where the deal is valid
  (Otherwise set to blank value)

Warning: Setting availability end dates in the past will cause Gmail not to feature your email in the Top Promotions section

DiscountOffer JSON

<script type="application/ld+json">
[{
  "@context": "http://schema.org/",
  "@type": "DiscountOffer",
  "description": "30% off full-price styles",
  "discountCode": "LANTERN",
  "availabilityStarts": "2018-01-01T08:00:00-07:00",
  "availabilityEnds": "2018-12-30T23:59:59-07:00"
}]
</script>

DiscountOffer Microdata

<div itemscope itemtype="http://schema.org/DiscountOffer">
  <meta itemprop="description" content="30% off full-price styles" />
  <meta itemprop="discountCode" content="LANTERN" />
  <meta itemprop="availabilityStarts" content="2018-01-01T08:00:00-07:00" />
  <meta itemprop="availabilityEnds" content="2018-12-30T23:59:59-07:00" />
</div>

Custom Logos

As Jordan mentioned in the presentation, Gmail now allow you to set a Custom Logo for your email. From my tests, the Custom Logo is only displayed if your email happens to be displayed in the Top Promotions section.

Custom Logo JSON

<script type="application/ld+json">
[{
  "@context": "http://schema.org/",
  "@type": "Organization",
  "logo": "https://freshinbox.com/tools/gmailpromotab/assets/freshinbox-logo.png"
}]
</script>

Custom Logo Microdata

<div itemscope itemtype="http://schema.org/Organization">
 <meta itemprop="logo" content="https://freshinbox.com/tools/gmailpromotab/assets/freshinbox-logo.png" />
</div>

Markup and Annotation Tool

If you want to see how it looks like in your Gmail account, you can use this tool to send yourself an example. It generates the markup in Microdata format which works with more ESPs.

Send yourself a test here.

Tips

Google has kindly put out a “troubleshooting” list.

Besides ensuring your emails are properly authenticated, here are a few things I’ve discovered that helps get your email displayed in your Top Promotions list (Unfortunately I don’t have tips on how to get your email to appear on everyone’s Top Promotions yet :) ).

• If your email appears in the Primary Inbox, move it to the Promotions Tab folder and mark it as unread (by tapping on the envelope icon after opening the email).
• If you have availability dates, make sure the end date is not in the past.
• Get rid of other emails in the Top Promotions section by archiving them or refreshing the page.
• If your Top Promotions section is temporarily empty, try restarting and or updating the Gmail app.
• Verify that your ESP did not strip the tags by checking the email source.
• Finally try opening a new Gmail account and sending your test emails to that account.

Here’s a few more tips

• There is no “whitelist” or registration. Anyone can send emails with the new markup and the preview images should be displayed if the email lands in the Top Promotions/Picks section of the Promotion Tab.
• You can use any image dimensions in your markup – they will merely be cropped if the aspect ratio is off.

Let me know your thoughts in the comments!