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 can offer opportunities to increase engagement and retention.
Requirements
Braze is not responsible for users registering with Google or meeting the necessary security requirements.
Requirement | Description |
---|---|
AMP for email turned on | AMP is available for everyone. Reach out to your account manager if you’re interested in enabling this feature. |
Gmail account enablement | See Enabling Gmail account. |
Google sender authentication | Gmail authenticates the sender of AMP emails with DKIM, SPF, and DMARC. These must be set up for your account. - 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. Refer to 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 AMP HTML email to get approved. Approval times vary client to client. Follow the register links for more information.
Client | Register Link |
---|---|
Gmail | |
FairEmail | FairEmail |
Yahoo | Yahoo |
Mail.ru | Mail.ru |
For a full list of supported platforms, refer to AMP documentation.
Enabling Gmail account
Go to your Gmail settings, and select Enable Dynamic Email under General.
API usage
You can also use AMP for email with our API. If you use any of the Braze 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 workspace'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 AMP HTML. 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 workspace,
"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,
}
Creating your AMP email
First, build your AMP email using components. Next, use the Braze API to send your message, making sure to include amp_body
for your AMP HTML.
In addition to the AMP HTML, we require a regular HTML body
version and suggest a plaintext_body
version of your AMP email. All AMP emails are sent out multipart, meaning Braze sends out an email that supports HTML, plaintext, and AMP HTML. This becomes useful in the event that your email is sent via a provider who doesn’t yet support AMP for email because the email will automatically default to the appropriate version based on the user and their device.
When you’re building an AMP email, check that you’re in the AMP editor as AMP code should not be added to the HTML editor.
Refer to these additional resources:
- AMP tutorial
- Sample code to see how the final product should look.
- AMP email components library
Components
These are what make an AMP HTML email…AMP’ed! Each of these elements is required in the body of your AMP email.
Component | Description | Example |
---|---|---|
Identification ⚡4email or amp4email |
Identifies your email as an AMP HTML email. | <!doctype html> <html ⚡4email> <head> |
Load AMP runtime <script> |
Allows AMP to run in 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 security checks that only allow vetted AMP scripts to run in their clients. |
<style amp4email-boilerplate>body{visibility:hidden}</style> |
Use these components to create dynamic layouts and behaviors in your emails.
Component | Description | Required Script |
---|---|---|
Accordion amp-accordion |
Allows users to view 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> |
Any component that requires authenticating the user must use Google access tokens or proxy assertion tokens.
Get fancy with AMP’s components that can help you cater your email to your audience.
Component | Description | Required Script |
---|---|---|
Animated Image amp-anim |
Displays 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 |
Displays 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> |
Any component that requires authenticating the user must use Google access tokens or proxy assertion tokens.
Component | Description |
---|---|
Data Binding & Expressions amp-bind |
Adds custom stateful interactivity to your AMP pages via data binding and JavaScript-like expressions. |
Any component that requires authenticating the user must use Google access tokens or proxy assertion tokens.
For a full list of AMP components, check out AMP documentation.
Use cases
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 include:
- 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 give additional prompts to users, such as whether or not the survey submission was successful, or render the responses from your users showing survey results (such as a voting campaign).
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, this provides a way for viewers to glance at the content outline and jump to any section or specific product recommendation to get more details. This can be particularly helpful for mobile users where even a few sentences into a section require scrolling.
If you tend to send emails with many 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 view a 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.
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.
Examples include:
- Scaling the text to fit an area
- Scaling the text to fit the area using a maximum font size where you can set the maximum font size
- Truncating the text 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 markup language, you’ll need to wrap it around the raw
tag from Liquid. Note that Liquid and Mustache share syntax styling.
By wrapping your content around the raw
tag, the Braze processing engine will 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 and AMP HTML versions of the email. |
AMP Clicks | Total count for clicks in your AMP HTML email, cumulative count of the HTML, plaintext, and AMP HTML versions of the email. |
Testing and troubleshooting
Note that total clicks and unique clicks don’t account for any clicks that occur 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 these Gmail guidelines.
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.
- 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 100 KB.
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 a user can’t see the AMP version, it will default back to HTML.
Do you have any additional tips for building an AMP email?
Check in with your engineering team to build out the AMP elements. After these elements are set up, we encourage you to include design resources and elements you have to add an extra layer of polish.