Skip to main content
All CollectionsBluecore Communicate EmailCampaigns
Using Gmail Inbox Annotations for the Google Promotions Tab
Using Gmail Inbox Annotations for the Google Promotions Tab

Learn more about how to use Gmail's inbox annotations to display offers and promotions within the Gmail inbox.

Updated over 3 weeks ago

Your Bluecore campaign can use Google’s annotations to display images and sales on the Google Promotions tab.

Google supports the following annotations:

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

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

  1. Follow the steps to create a campaign, until you get to the template selection in the Message tab.

  2. Click Create New Template > Visual Editor.

  3. Click and drag the Code Block from the Basic Components section to the template.

  4. 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

  1. Follow the steps to create a campaign, until you get to the template selection in the Message tab.

  2. Click Create New Template > Code Editor.

  3. 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>

Did this answer your question?