Google has released new features around their promotions tab which are now supported in Bluecore emails.
With Gmail Inbox annotations you can annotate emails to display Deal annotations and Product carousels in the Promotions tab.
Email annotations placements are dependent upon customers:
Having the Gmail mobile application installed on their Android or iOS device
Having the promotions tab enabled
Having the images set to always show
Having the conversation view enabled
Having the bundling of top emails enabled
NOTE: Your annotations might not be visible to all customers that receive the email. A variety of factors affect whether email annotations are shown to your customers, including quality filters and frequency limits.
To use annotations on the Promotions tab, you must first email p-Promo-Outreach@google.com to get started. Reach out to your Bluecore Customer Success Manager for any additional assistance and guidance.
NOTE: There is a limitation that the clicks will not be recorded on the images displayed in the product carousel.
SETUP WITHIN BLUECORE
The below instructions are a step-by-step overview of how to add the code snippet to a campaign built with the visual template editor (VTE). The code snippet can also be placed into an HTML email built with Bluecore's code editor.
Navigate to the Flag (Campaigns) Icon on the left-hand side.
Select either Automated or One-Time Campaigns under Communicate.
Click + New > Campaign or select an Existing Campaign.
Navigate to the Message Tab.
Navigate to VTE.
Drag and drop the code block widget onto the canvas.
Insert the code snippets for deal annotation and/or product carousel.
TIP: Bluecore recommends adding the code snippet to the top or bottom of the email message, allowing you to quickly and easily edit it, if applicable. This code snippet is invisible when the message is sent.
CODE SNIPPET FOR DEAL ANNOTATION
Deal annotations display text-based details about a promotion, such as a promotion code or expiration date.
<div itemscope itemtype="http://schema.org/DiscountOffer">
<meta itemprop="description" content="DESCRIPTION"/>
<meta itemprop="discountCode" content="DISCOUNT_CODE"/>
<meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
<meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
</div>
Replace the following values. For each property, you can either include a value, or omit the property from your code.
DESCRIPTION (Optional): The text that displays with the deal badge, such as 20% off or Free shipping.
DISCOUNT_CODE (Optional): The discount or promotion code for the offer, such as 20TODAY.
START_DATE_TIME (Optional): The date and time when the offer begins in ISO 8601 format, such as 2023-09-25T18:44:37-07:00.
END_DATE_TIME (Optional): The end date and time of the promotion in ISO 8601 format, such as 2023-10-25T18:44:37-07:00.
CODE SNIPPET FOR PRODUCT CAROUSEL
Product carousels display multiple image previews for a promotion, such as the following:
// Build the first image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="IMAGE_URL1"/>
<meta itemprop="url" content="PROMO_URL1"/>
// Optionally, include the following PromotionCard properties:
<meta itemprop="headline" content="HEADLINE1"/>
<meta itemprop="price" content="PRICE1"/>
<meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/>
<meta itemprop="discountValue" content="DISCOUNT_VALUE1"/>
<meta itemprop="position" content="POSITION"/>
</div>
// Build the second image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="IMAGE_URL2"/>
<meta itemprop="url" content="PROMO_URL2"/>
// Optionally, include the following PromotionCard properties:
<meta itemprop="headline" content="HEADLINE2"/>
<meta itemprop="price" content="PRICE2"/>
<meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/>
<meta itemprop="discountValue" content="DISCOUNT_VALUE2"/>
<meta itemprop="position" content="POSITION"/>
</div>
Use this code snippet to pass the dynamic product link.
// Build the first image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="{{block_0.products.0.image|smart_image_url(width=725,height=725,namespace='<namespace>')}}"/>
<meta itemprop="url" content="{{block_0.products.0.url}}"/>
<meta itemprop="headline" content="Price Drop on {{block_0.products.0.name}}"/>
</div>
// Build the second image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="{{block_0.products.1.image|smart_image_url(width=725,height=725,namespace='<namespace>')}}"/>
<meta itemprop="url" content="{{block_0.products.1.url}}"/>
<meta itemprop="headline" content="Price Drop on {{block_0.products.1.name}}"/>
</div>
// Build the third image preview in your product carousel:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="{{block_0.products.2.image|smart_image_url(width=725,height=725,namespace='<namespace>')}}"/>
<meta itemprop="url" content="{{block_0.products.2.url}}"/>
<meta itemprop="headline" content="Price Drop on {{block_0.products.2.name}}"/>
</div>
Replace the following values. For each property, you can either include a value, or omit the property from your code.
IMAGE_URL: The URL to your image in PNG or JPEG format, such as https://www.example.com/image.png. The supported aspect ratios are 4:5, 1:1, 1.91:1. For product carousels, each image must have a unique URL and use the same aspect ratio.
PROMO_URL: The URL for the promotion. When users click on the image from the Promotions tab, they visit this URL.
HEADLINE (Optional): A 1 to 2-line description of the promotion that displays under the preview image.
PRICE (Optional): The price of the promotion.
PRICE_CURRENCY (Optional): The currency of the price in 3-letter ISO 4217 format, such as USD. Determines the currency symbol displayed with the price.
DISCOUNT_VALUE (Optional): The amount subtracted from the price to display an adjusted price. The adjusted price is displayed next to the original price.
For example, if the discountValue is 25, the price is 100, and the priceCurrency is USD, the adjusted price displays as $75.POSITION (Optional): The position of the card in the carousel.
You can include up to 10 image previews in a carousel, and each image must be unique.
PREVIEW AND TEST
Due to the real-time nature of these promotions, previewing and testing these promotions is a bit tricky. You can copy and paste the code that you've modified into this Google annotation preview tool to see what it looks like.
To see the message in your inbox, Bluecore recommends creating a Gmail email account for your team ending in promotabtesting@gmail.com, for example:
mycompany.promotabtesting@gmail.com.
This account will have more aggressive email ranking and bundling to make testing easier and faster. This is recommended by Google for testing because sometimes they put the email in a holdback group. To bypass that, they suggest creating the new testing account in this way.
NOTE: Even if you use this email account, it is not guaranteed that every test send will showcase the annotation.
FAQ
Q: How does Bluecore support Gmail inbox annotations?
A: Bluecore supports Gmail inbox annotations by adding the above code snippet to an email campaign, not the script-tag method that may be supported by other email service providers.
Q: How does this work with our dynamic coupons?
A: If you are using a dynamic coupon in VTE and Google annotation code, it will show the same coupon code in both places. You must insert {{coupon.coupon.code}} where the coupon code is supposed to go within VTE, instead of a static code like "PROMO".
Q: Do all types of Bluecore campaigns support Gmail inbox annotations?
A: All campaign types support this. However, dynamic coupon codes are not currently supported in transactional messages, so a dynamic code would not be able to be referenced in those campaigns.
Q: Does this work in VTE and code editor?
A: Yes, Gmail inbox annotations may be used in either.
Q: How can I do end to end testing?
A: In order to test annotation, campaigns have to be sent to at least 25 recipients as Google has a system to detect mass emails. Alternatively, use this preview tool for testing the scripts.
Q: How can I view reporting for this?
A: At this time, there is no reporting available.
Q: Are Gmail inbox annotations supported on desktop?
A: At this time, Google is working on desktop support for Gmail.
Q: Is there any cost associated with these new features?
A: No, it is free.
Q: What if I annotate an email that lands in a tab other than the Promotions tab?
A: The feature only displays in the Promotions tab.
Q: Can I change the color of the Deal Badge?
A: No, the Deal Badge is green and the color cannot be changed.