Skip to content
Check out our new developer portal and join the Braze developer community!

AMP for Email

With AMP for Email, you can add interactive elements to your emails and elevate your communications with your customers, delivering a full experience directly to your user’s inbox. AMP makes this possible through its use of various components that can be used to help build exciting in email offerings such as surveys, feedback questionnaires, voting campaigns, reviews, subscription centers, and more! Tools like these offer significant opportunities to increase engagement and retention.

Requirements

Braze is not responsible for the customer registering with Google or meeting the necessary security requirements.

Requirement Description
AMP for Email Turned On AMP is available for everyone. Please reach out to your Customer Success Manager and they can work with our product team to enable this feature for you.
Gmail Account Enablement See Enabling Gmail Account Below.
Google Sender Authentication Gmail authenticates the sender of AMP emails with DKIM, SPF, and DMARC. These must be set up for your account, learn more here.

- Domain Keys Identified Mail (DKIM)
- Sender Policy Framework(SPF)
- Domain-based Message Authentication, Reporting, and Conformance(DMARC)
AMP Email Elements A compelling AMP Email includes the strategic use of various components.
Check out the Essentials tab in the Components section below.

Supported Clients

Before you can send AMP Emails to users, you must register with our clients. The registration process involves sending a test AMPHTML email to get approved. Approval times vary client to client. Follow the register links for more information.

Client Register Link
Gmail for iOS Google
Gmail for Android Google
Gmail Desktop Google
Outlook on Web Outlook
Mail.ru Mail.ru

For a full list of supported platforms, click here.

Enabling Gmail Account

Go into your Gmail Settings, and under General, check the Enable Dynamic Email box.

Dynamic Content

API Usage

You can utilize AMP for Email using our API. When you use any of our Messaging Endpoints to send an email, add amp_body as an object specification, as shown below.

Email Object Specification

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "app_id": (required, string) see App Identifier above,
  "subject": (optional, string),
  "from": (required, valid email address in the format "Display Name <[email protected]>"),
  "reply_to": (optional, valid email address in the format "[email protected]" - defaults to your app group's default reply to if not set),
  "plaintext_body": (optional, valid plaintext, defaults to autogenerating plaintext from "body" when this is not set),
  "amp_body": (optional, updates the text-amp-html MIME type) the email body in AMPHTML. The MIME (Multipurpose Internet Mail Extensions) type to be referenced is "text/x-amp-html".
  "body": (required unless email_template_id is given, valid HTML),
  "preheader": (optional*, string) Recommended length 50-100 characters.
  "email_template_id": (optional, string) If provided, we will use the subject/body/should_inline_css values from the given email template UNLESS they are specified here, in which case we will override the provided template,
  "message_variation_id": (optional, string) used when providing a campaign_id to specify which message variation this message should be tracked under,
  "extras": (optional, valid Key-Value Hash), extra hash - for SendGrid customers, this will be passed to SendGrid as Unique Arguments,
  "headers": (optional, valid Key-Value Hash), hash of custom extensions headers. Currently, only supported for SendGrid customers,
  "should_inline_css": (optional, boolean), whether to inline css on the body. If not provided, falls back to the default css inlining value for the App Group,
  "attachments": (optional, array), array of json objects like [{"file_name","url"}] that define the files you need attached. Your file name's extension will be detected automatically from the URL, which should return the appropriate `Content-Type` as a response header,
}

Writing Your AMP Email

Construct your AMP email using the components below, check out our example use cases, and then use our API to send your message! Be sure to use amp_body for your AMP HTML!

You can also check out:


In addition to the AMPHTML, we require a regular HTML body version and suggest a plaintext_body version of your AMP email. All AMP Emails are sent out multi-part, meaning Braze sends out an email that supports HTML, Plaintext, and AMPHTML. This becomes useful in the event that your email is sent via a provider who does not yet support AMP for Email, automatically defaulting to the appropriate version based on the user and their device.

Components

These are what makes an AMPHTML Email… AMP’ed! Each of these elements is required in the body of your AMP email.

Component What It Does Example
Identification

⚡4email or amp4email
Identifies your email as an AMPHTML email. <!doctype html>
<html ⚡4email>
<head>
Load AMP runtime

<script>
Allows AMP to fun within your email using JavaScript. <script async src="https://cdn.ampproject.org/v0.js"></script>
CSS Boilerplate Hides content until AMP is loaded.
Email providers who support AMP emails enforce fierce security checks that only allow vetted AMP scripts to run in their clients
<style amp4email-boilerplate>body{visibility:hidden}</style>

Want to see something cool? Oh wait - that’s your email. Use these components to create dynamic layouts and behaviors in your emails.

Component What It Does Required Script
Accordion

amp-accordion
Lets your users glance at the content outline and jump to any section. <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Forms

