Use Google Annotations

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

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

@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

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

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>