Sending AMP Emails in Klaviyo

read

Overview

You can now use AMP for email, or Accelerated Mobile Pages, in your Klaviyo sends. AMP allows you to create interactive components in your email messages. This dynamic content allows you to create a more personalized and interactive experience for your customers. Using AMP in your communication with your customers, you can gather a product review, add a carousel of images of your best products, or give your recipients the opportunity to RSVP to an event without ever having to leave your email.

What is AMP?

If you use the drag-and-drop editor to create and send an email from your Klaviyo account, Klaviyo automatically creates a plain-text version of your email in addition to the HTML version. These two different types of emails are called MIME types. When your email hits a customer’s inbox, the inbox provider chooses which MIME type to display. AMP is another MIME type. If you use AMP in your email sends in Klaviyo, a plain text, HTML, and AMP MIME type will all send within one email.

Prerequisites

Before launching into how you would use AMP within your Klaviyo account, there are some prerequisites that you’ll need to meet before you can start sending:

  • You have your own dedicated sending domain and have authenticated your emails using SPF, DKIM, and DMARC. Head to Google’s security requirements for more information. 
  • You are sending at a high volume, in the ballpark of around 100 emails a day or greater for at least a few weeks.
  • You aren't regularly sending campaigns to more than 100,000 recipients.
  • You have a good sender reputation and a low spam complaint rate from your recipients.
  • You are tech-savvy or have your own dev team to help you build out your AMP emails. We do not offer this service.

Setting Up AMP Sending in Klaviyo

Registration for AMP works on a per-email address basis. If you want to register additional email addresses, you will need to go through the process for each email.

To start sending AMP emails in Klaviyo, follow the below steps.

  • Fill Out Klaviyo Form

    Fill out this form to indicate that you would like to create AMP emails.

  • Create a Google List

    Create a list that only contains the Google email address (ampforemail.whitelisting@gmail.com).

    2019-10-09_16-40-59.gif
  • Build Your AMP Email

    Once you've received the okay from Klaviyo, you can start building out your AMP email. You’ll want to make sure that the email you’re building is not a generic welcome or demo email, but an email with real content. A newsletter, for example, would be a good email to start with. Your email cannot have any bugs. Test your AMP email and make sure you’ve reviewed AMP best practices and followed the Gmail Bulk Sender Guidelines.

  • Send the Email to Google

    Once you’ve taken care to ensure that your email complies with Google's guidelines, you can send the email to the list that you created in the second step.

  • Submit Form to Google

    After you’ve sent your email, submit this form to Google. It may take anywhere from one to two weeks to receive a response. Once you have the go-ahead from Google, you can begin sending your AMP emails in Klaviyo.

Using AMP in Klaviyo

After you’ve reached out to support, you will be able to build out your AMP emails in Klaviyo. There are a few ways to get the code for your AMP email into Klaviyo. First, if you’ve built out a campaign using the drag-and-drop editor, before you send the campaign out, you can review the email. Under the Content section, select the option to Add AMP Version to your email.

unnamed.png

Additionally, if you’ve created an email template and you want to add an AMP version to it, head to the Email Templates tab and select the three dots and select Create AMP Version.

2019-10-09_17-03-42.png

Once you arrive on the AMP editor, you can paste in your code and preview your email.

unnamed-1.png

AMP Email Metrics

After sending out your email, you can check to see open and click rates for the AMP MIME type, specifically. Head to the Metrics tab and select Open Rate or Click Rate. From there, select Advanced Filters. Change the dropdown to Where and select Mimetype equals AMP. You can adjust the window to understand how your AMP campaigns are performing over time. 

image__22_.png

The click rate metric only tracks when people click through the email to your website. Clicks within the email (i.e. clicking through a carousel of images) are not currently tracked. 

AMP FAQs

I need help designing my AMP email. Is there someone who can help troubleshoot with me?

No, Klaviyo cannot help design your AMP emails or troubleshoot errors. If you want help, reach out to one of Klaviyo’s partners who can help.

If Google denies my request, what should I do?

Please reach out to Google for more information.

I got an AMP Mustache warning. What should I do?

Your AMP code contains AMP-Mustache syntax. This is how AMP fills in content based on a dynamic endpoint each time the URL is opened. Unfortunately, AMP-Mustache uses curly brace syntax to represent variables, which conflicts with the curly braces for Django variables (e.g. {{ person.first_name }} ).

To ensure that the AMP email behaves as expected when in the inbox, Klaviyo needs to know not to render those AMP-Mustache curly brace variables as if they are Django variables. The way to do this is by using the verbatim Django tag.

For example, if you have the following section of AMP-Mustache syntax, you need to wrap it in verbatim tags as below:

<body>
Check out these latest deals from our store!
<amp-list src="https://amp.dev/static/samples/json/cart.json" layout="fixed-height" height="80">
{% verbatim %}
<template type="amp-mustache">
<div id="cart">
<!-- These items (and their prices) can be updated dynamically. -->
{{#cart_items}}
<div class="cart-item">
<span>{{name}}</span>
<span>{{price}}</span>
</div>
{{/cart_items}}
{{^cart_items}}
There are no featured products available. Please check back again later.
{{/cart_items}}
</div>
</template>
{% end verbatim %}
</amp-list>
</body>

If you are trying to mix Klaviyo variables and AMP-Mustache variables, you'll need to add verbatim tags around the specific tags you want to be interpreted as AMP-Mustache instead of around the entire AMP-Mustache section. For example,

<body>
Check out these latest deals from our store!
<amp-list src="https://amp.dev/static/samples/json/cart.json" layout="fixed-height" height="80">
<template type="amp-mustache">
<div id="cart">
<!-- These items (and their prices) can be updated dynamically. -->
{% verbatim %}{{#cart_items}}{% end verbatim %}
Hey {{ person.first_name }}, we saved these just for you!
<div class="cart-item">
<span>{% verbatim %}{{name}}{% end verbatim %}</span>
<span>{% verbatim %}{{price}}{% end verbatim %}</span>
</div>
{% verbatim %}{{/cart_items}}{% end verbatim %}
{% verbatim %}{{^cart_items}}{% end verbatim %}
There are no featured products available. Please check back again later.
{% verbatim %}{{/cart_items}}{% end verbatim %}
</div>
</template>
</amp-list>
</body>

My AMP emails are appearing as regular HTML emails in my inbox. What should I do?

There are a few things that could prevent your AMP emails from displaying in your inbox. First, if you have not followed the steps above, your domain will not be approved by Google for bulk sending AMP emails. Next, check to make sure you have an AMP version of your email. The easiest way to do this is to click into the email in Gmail, click on the three dots in the upper right-hand corner, select Show Original, and see if your AMP MIME type is in the email. Lastly, if your code has any syntax errors in the code, Google will not render it. Test Your AMP code to make sure your email is free from errors. 

x
Was this article helpful?
0 out of 0 found this helpful