Send AMP emails in Klaviyo

Learn how to use Klaviyo to send dynamic AMP emails.

AMP (Accelerated Mobile Pages) is a framework that allows you to include interactive components in your emails that update in real time. For example, you can use an AMP email to send a carousel of images, gather product reviews, or give your recipients the opportunity to RSVP to an event, all without ever leaving their inbox.

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

AMP is a MIME type, like the HTML and plain-text versions of your messages that are generated when you create an email with Klaviyo’s drag-and-drop editor. When your email hits a customer’s inbox, the inbox provider chooses which MIME type to display. If you use AMP in your emails, a plain text, HTML, and AMP MIME type will all be sent within one email.

Prerequisites

Before applying to use AMP and building AMP emails in Klaviyo, make sure you meet the prerequisites: 

  • 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. Klaviyo does 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: 

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

How to set up AMP sending in Klaviyo

Registration for AMP works on a per-email address basis. If you want to send AMP emails from more than one email address, complete the process for each email.

  1. Contact Klaviyo support to request AMP sending. Include 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.
  2. Create an Email Provider Approval list in Klaviyo that contains the approval email addresses of each vendor you’d like to receive AMP approval from. Those email addresses are [email protected] for Gmail and [email protected] for Yahoo. For other providers, visit AMP’s developer documentation.
    To do so, create a new list from the Lists & Segments tab, click Quick Add, and add the two email addresses.
  3. Once you've received the okay from Klaviyo, you can start building out your AMP email. Build an email with real content (e.g., a newsletter), not a generic or demo message. 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. 
  4. Once you’ve taken care to ensure that your email complies with all inbox guidelines, send the email to the list that you created in step two.
  5. After you’ve sent your email, submit the sender registration form, which is managed by the inboxes that support AMP. It may take 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 email 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.
Within the Content section of a presend checklist, the Add AMP Version button is highlightedWithin the Content section of a presend checklist, the Add AMP Version button is highlighted

Additionally, if you’ve created an email template and you want to add an AMP version to it, head to the Email Templates tab, click the three dots, and select Create AMP Version.
In a list of templates, the additional options menu is open revealing a Create AMP Version buttonIn a list of templates, the additional options menu is open revealing a Create AMP Version button

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

AMP email metrics

After sending out your email, check to see open and click rates for the AMP MIME type. Head to the Analytics tab, click Metrics, and select Opened Email or Clicked Email. From there, click Advanced Filters. Change the dropdown to Where and select Mimetype equals AMP. You can adjust the time frame to understand how your AMP campaigns are performing over time. 
The opened email metric is filtered to display only opens where the Mimetype is AMPThe opened email metric is filtered to display only opens where the Mimetype is AMP

The clicked email 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.

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, add verbatim tags around the specific tags you want to be interpreted as AMP-Mustache. 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 inbox providers 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 email has any syntax errors, inbox providers will not render it. Test your AMP code to make sure your email is free from errors.

Did this page help you?