Solved

Use Google Annotations

  • 6 December 2020
  • 35 replies
  • 5656 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

35 replies

Userlevel 6
Badge +9

Hi @AdirMaelys

Thanks for your first post in the Community, and for asking such a great question! I am personally not too familiar with Google Annotations, so I’d be interested if others are using it and have opinions or thoughts to share. 

I do know though, that Google Annotations does not work in the Klaviyo drag-and-drop template editor. In order to utilize Google Annotations, I’d recommend looking through this article on importing Custom HTML Template, as you’ll need to custom-code the email. 

 

Perhaps there are Partners in the Community that have experience with this, too! 

-Cass. 

me?tid=450269&ts=2020-12-03T13:53:48Z&aid=116259022351&oid=klaviyo&uuid=2a1db96a-cd94-4c86-9ca4-93693d29dc9a

Badge +3

UPDATE:

1st, the fact that someone implement the code dosn’t mean that all clients will see it the same.

2nd When I tried to implement the HTML code, I stepped out from the code and entered to the rubric code again and the platform deletes the header content.

Please check it yourself, implement the code, save it, step out and then enter again to the code. Is it still there?

  <head>    
  <script type="application/ld+json">  
[  
    {  
        "@context": "http://maelyscosmetics.com/",  
        "@type": "Organization",  
        "logo":"https://d3k81ch9hvuctc.cloudfront.net/company/QSeFiE/images/8605fa65-70ef-4487-8bc7-02c3c750aca3.png"  
    },
    {
        "@context": "http://maelyscosmetics.com/",
        "@type": "EmailMessage",
        "subjectLine": "[MAELYS] Get This Holiday Deal!"
    },
    {  
        "@context": "http://maelyscosmetics.com/",  
        "@type": "DiscountOffer",  
        "description": "50% off",  
        "discountCode": "PROMO123",  
        "availabilityStarts": "2020-05-15T08:00:00-07:00",  
        "availabilityEnds": "2020-05-17T08:00:00-07:00"  
    },    
    {  
        "@context": "http://maelyscosmetics.com/",  
        "@type": "PromotionCard",  
        "image": "https://d3k81ch9hvuctc.cloudfront.net/company/QSeFiE/images/8605fa65-70ef-4487-8bc7-02c3c750aca3.png"  
    }  
]  
</script> 
  </head>

Badge +1

I can confirm this works (or rather, doesn’t work) the same for me.

After I save the email it will just remove all the annotations part. Tried using a template but it behaves the same.

Klaviyo, any news about that?

Userlevel 1
Badge +2

Hi @AdirMaelys and @itailu  

The reason why the Google Annotations sample code isn’t working is because, by default, <script> tags get stripped from Klaviyo templates, hence why you would create a template, paste in the sample code, and it would be gone when you click back into your template.

A workaround you can try is to specify these annotations using Microdata schema instead. The sample code uses JSON-LD, which is to be put into a script tag in the head of your HTML. Microdata schema can be used in the body of your HTML, which is compatible with Klaviyo templates. See here for more details.

Here is a boilerplate you can get started with:

<p>Google Annotations Test</p>

<div itemscope="" itemtype="http://schema.org/Organization">&nbsp;</div>

<!-- The below .png is your logo -->
<meta content="https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png" itemprop="logo" />

<!-- The below .png is the image that shows in the Promotions inbox -->
<div itemscope="" itemtype="http://schema.org/PromotionCard">&nbsp;</div>
<meta content="https://gmail-ads-markup-test.sandbox.google.com/sample.png" itemprop="image" />

<!-- The below contains the description, discount code, and discount availability to display -->
<div itemscope="" itemtype="http://schema.org/DiscountOffer">&nbsp;</div>

<!-- This contains the description for the discount -->
<meta content="20% off full-price styles" itemprop="description" />

<!-- This contains the code for the discount -->
<meta content="20OFF" itemprop="discountCode" />

<!-- This contains the availability start date for the discount -->
<meta content="2021-01-01T08:00:00-07:00" itemprop="availabilityStarts" />

<!-- This contains the availability end date for the discount -->
<meta content="2021-12-30T23:59:59-07:00" itemprop="availabilityEnds" />

</p>

-Ingrid

Badge +1

Hey Ingrid.

Unfortunately it doesn’t seem to work.

The template does save with the annotations, but the email comes to Gmail without them in its body.

Can you please check it on your side? Maybe it strips down the tags before sending?

Userlevel 1
Badge +2

@itailu Good catch. One thing I noticed in what I shared was that the divs weren’t properly scoped. In order to match what Google provided in its documentation (linked in my previous post), we need to make sure each div encapsulates the relevant meta tags. 

