Thanks for the update - Discount offer works well for us as well but other Google Annotations that also have images displayed - are simply not working for us…

At least for me, I’m able to do this using the new HTML block feature and the JSON. I just did a simple Discount Offer following Google’s dev docs here: https://developers.google.com/gmail/promotab/overview#json-ld

I added the HTML block to its own section beneath my email’s footer and made sure no padding was set.

<script type="application/ld+json">
t{
  "@context": "http://schema.org/",
  "@type": "DiscountOffer",
  "description": "DESCRIPTION",
  "discountCode": "DISCOUNT_CODE",
  "availabilityStarts": "2024-11-22T00:00:00-05:00",
  "availabilityEnds": "2024-12-01T02:59:59-05:00"
}]
</script>

Good luck with BFCM everyone!

Has anyone got this working?

Any updates?

Seems that a lot of other ESPs has this simply built in to their editor, not sure why Klaviyo has such a hard time implementing this...@Taylor Tarpley?

Thanks!

Curious to find out if there are any updates here, or discussed in another thread @Taylor Tarpley?

I’ve managed to get deal annotations working to some extent, by simply adding the microdata html to a text block in the campaign editor, but not the product carousel.

Thanks!

How is this still not supported in Klaviyo after so many years!

While trying to troubleshoot this issue, I think I found the reason why the annotation is failing to render.

Before I dive into it, and for full disclosure:

• We are testing this with a Single Image annotation, which follows the same format as the product carousel one
• We are using microdata, not JSON
• We disabled embedded styles as suggested earlier by @Taylor Tarpley 
• We are testing this with HTML email, not those made in the Klaviyo editor. Any microdata is stripped completely from the text field in Klaviyo editor as soon as you hit Save. 
• I am not a coder/developer by any stretch of imagination

This is the code snippet that was added in HTML:
 

<div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="https://d3k81ch9hvuctc.cloudfront.net/company/UyMYJc/images/8a073d85-2c45-4ee5-ae3d-45f0a331aa34.jpeg"/>
      <meta itemprop="url" content="https://website.com/productpage"/>
      <meta itemprop="headline" content="Product Name"/>
      <meta itemprop="price" content="54.97"/>
      <meta itemprop="priceCurrency" content="USD"/>
      <meta itemprop="discountValue" content="20"/>
</div>

When the test email arrived to our test gmail account (one made specifically for testing this feature, that ends with promotabtesting@gmail.com), the code has been changed and now appears as:

 

<div itemscope=3D"" itemtype=3D"http://schema.org/PromotionCard">
<meta content=3D"https://d3k81ch9hvuctc.cloudfront.net/company/UyMYJc/image=
s/8a073d85-2c45-4ee5-ae3d-45f0a331aa34.jpeg" itemprop=3D"image">
<meta content=3D"https://website.com/productpage" itemprop=3D"url">
<meta content=3D"Product Name" itemprop=3D"headline">
<meta content=3D"54.97" itemprop=3D"price">
<meta content=3D"USD" itemprop=3D"priceCurrency">
<meta content=3D"20" itemprop=3D"discountValue">
</div>

When I paste this transmogrified code back into the Gmail Annotation Preview Tester, it will not render and displays error messages as such:

The changed order of arguments in the meta tag should not make a difference, but I did notice that every instance of “=” became “=3D”
%3D is Unicode for an equal sign, but here 3D is preceded by an actual equal sign, not a percent sign. 

So I started manually changing each instance of =3D and the code started to render bit by bit as I hit “Preview” with each change

 

When all of the instances of =3d are changed back, the preview tool renders the annotation same as the original code - the order of the supplied argument does not matter.

I’ve opened a support ticket with Klaviyo to see if there’s any news on this, and to find out when and how we can start using this feature. If anyone else has any other info, please scream from the rooftops.

Also wondering if there are any updates on getting the annotation to work?

Hey everyone,

Are there any updates on Klaviyo's Gmail annotation feature?

