Gmail promo tabs 2.0: More powerful ways to annotate emails in the Promotions tab
22 February
Table of contents
1.
Short intro
”With the new Gmail Promotions tab, Samsung has the opportunity to begin more meaningful conversations with recipients the moment they open Gmail, creating convenience and an increased visual experience.”
Jake Ade,
Senior Marketing Manager of CRM & Loyalty at Samsung
The same is relevant for all companies that send email newsletters with sales, discounts, and product launch announcements.
Yet, many noticed that this awesome feature was kind of unavailable for a while. How come?
This is because Gmail has been improving its Annotations for the Promotions tab feature. And now, it has been released as more functional and even more helpful.
What are these upgraded email annotations, and how will they work — find out in this post.
Please note that this feature is temporarily restricted for the EU.
Short intro
In 2019, Gmail released its new option, Annotations for the Promotions tabs.
It allowed brands to show:
- deal (like the discount amount);
- featured product or product category;
- start and end date of the sales;
- and the product image.
Not only did such annotations give the recipients an idea of what was inside the email, but they also grabbed recipients' attention.
As a result, brands saw an increase in OR.
“We’re impressed with the Gmail Promotion tab results. After annotating our email with the Redbox logo and rich images of our movie night experience, we saw dramatic increases in open rates, external clicks, and conversions from Gmail users.”
Ash Eldifrawi, Chief Marketing and Customer Experience Officer at Redbox
Stripo and a few other prominent brands are now running A/B tests to provide you with real numbers showing how beneficial these Annotations for the Promotion tabs are.
Gmail annotations for the Promotions tab 2.0
Product carousel
Oh, yes. You can now add up to 10 product images to your email annotations.
Important to note:
Your images should have the same aspect ratio. For instance, if you add three cards with different aspect ratios, your carousel won't be displayed. And if you add six cards with two of them having the same aspect ratio, then only these two cards will be displayed in recipients' inboxes.
There are two types of these product cards
1. Product cards with prices and product descriptions
They will have prices, product names, and unique links that may take users to the respective pages on your website.
How to build a product carousel with prices and product descriptions:
To build such a product carousel on your own, paste this code sample into the <head> section of your email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://IMAGE_URL_1.jpg",
"headline": "test headline",
"price": 123,
"priceCurrency": "USD",
"discountValue": 24, // this value will be subtracted from the full price
"url": "https://google.com"
},{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://IMAGE_URL_2.jpg",
"headline": "test headline",
"price": 123,
"priceCurrency": "USD",
"discountValue": 24, // this value will be subtracted from the full price
"url": "https://google.com"
},{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://IMAGE_URL_3.jpg",
"headline": "test headline",
"price": 123,
"priceCurrency": "USD",
"discountValue": 24, // this value will be subtracted from the full price
"url": "https://google.com"
}]
</script>
</head>
Replace the following values for each promotion card:
- IMAGE_URL is the URL to your product image in .png or .jpeg formats (e.g., https://www.example.com/image.png). The supported aspect ratios are 4:5, 1:1, 1.91:1. Each image must have a unique URL and use the same aspect ratio.
- PROMO_URL is the product URL. Upon a click on the image in the Promotions tab, your users are directed to this URL (product page).
- HEADLINE (optional) is a 1 or 2-line product description displayed under the product image.
- PRICE (optional) is the product price.
- PRICE_CURRENCY (optional) is the currency of the price. Please, be advised that you need to use a 3-letter currency code (not to confuse with a currency symbol) in accordance with ISO 4217. E.g., USD, AUD, UAH.
- DISCOUNT_VALUE (optional) is the discount amount. You set the original price, then specify the discount value. In this case, Google counts the new price automatically. It is shown next to the original price. E.g.,, the discountValue is 25, the (original) price is 100, and the adjusted price is displayed as $75.
Please note that upon a click on a product card in the product carousel, users are directed not to your email but to your website.
2. Product cards with product images only
If you like, you can have 10 product images with 1 deal badge (the discount amount) for all of them. And yes, links are still all unique for each product image.
How to build a simple product carousel:
To build this one on your own, please use the code sample above. Just be sure to omit the values marked as optional.
Automatically generated product cards
If you have not manually set email annotations, Gmail will automatically extract product images and information to generate a product carousel.
This one was built automatically.
How does it work?
They use machine learning (ML) that scans your email. If inside your email, it detects any repeat patterns and repetitive elements that ML sees as elements of a product card; then Google automatically generates a product carousel for you.
Please note that product descriptions, prices, etc., will not appear in Automatic extraction.
To better understand what we mean by “repeat patterns,” please have a look at the two emails below:
Example 1:
Email from Comfy
Example 2:
Email from Epicenter
ML detects and extracts the first repeat pattern. Even though there are two of them in this email.
The annotation to this email was featured right at the beginning of the “Automatically generated product cards” section.
Single image
No worries, Google still supports this option.
How to build a single preview image:
To create a single preview image on your own, just paste this code sample into the <head> section of your email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "IMAGE_URL",
"headline": "HEADLINE",
"price": PRICE,
"priceCurrency": "USD",
"discountValue": DISCOUNT_VALUE
"url": "YOURURL"
}]
</script>
</head>
The meaning of the values is explained in the “Product carousel” section.
Replace the following values for each promotion card:
- IMAGE_URL is the URL to your product image in .png or .jpeg formats (e.g., https://www.example.com/image.png).
- YOURURL is the product URL. Upon a click on the image in the Promotions tab, your users are directed to this URL (product page).
- HEADLINE (optional) is a 1 or 2-line product description that is displayed under the product image.
- PRICE (optional) is the product price.
- PRICE_CURRENCY (optional) is the currency of the price. Please, be advised that you need to use a 3-letter currency code (not to confuse with a currency symbol) in accordance with ISO 4217. E.g., USD, AUD, UAH.
- DISCOUNT_VALUE (optional) is the discount amount. You set the original price, then specify the discount value. In this case, Google counts the new price automatically. It is shown next to the original price. E.g.,, the discountValue is 25, the (original) price is 100, and the adjusted price is $75.
Deal annotation
Yes, we can still show the discount amount, promo code, and the sales end date in the annotations.
How to build a deal annotation:
To create a deal annotation on your own, just paste this code sample into the <head> section of your email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "DiscountOffer",
"description": "DESCRIPTION"
"discountCode": "DISCOUNT_CODE",
"availabilityStarts": "START_DATE_TIME",
"availabilityEnds": "END_DATE_TIME"
}]
</script>
</head>
Replace the following values for each promotion card:
- DESCRIPTION (optional) is the text that shows the deal badge. E.g., 20% off or Free shipping.
- DISCOUNT_CODE (optional) is the promo code for the offer. E.g., STRIPO2023.
- START_DATE_TIME (optional) is the date and time when the offer starts. Be sure to stick to the ISO 8601 format. E.g., 2023-02-22T18:44:37-07:00.
- END_DATE_TIME (optional) is the date and time when the offer starts. Be sure to stick to the ISO 8601 format. E.g., 2023-02-23T18:44:37-07:00.
Requirements for images
Google softened the requirements for images yet added a new one.
- Images should have little to no text on them at all, as the product descriptions will be retrieved from your product card/email.
- Images should reflect the message.
- N
ow support almost all common image aspects. However, their recommendation is 2:3, 4:5, 1:1, 3:2, and 1.91:1.
The way it looked before:
Only a 3.9:1 ratio was allowed before.
Email from Pinterest
The way it looks now:
Most of the common image aspects are allowed now.
A made-up example
Tracking email annotations’ performance
Of course, when you try a new thing, you want to know how it performs and if it is worth your time and effort.
So, how do you measure Gmail’s email annotations?
Currently, there is only one way to do that — adding a tracking pixel to the image/images in the single image preview or product carousel.
All the links in your product carousels remain untrackable. Yet, the pixel shows how many times the product cards were shown to recipients.
What can you do with this data?
Run an A/B test to measure OR:
- segment your contacts and choose only those who use Gmail;
- divide this half in two;
- group A receives a regular email without annotations;
- group B receives an email with email annotations with the tracking pixel embedded;
- check how many times users saw your email annotations and how many of them opened your emails;
- compare OR for both groups.
We believe there is a way to measure the conversion of emails with annotations. We are now testing it. And if it proves to be reliable, we will describe this method and will share the results.
Other changes the new release brought us
- With the new version of Annotations for Promotions, you do not need to get to “Top Picks” to show your annotations to recipients as long as your email gets to the Promotions folder. Please be advised that the logo will only be displayed if the email appears in the ‘Top Picks.’ However, if you authenticate yourself adhering to Google’s BIMI standard, your logo will be displayed no matter where the email goes — whether to the Top Picks or a general promotions tab.
- The old version of Gmail’s email annotations has support for JSON-LD and Microdata markups. Today Google says they only have support for JSON-LD. Yet, they do not say that your data will not perform or will perform wrong if you use the Microdata markup.
- Product carousels may now be created by Google automatically. And how this happens we described in the Product carousel section.
- We’ve already mentioned this, yet I’d like to repeat it: Upon clicking on a product image in a product carousel, users get to your website, not your email.
What else to expect
- Currently, just like it used to be, email annotations perform on mobile devices only. And now Google says that they are going to enable these annotations for desktop devices as well. Yay!
- Email annotations will be available for the EU in the near future.
Current restrictions
- Gmail Annotations are on for whitelisted email senders only. How do you get whitelisted? Email Google at mailto:p-gmail-outreach@google.com.
- Test sends (test emails) will not work. Google has an internal tool to detect whether this is a single or a mass email. Solution? Send yourself kind of a mass email.
- As we said, the annotations are currently in the beta stage. Google is testing them with a group of well-known brands. You might have been included in it as well, without any notification.
When will Stripo upgrade its email annotations builder?
As you know, you could generate such annotations with the Stripo annotations builder.
Yet, we have been working on implementing the new version of Gmail’s email annotations for like a month. And in about two-three weeks, we will release the new, upgraded version of the generator so you can build single image previews and product cards with no coding skills.
Wrapping up
The Annotations for Promotions tab feature:
- provides higher conversion rates as recipients are directed to your websites immediately without needing to open emails first;
- makes your email way more noticeable.
Please note:
We will update the manual on creating Annotations for the Promotions tab, totally no code, in our dedicated guide.
Build annotations for your emails to stand out from the crowd
2 comments