Contributor II

Solved

Use Google Annotations

Forum|Forum|5 years ago
December 6, 2020
40 replies
8538 views

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.

Best answer by Taylor Tarpley

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

Show previous replies

J

jingrid

Klaviyo Employee

Hi @AdirMaelys @Mailbox Manny -- Apologies for the delay here. There’s actually a setting in your Klaviyo account that, when unchecked, will allow your HTML snippets stay untouched (under Accounts > Settings > Email > CSS optimization), which in turn, will enable your Google Annotations to function properly.

There are a few considerations to think through before unchecking that setting, which are outlined here: https://help.klaviyo.com/hc/en-us/articles/360049848692

Hope this helps!

-Ingrid

J

James114

Contributor I

@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.

M

MilovanCL

Contributor I

Curious if this works yet

A

Anonymous

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.

A

Anonymous

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.

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

G

gmc

Problem Solver I

When I try add metric event data, it breaks.

Was the above example static or dynamic?

J

JML

Contributor I

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?

A

ArturSantos

Contributor I

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

G

gmc

Problem Solver I

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