Question

Use Google Annotations

  • 6 December 2020
  • 4 replies
  • 95 views

Badge

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.


4 replies

Userlevel 5
Badge +5

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

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>

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?

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

Reply