Ever wonder why your brand logo doesn’t appear in Gmail or why some brands email looks like the below in Gmail? This can be easily done by Gmail annotations. Gmail has recently launched a new Email experience for its users.
You’ll love they way email is presented by Gmail if you look at the above screen grab. This can be done by using Gmail’s new Promotions tab which empowers you to put your deals in the spotlight. Meaning in addition to standard inbox text – like a subject line, marketers can include additional information like promotion codes, a featured image, and deal expiration dates—all visible to your subscribers before they open your email.
Because, as per Jordan Grossman (Product Manager @Gmail) – GMAIL DOESN’T CREATE VALUE IN THE PROMOTIONS TAB. IT’S THE BEST EMAILS THAT CREATE VALUE. THE NEW PROMOTIONS TAB REWARDS BRANDS WHO SEND TRULY VALUABLE EMAIL BY MAKING THEM EASIER TO FIND WITH A RICHER MEANS OF DELIVERING THAT VALUE.
This is a great news for email marketers and here are some reasons
Logo or Brand icon
– You can add your brand icon to your email just like you send a message to your friend on Whatsapp 🙂Image preview
– The day of text only email is over now, you add a custom image (could be a replica of your hero banner) to your email itself to give your Gmail user a sneak peek of your message.
Deal badge (Green)
– Extend your key messaging by adding details on the value of the deal you’re offering. “20% Off,” “Free Shipping,” or “Buy 1 get 1 free” etc.Discount code badge (Grey)
– This is an optional field if you want to tell your users about coupon code you can directly tell here.Expiration date
– A powerful way to show sense of urgency.
Now coming to the main point, how to do that?
Here you go, just implement this code into your HTML template and you are done
Microdata format (add this to just below your <body> start tag, as below)
<body style="background-color: #f8f9fc; margin: 0 !important; padding: 0 !important;">
<!-- Start Gmail Promo Tab annotations code -->
<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Gmail" />
<meta itemprop="logo" content="https://universityofemail.com/wp-content/uploads/2017/12/cropped-aa-2.jpg" />
</div>
<div itemscope itemtype="http://schema.org/EmailMessage">
<meta itemprop="subjectLine" content="Gmail annotations for marketers" />
</div>
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="https://universityofemail.com/wp-content/uploads/2019/01/uoe.jpg" />
</div>
<!-- End Gmail Promo Tab annotations code -->JSON Format (add this to just above </head> end tag, as below)
<!-- Start Gmail Promo Tab annotations code -->
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "University of Email",
// If showing a logo, recommended is an https URL.
// It's not a requirement today, but may be in the future.
"logo": "https://universityofemail.com/wp-content/uploads/2017/12/cropped-aa-2.jpg"
},{
"@context": "http://schema.org/",
"@type": "EmailMessage",
// Alternative subject line, coming soon.
"subjectLine": "Gmail annotations for marketers"
},{
// Promotion card with single image.
// https URL is recommended. It's not a requirement today, but may be in the future.
// Any image size will work and will just be cropped automatically.
// Sample image is 538x138, 3.9 aspect ratio
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "https://universityofemail.com/wp-content/uploads/2019/01/uoe.jpg"
}]
</script>
<!-- End Gmail Promo Tab annotations code -->
</head>Note – Some ESP supports JSON code but some not, use whichever works for you, both are not needed 🙂
Plus – This feature doesn’t affect G-suit users
Thanks to Litmus who bring this up in my attention 🙂