+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.
Best answer by Taylor Tarpley
View original@Klaviyo Team where are we with this?
Every other ESP has support for this now. When will this be integrated into your editor?
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.
Hi
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
Any chance of a response Klaviyo team?
Hey everyone,
Are there any updates on Klaviyo's Gmail annotation feature?
I tried disabling CSS settings, making emails from pure HTML, and adding microdata for Gmail annotation, but got no result .:(
Should be a feature in the email drag and drop. Give me a spot to store it. Klaviyo you guys render the Google syntax. I’m surprised this isn’t a feature at this point. Right now I’m scrolling through my gmail looking at all the other brands using this. It’s compelling!! And I can’t do it unless I switch to html template and increase the work effort. Where’s the easy button?
+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!
+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>
+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 ======== -->
Sales Force were able to get it working inside their editor with no issues - https://help.salesforce.com/s/articleView?id=sf.mc_ceb_google_promotions_tab.htm&type=5
Hi
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"> </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"> </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"> </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
+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?
Any luck on this? I can't seem to make it work even with the fix that
+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.
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
+1
Hi, I wonder if you guys can do the annotations, I tried both steps, but still failed.
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
+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?
+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.
Also wondering if there are any updates on getting the annotation to work?
While trying to troubleshoot this issue, I think I found the reason why the annotation is failing to render.
Before I dive into it, and for full disclosure:
This is the code snippet that was added in HTML:
<div itemscope itemtype="http://schema.org/PromotionCard">
<meta itemprop="image" content="https://d3k81ch9hvuctc.cloudfront.net/company/UyMYJc/images/8a073d85-2c45-4ee5-ae3d-45f0a331aa34.jpeg"/>
<meta itemprop="url" content="https://website.com/productpage"/>
<meta itemprop="headline" content="Product Name"/>
<meta itemprop="price" content="54.97"/>
<meta itemprop="priceCurrency" content="USD"/>
<meta itemprop="discountValue" content="20"/>
</div>
When the test email arrived to our test gmail account (one made specifically for testing this feature, that ends with promotabtesting@gmail.com), the code has been changed and now appears as:
<div itemscope=3D"" itemtype=3D"http://schema.org/PromotionCard">
<meta content=3D"https://d3k81ch9hvuctc.cloudfront.net/company/UyMYJc/image=
s/8a073d85-2c45-4ee5-ae3d-45f0a331aa34.jpeg" itemprop=3D"image">
<meta content=3D"https://website.com/productpage" itemprop=3D"url">
<meta content=3D"Product Name" itemprop=3D"headline">
<meta content=3D"54.97" itemprop=3D"price">
<meta content=3D"USD" itemprop=3D"priceCurrency">
<meta content=3D"20" itemprop=3D"discountValue">
</div>
When I paste this transmogrified code back into the Gmail Annotation Preview Tester, it will not render and displays error messages as such:
The changed order of arguments in the meta tag should not make a difference, but I did notice that every instance of “=” became “=3D”
%3D is Unicode for an equal sign, but here 3D is preceded by an actual equal sign, not a percent sign.
So I started manually changing each instance of =3D and the code started to render bit by bit as I hit “Preview” with each change
When all of the instances of =3d are changed back, the preview tool renders the annotation same as the original code - the order of the supplied argument does not matter.
I’ve opened a support ticket with Klaviyo to see if there’s any news on this, and to find out when and how we can start using this feature. If anyone else has any other info, please scream from the rooftops.
+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?
+1
Curious if this works yet
+1
How is this still not supported in Klaviyo after so many years!
+60
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:
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
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