I tried disabling CSS settings, making emails from pure HTML, and adding microdata for Gmail annotation, but got no result .:(

Hi, I wonder if you guys can do the annotations, I tried both steps, but still failed.

Should be a feature in the email drag and drop. Give me a spot to store it. Klaviyo you guys render the Google syntax. I’m surprised this isn’t a feature at this point. Right now I’m scrolling through my gmail looking at all the other brands using this. It’s compelling!! And I can’t do it unless I switch to html template and increase the work effort. Where’s the easy button?

Sales Force were able to get it working inside their editor with no issues - https://help.salesforce.com/s/articleView?id=sf.mc_ceb_google_promotions_tab.htm&type=5

Hi all,

Thank you all for the collaboration, sharing and troubleshooting you’ve demonstrated together with your peers in the Community! After conversing with our team, I was able to confirm some best practices that would be helpful in sharing!

In addition to confirming what @cassy had previously mentioned that Google Annotations will not work through a drag-and-drop editor, this will require a custom coded HTML template. Our experts were also able to share that some success can be seen when following these two steps:

• Disable the setting ‘Enable embedded styles’ under account Settings > Email > CSS Optimization
• create and upload the template as a pure HTML template. I actually couldn’t see the option to do that via the new editor, so you have to do ‘Create Template’ and then select the old editor, and then select the upload tab that then shows up and import it there

While we have seen some success using these two steps listed above, guaranteed placement is outside of Klaviyo’s control and ultimately up to Gmail/Google. This includes configuring a banner image to show and following the syntax laid out by Google. Within our own tests we were not able to find a permanent method to configure annotations in Klaviyo to permanently secure display in a certain section of the promotions tab.

Hope this helps!

-Taylor

I also want to add this code to my promotional emails. Klaviyo team, please fix it of us!

Any chance of a response Klaviyo team?

@Klaviyo Team where are we with this?

Every other ESP has support for this now. When will this be integrated into your editor?

https://www.litmus.com/blog/gmail-promotions-tab-updates/

Sorry I forgot to quote your message to reply. Hope you see my message above and Klaviyo can shed some light on this.

I have the code working inside Googles Preview Tool, but it doesn’t actually work when Klaviyo sends it out.

I think it has to do with Klaviyo blocking scripts so you need to use Microdata.

Then even once you have the Microdata and add it to the email head section, Klaviyo moves all that code to the body.

Even with the gmail promo annotations microdata code being added inside the body, the preview tool shows it working, but when testing, I could never get it to show up in the email once Klaviyo delivers it to a Gmail recipient.

Would love to hear from anyone that has got this working, particularly anyone managing to get carousel images to show in Promotions tab. For me, after following all the steps from Google and mentioned about, still not seeing the annotations/images.

Not really, unfortunately. I tried a few ways to test, but none ended up like I was hoping. 

I’ve been on other projects since, but plan to try get this working somehow!

Any luck on this? I can't seem to make it work even with the fix that @gjoyce-SHEEX  posted.

For one, you have to convert your template to HTML, then you can add the microdata version – the script ones get removed.

However, still no luck getting dynamic content to display.

For example, instead of static 
<meta itemprop="reservationNumber" content="abc456"/>
I need
<meta itemprop="reservationNumber" content="{{ event.reservation_id }}"/>
etc…

Going to try do it inline...

Whatever I paste on Klaviyo’s editor gets stripped! - see attached.

This is not working for me.

I don’t see how this thread is marked as SOLVED?

Note: I checked the allow CSS options under my account settings.

-Artur

I added both this code and it didn’t populate in Gmail and also the code they provide in this page.

https://developers.google.com/gmail/promotab/overview

Seems to not work, can someone help by sharing a workable code and maybe a template that goes with it?

When I try add metric event data, it breaks. 

Was the above example static or dynamic?

For those following this thread, I was able to successfully code this markup using microdata that did not get stripped from Klaviyo templates (like the json script) and successfully rendered in the gmail app in a test email. Here is the code that should be placed underneath the opening <body> tag in your email. In the example below, the schema elements match those shown in the Email Annotations previewer on the Google Developers Site.

<!-- ======== GMAIL PROMO TAB ======== -->
<div itemscope="" itemtype="http://schema.org/Organization">      
  <meta content="https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png" itemprop="logo"/>
</div>

<div itemscope="" itemtype="http://schema.org/EmailMessage">      
  <meta content="cImportant] Please add subject line in annotation" itemprop="subjectLine"/>
</div>

<div itemscope itemtype="http://schema.org/DiscountOffer">
  <meta itemprop="description" content="20% off" />
  <meta itemprop="discountCode" content="PROMO" />
  <meta itemprop="availabilityStarts" content="2022-01-04T13:05:30-08:00" />
  <meta itemprop="availabilityEnds" content="2022-01-07T13:05:30-08:00" />
</div>

<div itemscope="" itemtype="http://schema.org/PromotionCard">      
  <meta content="https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png" itemprop="image"/>
</div>
<!-- ======== GMAIL PROMO TAB END ======== -->