AMP for Email:
Interactive Email Design for E-Commerce

What is AMP for Email

AMP for Email (Accelerated Mobile Pages) allows dynamic, interactive content in email:

• Live inventory: Show real-time product availability without redirecting to web
• Carousels: Swipeable product galleries in email
• Accordions: Expandable sections for FAQs, product details
• Forms: Inline signup, surveys, RSVP without leaving inbox
• Dynamic lists: Pull product recommendations from your API in real-time

AMP email can lift engagement by 30–40% in supported clients. The catch: only a handful of email clients render AMP today. For everywhere else, you ship a high-quality HTML fallback in the same send.

Example use case: E-commerce brand sends AMP email with live inventory carousel. Customers with Gmail see interactive, swipeable products. Outlook customers see a static image carousel fallback. Same send, personalized experience.

Client Support Matrix: Who Supports AMP

Key insight: AMP reaches roughly Gmail + Yahoo + Mail.ru audiences combined — meaningful, but not the majority of opens. Always provide a high-quality HTML fallback.

Three-Part MIME Structure for AMP

AMP email uses a three-part MIME structure:

MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="boundary123"

--boundary123
Content-Type: text/plain; charset=UTF-8

[Plain text version]

--boundary123
Content-Type: text/html; charset=UTF-8

[HTML fallback version]

--boundary123
Content-Type: text/x-amp-html; charset=UTF-8

[AMP interactive version]

--boundary123--

Client behavior:

• AMP-supporting clients (Gmail, Yahoo): Render the `text/x-amp-html` part
• Non-AMP clients (Outlook, Apple Mail): Render the `text/html` part as fallback
• Text-only clients: Render the `text/plain` part

All three parts must be present. The order matters: plain text, then HTML, then AMP.

AMP Components for E-Commerce

Common AMP components for email:

• amp-carousel: Swipeable product gallery or image slideshow
• amp-list: Dynamic list pulled from your API (real-time inventory, recommendations)
• amp-form: Interactive forms for surveys, signups, RSVP (responses sent to your server)
• amp-accordion: Expandable sections for FAQs, size guides, shipping info
• amp-selector: Radio buttons or checkboxes for product options (size, color)
• amp-state: Client-side state management for dynamic content

Example: AMP carousel of products with live inventory counts

<amp-list src="https://api.example.com/products" [src]="'https://api.example.com/products?limit=' + limit" layout="container">
  <div update on="change" [src]="...">
    Product Name: [% product_name %]
    In stock: [% inventory_count %] units
  </div>
</amp-list>

AMP in email is more limited than web AMP (no external JS, restricted components). Focus on core components: carousel, list, form, accordion.

Gmail Registration and Whitelist Process

To send AMP email to Gmail users:

1. Verify DMARC compliance: Ensure DMARC passes for all send sources (see "DMARC Prerequisite" section)
2. Test in Gmail AMP sandbox: amp4email.google.dev (validate AMP code)
3. Request registration: Use Google Postmaster Tools to request AMP email registration
4. Wait for approval: Google reviews your request (typically 2-4 weeks)
5. Start sending: Once approved, send AMP emails to Gmail users

Google's approval criteria:

• DMARC passes for all sends (no exceptions)
• AMP code is valid (no script errors)
• Fallback HTML is high-quality (not just a blank page)
• No phishing, malware, or prohibited content
• Privacy policy and unsubscribe link present

Gmail requires DMARC `p=reject` or `p=quarantine` for AMP, not `p=none`. Non-compliance is an automatic rejection.

Fallback Design for Non-AMP Clients

75% of users don't have AMP support. Your HTML fallback must be excellent:

• High-quality imagery: Since carousel isn't interactive, use high-resolution carousel images
• Clear CTAs: Direct clicks to landing pages (no inline interactions)
• Complete information: Don't hide content behind accordions — show relevant content by default
• Form workarounds: Link to web form instead of inline AMP form
• Inventory display: Static text showing current availability (not live-updated)

Example strategy: E-commerce brand sends AMP carousel + HTML carousel of same products. AMP users swipe; HTML users click "View all products" button linking to web.

Critical: Test fallback thoroughly in Outlook, Apple Mail, Samsung Mail. The fallback is seen by 75% of your audience.

DMARC: The AMP Registration Prerequisite

DMARC is mandatory for AMP email. Gmail will reject AMP registration if DMARC is not properly configured:

• Required: DMARC policy `p=reject` or `p=quarantine` (not `p=none`)
• All sources must pass: Every mailbox that sends on your domain must pass DMARC authentication
• No exceptions: Even a single send source failing DMARC blocks AMP approval

DMARC record example:

v=DMARC1; p=reject; rua=mailto:admin@example.com; fo=1

Before registering for AMP:

1. Verify all sending sources (ESPs, reply-to addresses, bounce handlers)
2. Ensure DKIM and SPF are configured correctly
3. Test DMARC alignment: use MXToolbox or InboxEagle DMARC Monitor
4. Run DMARC audit for 1-2 weeks (collect aggregate reports via `rua` address)
5. Only then apply for AMP registration

InboxEagle's DMARC Monitor shows real-time DMARC pass/fail rates and identifies sources causing failures.

ESP Support Matrix for AMP

If your ESP doesn't support AMP, you can:

1. Switch to an AMP-capable ESP (SendGrid, SparkPost, Klaviyo)
2. Build AMP emails manually using your ESP's raw email API (if available)
3. Use a dedicated AMP email service (Google AMP for Email, Mailmodo)

For most e-commerce brands, Klaviyo or SendGrid are the easiest paths to AMP email.