How to Send AMP Emails in Klaviyo

read
Last updated at:

Overview

AMP is a technology that allows you to include interactive components that update in real time. For example, you can use an AMP email to send a carousel of images that the recipient can click through, gather product reviews, or give your recipients the opportunity to RSVP to an event, all without ever having to leave their inbox.

Only certain inbox clients support AMP. See an up-to-date list of providers that support AMP today. 

About AMP and Klaviyo

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 emails, a plain text, HTML, and AMP MIME type will all send within one email.

Prerequisites

Before building AMP emails in Klaviyo, make sure you meet the prerequisites, including: 

  • You have your own dedicated sending domain and have authenticated your emails using SPF, DKIM, and DMARC.
  • You are sending at a high volume, in the ballpark of around 100 emails a day or greater for the last few weeks. 
  • You have a good sender reputation and a low spam complaint rate from your recipients.
  • You are tech-savvy or have your own developer team to help you build out your AMP emails. We do not offer this service.
  • If you have a dedicated click tracking domain, you must set up SSL for the domain before your AMP application can be approved. (Note that Klaviyo's shared tracking domains include SSL automatically, so if you do not have a dedicated click tracking domain, no action is required.)

In addition, you must follow the specific requirements and adhere to the policies of each inbox provider you send AMP emails to. See the specific requirements at the links below: 

Verizon Media provides support for AMP emails in Yahoo and AOL Mail. To see other providers that support AMP, along with their privacy policies, visit the AMP developer documentation

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.

  • Contact Klaviyo Support to request AMP sending
    Contact support to request AMP sending with the name of the account that you want to send AMP emails through. This account must already have a dedicated sending domain to be approved.
  • Create an Email Provider Approval List
    Create a list that only contains the approval email addresses of each vendor you’d like to receive AMP approval from. Those email addresses are ampforemail.whitelisting@gmail.com for Gmail and ampverification@yahoo.com for Yahoo. For other providers, visit AMP’s developer documentation.
    To do so, create a new list from the Lists & Segments tab, then use Quick Add to add the two email addresses.
    2019-10-09_16-40-59_Updated.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 guidelines of all inbox providers with AMP support. 
  • Send the Email for Approval
    Once you’ve taken care to ensure that your email complies with Google's guidelines, send the email to the list that you created in the second step.
  • Submit the Sender Registration Form.
    After you’ve sent your email, submit the sender registration form. It may take anywhere from one to two weeks to receive a response, and you will receive a separate response from each inbox provider. Once you have the go-ahead, you can begin sending your AMP emails in Klaviyo.
    If you have questions about the approval process, visit the AMP for Email Working Group on Github

Using AMP in Klaviyo

After Klaviyo’s support team enables AMP for your account, 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.

2021-06-25_09-44-52_Updated.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.

Template_Create_AMP_Version.png

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

2021-06-25_09-45-29_Updated.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 Analytics tab, click into Metrics, 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 an inbox provider denies my request, what should I do?

Please reach out to that inbox provider or the AMP for Email Working Group on Github 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: 

  • If you have not followed the steps above, your domain will not be approved by an inbox provider for bulk sending AMP emails. 
  • Check to make sure you have an AMP version of your email. The easiest way to do this is to click into your 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.
  • Check if your email uses amp-bind to bind data. If so, use the alternate data-amp-bind-property syntax to be compatible with Klaviyo’s system. 
  • If your code has any syntax errors in the code, inbox providers will not render it. Test Your AMP code to make sure your email is free from errors. 
x
Was this article helpful?
31 out of 58 found this helpful