Your Bluecore campaign can use Google’s annotations to display images and sales on the Google Promotions tab.
Google supports the following annotations:
Displays information about a promotion code or expiration date.
Displays a preview of up to 10 unique images.
Displays one image.
Annotations limitations
The email annotation placements will only appear for customers who:
Use the Gmail application on their mobile device.
Enable the Promotions tab.
Have the following settings on:
Images
Conversation view
Enable bundling of top email
Bluecore can’t record clicks from the product carousel.
Prerequisites
Contact p-Promo-Outreach@google.com to begin using annotations.
Before adding the annotations into Bluecore campaigns, preview your annotations to make sure they display as expected.
If you have any issues, you can reference Google’s best practices, troubleshooting, and FAQs or reach out directly to p-Promo-Outreach@google.com for troubleshooting assistance.
Setup annotations in Bluecore
No matter which campaign template you use, Bluecore recommends adding the snippet to the top or bottom of the email message for quick and easy editing.
The code snippet is invisible when the email is sent.
VTE template
Follow the steps to create a campaign, until you get to the template selection in the Message tab.
Click Create New Template > Visual Editor.
Click and drag the Code Block from the Basic Components section to the template.
Enter the Microdata code snippet for the annotation you want to appear on the Promotions tab. Make sure that the snippet details reflect the product details, promotion code, and other information you want to feature in the Promotions tab.
Code Editor template
Follow the steps to create a campaign, until you get to the template selection in the Message tab.
Click Create New Template > Code Editor.
In the custom code block, enter the Microdata code snippet for the annotation you want to appear on the Promotions tab. Make sure that the snippet details reflect the product details, promotion code, and other information you want to feature in the Promotions tab.
Additional code for the product carousel
The following code needs to be added into the VTE or Code Editor template for the product carousel to appear in emails:
// 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>
The following code can be used to pass the dynamic product link.
<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>