amp-form
Create forms to submit input fields in an AMP document. <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Get fancy with AMP’s components that help you cater more to the eye of the beholder.

Component What It Does Required Script
Animated Image

amp-anim
Display an animated image (usually a GIF) managed via runtime. <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Carousel

amp-carousel
Display multiple similar pieces of content along a horizontal axis. <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Image A runtime-managed replacement for the HTML img tag.
You can also create a lightbox for your image.
<amp-img alt="A view of the sea"
src="images/sea.jpg"
width="900"
height="675"
layout="responsive">
</amp-img>

There’s more to the world than those other tabs. Here are some other fun components you should check out.

Component What It Does
Data Binding & Expressions

amp-bind
Adds custom stateful interactivity to your AMP pages via data binding and JS-like expressions.

For a full list of AMP Components, check out the AMP Documentation.

Example Use Cases

Below you will find a couple of example use cases for the various components discussed above.

Interactive Surveys

Idea: Using the <amp-form> component, you can create interactive surveys that can be completed without leaving the email inbox. This can be done by using <amp-form> to submit the survey response, and then have your backend supply this aggregate data.

Some Examples:

  • Conference Survey Email
  • Dynamically Updating Items in the Feed
  • Article bookmark Email

Using this component, users can submit or clear field values. Also, depending on how you set up your email, you can do things like give additional prompts to users such as whether or not the survey submission was successful, or even render the responses from your users showing results of the survey if it makes sense. (i.e a voting campaign)

Collapsable Content

Idea: Expand your content sections using the <amp-accordion> component. This component allows you to display collapsible and expandable content sections providing a way for viewers to glance at the content outline and jump to any section.

If you tend to send long educational articles or personalized recommendations, it provides a way for viewers to glance at the content outline and jump to any section or specific recommended product to get more details. This is also helpful for mobile devices where even a couple of sentences into a section requires scrolling. Effective use reduces scrolling needs on mobile devices.

Image Heavy Emails

Idea: If you tend to send emails with a lot of professional photos like retail brands, you can use the <amp-image-lightbox> component that allows users to engage with an image that appeals to them. When the user clicks the image, this component displays the image in the center of the message creating a lightbox effect.

In addition, the <amp-image-lightbox> component allows the user to zoom, pan, or show a more detailed image description. You can use the same component for more than one image. For example, if you have multiple images included in your email when the user clicks either image, the image displays in the lightbox.

Font Driven Emails

Idea: For emails that mostly rely on text copy, the <amp-fit-text> component allows you to manage the size and fit of text within a specified area.

Some examples:

  • Having the text to scale to fit the area
  • Having text scale to fit the area using a maximum font size where you can set the maximum font size.
  • Having text truncate when content overflows area

Using amp-mustache

Similar to Liquid, AMP supports a scripting language for more advanced use cases. This component is called amp-mustache. When including any Mustache mark-up language you will need to wrap it around the raw tag from Liquid. Unfortunately Liquid (the markup language used here at Braze) and Mustache share syntax styling.

By wrapping your content around the Raw tag, the Braze processing engine will correctly ignore any content between the raw tags and send out the Mustache variable your team needs.

Metrics and Analytics

Metric Details
Total Opens Total opens for the HTML and plaintext versions of your AMP Email.
Total Clicks Total clicks in the HTML and plaintext versions of your AMP Email.
AMP Opens Total count for opens in your AMP HTML Email, cumulative count of the HTML, plaintext, and AMPHTML versions of the email.
AMP Clicks Total count for clicks in your AMP HTML Email, cumulative count of the HTML, plaintext, and AMPHTML versions of the email.

Testing & Troubleshooting

Please note that total clicks and unique clicks do not account for any click that happened from an AMP message (HTML and Plaintext only). AMP specific clicks are attributed to the amp_click metric.

Before you send your AMP email, we recommend that you test according to Gmail’s guidelines here.

For your AMP email to be delivered to any Gmail account, the email must meet the following conditions:

  • The AMP for Email security requirements must be met (see table above).
  • The AMP MIME part must contain a valid AMP document.
  • The email should include the AMP MIME part before the HTML MIME part.
  • The AMP MIME part must be smaller than 100KB.

If none of these conditions are causing the error, reach out to support.

Frequently Asked Questions

Should I Segment with AMP Emails?

We advocate not segmenting to send to all different types of users. This is because we send AMP messages in multipart, having different versions included in the original email. If you customer can’t see the AMP version, it will default back to HTML.

Any Tips as I build out my AMP Emails?

Lean on your engineering as much as possible to build out the AMP elements. Once the elements are set up, we encourage you to include whatever design resources and elements you have to add an extra layer of polish. Showcasing some of the things AMP can do in email can be pretty compelling in terms of getting your engineering team to prioritize this.

WAS THIS PAGE HELPFUL?
New Stuff!