Use Google Annotations

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

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 .:(

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

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.

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

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!

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!

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">
[{
  "@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!

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…

Been trying to get this going for some time now with no luck. I’ve stuck to single image annotations and waiting to see it render in my inbox before venturing into carousel mode. Sadly, still no go. Might try going with discount offers for the meantime and see how that goes. Sad.