Question

Use Google Annotations

  • 6 December 2020
  • 7 replies
  • 178 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.


7 replies

Userlevel 6
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

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?

@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 4
Badge +2

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. 

 

Reply