Use Google Annotations

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.

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

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?

Any chance of a response Klaviyo team?

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

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.

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

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

When I try add metric event data, it breaks. 

Was the above example static or dynamic?

Playing with this today and still no luck. Seems real surprising that Klaviyo won’t fix this so emails can stand out better in the Gmail promo tab.

@jingrid Any updates on getting this to work? I’d like to have annotations added to our emails but the code is being stripped. Even with the CSS optimization turned off and other scenarios presented earlier in this thread.