Solved

Use Google Annotations

  • 6 December 2020
  • 34 replies
  • 5338 views

Badge +3

Hello guys, hope your holiday season was successful.

My name is Adir, I am the CRM manager at Maelys Cosmetics.

 

I have a question for you all, did someone tried to use Google Annotations?

Pre show the image, coupon? If you have any tips or tricks, that can be great.

 

We would like to take our email marketing activity to the next level after conquering email automation, segmentation, SMS campaigns and all Klaviyo’s best practices.

icon

Best answer by Taylor Tarpley 3 July 2023, 17:12

View original

34 replies

Userlevel 1
Badge +2

Any chance of a response Klaviyo team?

Badge

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

Userlevel 7
Badge +60

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

Userlevel 1
Badge +2

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

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?

 

Badge +1

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

Badge

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

Badge

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.

Reply