Here’s my revised boilerplate for you to try:

<p>Google Annotations Test</p>

<div itemscope="" itemtype="http://schema.org/Organization">

<!-- The below .png is your logo -->
<meta content="https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png" itemprop="logo" /></div>

<!-- The below .png is the image that shows in the Promotions inbox -->
<div itemscope="" itemtype="http://schema.org/PromotionCard">
<meta content="https://gmail-ads-markup-test.sandbox.google.com/sample.png" itemprop="image" /></div>

<!-- The below contains the description, discount code, and discount availability to display -->
<div itemscope="" itemtype="http://schema.org/DiscountOffer">

<!-- This contains the description for the discount -->
<meta content="20% off full-price styles" itemprop="description" />

<!-- This contains the code for the discount -->
<meta content="20OFF" itemprop="discountCode" />

<!-- This contains the availability start date for the discount -->
<meta content="2021-01-01T08:00:00-07:00" itemprop="availabilityStarts" />

<!-- This contains the availability end date for the discount -->
<meta content="2021-12-30T23:59:59-07:00" itemprop="availabilityEnds" />
</div>
</p>

-Ingrid

Userlevel 7
Badge +38

Hi @AdirMaelys and @itailu

 

Curious, did you get this to work while testing? I’ve tried what Google suggested in creating an email that ends with promotabtesting@gmail.com and have it being sent to the Promotions tabs, but can’t seem to get the annotations to show up in my inbox. 

 

Badge +3

No, I spend a lot of time on it and failed to succeed.

I guess google determines who they want to show it to or not.

 

But you’ve managed to send the email with the code inside? Have you tried sending it to a large audience?

 

They must make it more simple like Optimove. Why it is so complicated in Klaviyo like AMP, we are in 2021 not 2015.

https://www.optimove.com/blog/crm-hack-optimize-your-emails-for-gmails-promotions-tab?utm_campaign=Blog%20Subscription&utm_medium=email&_hsmi=129925633&_hsenc=p2ANqtz-8n4TbII0YEG6XlCuiaUulRl4WVdj1hnxil6UCyUIGRSAhU6uMRW9URooufhAuDpFjrAuA2NkMGCvk0Yu0i66Xan4Ejy7Xubtz5YLk_f0yxnjzkr1Y&utm_content=129925633&utm_source=hs_email

Badge +1

Hi @AdirMaelys and @itailu, @jingrid 

 

Did you guys successfully add the code? I tried a few different ways, but I can’t make it work. 
Please let me know!

 

Thank you,

Sayuri

Badge +3

No luck over here, we gave up implementing it on our side - with no one from Klaviyo’s side that can look at it and try it “hands-on”.

Userlevel 1
Badge +2

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

 

 

Badge +1

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

Badge +1

Curious if this works yet

Badge +1

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.

Badge +1

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.

 

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

<div itemscope="" itemtype="http://schema.org/EmailMessage">      
  <meta content="[Important] Please add subject line in annotation" itemprop="subjectLine"/>
</div>

<div itemscope itemtype="http://schema.org/DiscountOffer">
  <meta itemprop="description" content="20% off" />
  <meta itemprop="discountCode" content="PROMO" />
  <meta itemprop="availabilityStarts" content="2022-01-04T13:05:30-08:00" />
  <meta itemprop="availabilityEnds" content="2022-01-07T13:05:30-08:00" />
</div>

<div itemscope="" itemtype="http://schema.org/PromotionCard">      
  <meta content="https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png" itemprop="image"/>
</div>
<!-- ======== GMAIL PROMO TAB END ======== -->

Badge +3

When I try add metric event data, it breaks. 

Was the above example static or dynamic?

Badge +5

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?

Badge

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

 

Badge +3

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

Badge

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

Badge +3

Not really, unfortunately. I tried a few ways to test, but none ended up like I was hoping. 

I’ve been on other projects since, but plan to try get this working somehow!

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.

Badge

I have the code working inside Googles Preview Tool, but it doesn’t actually work when Klaviyo sends it out.

I think it has to do with Klaviyo blocking scripts so you need to use Microdata.

Then even once you have the Microdata and add it to the email head section, Klaviyo moves all that code to the body.

Even with the gmail promo annotations microdata code being added inside the body, the preview tool shows it working, but when testing, I could never get it to show up in the email once Klaviyo delivers it to a Gmail recipient.

Badge

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.

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

Userlevel 1
Badge +2

@Klaviyo Team where are we with this?

 

Every other ESP has support for this now. When will this be integrated into your editor?

 

https://www.litmus.com/blog/gmail-promotions-tab-updates/

Reply