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
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:
Disable the setting ‘Enable embedded styles’ under account Settings > Email > CSS Optimization
create and upload the template as a pure HTML template. I actually couldn’t see the option to do that via the new editor, so you have to do ‘Create Template’ and then select the old editor, and then select the upload tab that then shows up and import it there
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.
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!
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?
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><divitemscope=""itemtype="http://schema.org/Organization"> </div><!-- The below .png is your logo --><metacontent="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 --><divitemscope=""itemtype="http://schema.org/PromotionCard"> </div><metacontent="https://gmail-ads-markup-test.sandbox.google.com/sample.png"itemprop="image" /><!-- The below contains the description, discount code, and discount availability to display --><divitemscope=""itemtype="http://schema.org/DiscountOffer"> </div><!-- This contains the description for the discount --><metacontent="20% off full-price styles"itemprop="description" /><!-- This contains the code for the discount --><metacontent="20OFF"itemprop="discountCode" /><!-- This contains the availability start date for the discount --><metacontent="2021-01-01T08:00:00-07:00"itemprop="availabilityStarts" /><!-- This contains the availability end date for the discount --><metacontent="2021-12-30T23:59:59-07:00"itemprop="availabilityEnds" /></p>
@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><divitemscope=""itemtype="http://schema.org/Organization"><!-- The below .png is your logo --><metacontent="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 --><divitemscope=""itemtype="http://schema.org/PromotionCard"><metacontent="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 --><divitemscope=""itemtype="http://schema.org/DiscountOffer"><!-- This contains the description for the discount --><metacontent="20% off full-price styles"itemprop="description" /><!-- This contains the code for the discount --><metacontent="20OFF"itemprop="discountCode" /><!-- This contains the availability start date for the discount --><metacontent="2021-01-01T08:00:00-07:00"itemprop="availabilityStarts" /><!-- This contains the availability end date for the discount --><metacontent="2021-12-30T23:59:59-07:00"itemprop="availabilityEnds" /></div></p>
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.
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.
@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.
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.
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…
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.
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.
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.
By clicking “Accept All Cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Privacy Preference Center
Your Privacy
Strictly Necessary Cookies
Performance Cookies
Functional Cookies
Targeting Cookies
Site Analytics
Your Privacy
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
Privacy Notice
Strictly Necessary Cookies
Always Active
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Site Analytics
These cookies record your visit to our website, and are used to track your visit including information such as: web page interactions (clicks, hovers, focus, mouse movements, browsing, zooms and other interactions), referring web page/source through which you accessed the Sites, heatmaps and scrolls, screen resolution, ISP, and statistics associated with the interaction between device or browser and the Sites. If you are accessing our Services with a European IP address, you have been asked to consent to the use of these cookies (you are free to deny your consent).