Skip to main content
Solved

Use Google Annotations


Did this topic or the replies in the thread help you find an answer to your question?
Show first post

39 replies

Forum|alt.badge.img+2
  • Contributor II
  • 4 replies
  • June 20, 2023

Any chance of a response Klaviyo team?


Forum|alt.badge.img+1
  • Contributor I
  • 1 reply
  • June 23, 2023

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


Taylor Tarpley
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 2148 replies
  • Answer
  • July 3, 2023

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


Forum|alt.badge.img+2
  • Contributor II
  • 4 replies
  • July 3, 2023

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


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • December 14, 2023

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?

 


Forum|alt.badge.img+2
  • Contributor I
  • 1 reply
  • January 5, 2024

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


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • January 11, 2024

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


Forum|alt.badge.img+1
  • Contributor II
  • 3 replies
  • January 24, 2024

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


Forum|alt.badge.img+1
  • Contributor II
  • 3 replies
  • January 24, 2024

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

 

The image URL was broken up into multiple lines but I don’t think that’s Klaviyo

 

With each line where =3d was changed back to =

 

More of the annotation showed

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.


Forum|alt.badge.img+2
  • Contributor IV
  • 14 replies
  • March 22, 2024

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


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • September 18, 2024

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!


  • Contributor I
  • 2 replies
  • October 31, 2024

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!


  • Contributor I
  • 2 replies
  • November 22, 2024

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!


  • Contributor I
  • 2 replies
  • November 24, 2024

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…