Annotating Your Email for the Google Promotions Tab

Sailthru supports email Annotation for the Google Promotions tab. Add the code and your email could be highlighted at the top of the Promotions tab – include images, deals, and expiration dates. Sailthru was an early Gmail partner in testing and launching this exciting capability.

What’s a Gmail Annotation?

A Gmail Annotation is the code you add to your template. It creates the content that Gmail uses to highlight your message at the top of the Promotions tab. If Gmail selects your message to highlight, it displays with an expanded presence at the top of the inbox and features a preview image, discount code, and expiration date.

This image was created using Gmail’s Get Started Preview

Getting Started

Ready to get started? Contact your Customer Success Team member or Sailthru Support so we can enable your account to use the promotions tab schema code in your emails. You may also need to seek approval directly from Google & GMail to activate this feature for your sending domain.

Adding an Annotation

You can add an annotation as you build your template in Template Editor or as you create a campaign.

Notes

  • Your annotation is placed in the <head> tag of your template.
  • It is enclosed in <script> tags.
  • Within the <script> tag, your annotation is enclosed in square brackets [ ].
  • Each section of your annotation is enclosed in curly brackets {}.
  • Each section of your annotation requires the context and type to be declared.

The tags and structure of your annotation should resemble the following sample:

<head>
<script>
[{
   "@context": "http://schema.org/"
   "@type": "Type Name Here"
},{
   "@context": "http://schema.org/"
   "@type": "Type Name Here"
}]
<script>
</head>

Note: To preview or test your annotation code, go to Gmail’s Get Started.

In Template Editor

  1. In the tag of your template, add a <script> tag that includes application/ld+json as the script type:
    <script type="application/ld+json"> </script>
  2. Within the script tags, add your company logo:
    [{
      "@context": "http://schema.org/",
      "@type": "Organization",
    
      // If showing a logo, we recommend using an https URL.
      // It's not a requirement today, but may be in the future.
      "logo": "https://www.example.com/images/logo.png"
    },
  3. If you’re running a discount offer, you can add your offer information:
    {
      "@context": "http://schema.org/",
      "@type": "DiscountOffer",
      // Describe your discount, this will be shown as a badge (eg "25% off" or "free shipping")
      "description": "15% off",
      "discountCode": "15OFF",
      "availabilityStarts": "2019-04-25T13:51:11-07:00",
      "availabilityEnds": "2019-04-30T13:51:11-07:00"
    },
  4. Add a Promotion card to add a primary display image.
    {
      // Promotion card with single image.
      // We recommend using an https URL.  It's not a requirement today, but may be in the future.
      // Any image size will work and will just be cropped automatically.
      // GIF & WEBP images are not supported and will be filtered out.
      // Sample image is 538x138, 3.9 aspect ratio
      "@context": "http://schema.org/",
      "@type": "PromotionCard",
      "image": "https://www.example.com/example_images/sample.png"
    }]

In Campaigns

To add a Promotion Annotation to a campaign, create a new campaign and add your selected template.

Follow the instructions for In Template Builder to add your annotation.

To add an annotation to a template built in Email Composer, add it to your campaign. This will give you access to the <head> tag.

In Email Composer

To add a Promotion Annotation to an Email Composer template, create a new template or open an existing template.

Email Composer does not expose access to the <head> tag, which means the above examples can’t be used. Gmail allows a different code block to be used in HTML when the <head> tag can’t be accessed.

  1. Add an HTML block to the top of your template.
  2. To build your annotation, use this code snippet from Google instead. Insert your annotation information in the code.
    <div itemscope itemtype="http://schema.org/Organization">
       <meta itemprop="logo" content="https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png" />
    </div>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
       <meta itemprop="description" content="20% off" />
       <meta itemprop="discountCode" content="PROMO" />
       <meta itemprop="availabilityStarts" content="2018-01-01T08:00:00-07:00" />
       <meta itemprop="availabilityEnds" content="2018-04-30T23:59:59-07:00" />
    </div>
    <div itemscope itemtype="http://schema.org/PromotionCard">
       <meta itemprop="image" content="https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png" />
    </div>

    Note: You can find the code snippet and troubleshooting tips here: https://developers.google.com/gmail/promotab/troubleshooting

  3. Copy and paste your Annotations code into your HTML block. It should resemble the following image.
    The Content HTML Block settings tab with Google Analytics code

Note: The alternate code can also be tested in the Annotations testing tool.

Top