Gmail Annotations are a feature of the Gmail inbox that displays details about the offers contained in the email directly in the inbox. This feature displays details if an email is categorized in the Gmail promotions tab and provides additional incentive for contacts to engage with your email.
💡 Conversations must be enabled in the Gmail inbox for annotations to appear in the promotions tab.
The following features can appear in the inbox:
Company Logo: A logo can be specific to the annotations or for all emails
Company Name: This is a separate data piece from the send name you already set within Listrak. Gmail will generate a new header using the annotation
Subject Line: This is a separate data piece from the subject line defined in Listrak, but may be the same value
Deal Badge: The discount or promotion details e.g. 40% off or Free Shipping
Promotion or Discount Code: The code a contact would need to use to receive the deal
Expiration Date: The date the deal ends
Banner: An image that appears under the subject that can provide additional context for the email and offer
⚠️ Only emails in the promotions tab will display these features. Listrak does not control how Gmail categorizes emails in tabs.
Generating the Annotation
For Listrak Composer emails annotations must be generated using microdata. The microdata code can then be placed in an HTML element of your Composer email build. The metadata code specifies the elements above that you would like to include in the promotion annotation.
💡 If you are building emails in HTML Gmail also supports JSON that can be added to the head of your email code.
When generating metadata, you will specify the itemprop, or feature you would like to use, and the specific content that should appear for the item. e.g. an item prop for Company Logo would have a URL path to the image file as it's content.
Below is an example of code for one of Listrak's demo accounts that includes name, logo, deal badge (content), code. You will also see an example of a preview in the Gmail inbox. Check out the resources to get started writing your own annotations.
<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Bright Eyed and Bushy Tailed" />
<meta itemprop="logo" content="https://mediacdn.espssl.com/9505/Shared/Training/BEBT%20logo%20(2).png" />
</div>
<div itemscope itemtype="http://schema.org/DiscountOffer">
<meta itemprop="description" content="20% OFF" />
<meta itemprop="discountCode" content="SAVENOW" />
</div>
<div itemscope itemtype="http://schema.org/EmailMessage">
<meta itemprop="subjectLine" content="Don't miss out on our best offer of the year!" />
</div>
To get started coding your Gmail annotations:
Learn more about Gmail's available tags that can be used as item props.
💡 The tags outline the features that can be show in the annotations
Test your promotion code in Gmail's testing tool
⚠️ The test does not guarantee the annotation will render in a user's inbox
Check out Gmail's troubleshooting if your images are not appearing in the promotions tab
Adding microdata to your Listrak Emails
Once you have written your annotation code, follow the instructions below to add them to your Listrak email.
Open your existing email
Drag a one column structure to the top of your email
Drag an HTML component into the structure
Paste your annotation over the existing code in the HTML component
Save your message
Continue your creation, testing, and sending as you would for your other emails