Top 8 Nuances of Creating AMP Emails

AMP in email newsletters is a way to add interactivity to an email: forms, carousels, content switching without going to a website. However, just like with regular HTML emails, there are specific rendering and behavior quirks that must be taken into account during coding and testing.

In this article, we explore 8 common problems that developers face when working with AMP emails — and show how to solve them in practice, with examples, code, and explanations.

1. AMP Carousel Issue in Gmail on iOS

When using the standard <amp-carousel> component in Gmail on iOS, an unpleasant bug occurs — when switching slides, the email scrolls sharply to the top. This issue has been known for a long time, but the behavior has not yet been fixed.

Solution: Avoid using <amp-carousel>, and instead simulate it using states (amp-bind). Below is a working example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>

2. ESP Variables and AMP Templates (Syntax Conflict)

Many ESPs (email service providers) allow inserting personalization variables or conditional logic into email templates. Often, the syntax of these variables overlaps with the syntax used in AMP templates (amp-mustache), which also use double curly braces {{ }}. This leads to the ESP misinterpreting or corrupting the AMP template by treating it as its own variables. As a result, the email may break or fail to send altogether (if the ESP considers the template invalid).

Solutions:

Altcraft: Altcraft templates also use curly braces, so to mark an AMP template, you need to add a $ prefix. For example, instead of {{success}} you write ${{success}}. The $ prevents interpretation by the platform, and the resulting sent email will retain the clean {{success}} for AMP. This means Altcraft will pass through that segment, allowing AMP to process it client-side.

Example:

<template type="amp-mustache">$\{\{success\}\}</template> — Altcraft will not modify the content inside $ {{ }}, and when rendered, AMP will see the standard {{success}}.
.

Mailganer: In Mailganer, special tags {% verbatim %} ... {% endverbatim %} are provided for such cases. Any code enclosed within {% verbatim %} will not be altered by the platform. Therefore, the AMP template can be wrapped in these tags.

Example:

1
2
3
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>

3. Dark Mode Behavior in Different Clients

AMP emails in dark mode are displayed differently depending on the email client. In some cases, the email is recolored automatically, in others — it remains unchanged, and in some situations the developer can define custom styles.

Let's break it down:

Gmail on Android. Automatically recolors light-themed emails to dark.

Gmail on iOS. Does not recolor the email and does not allow customization.

Yahoo. Similar behavior to Gmail: auto-inversion on Android, email remains unchanged on iOS.

4. AMP Email Lifespan

The AMP content of an email is displayed only for 30 days. After that, the regular HTML version is shown. This is done to ensure the reliability of the AMP email, which often relies on server-side components that may stop working over time.

Solutions:

Even in AMP emails, it is important to pay attention to the quality and content of the HTML version. It is displayed to users whose email clients do not support AMP, as well as after 30 days when the AMP content expires. Therefore, the HTML version should include all key information and serve as a full alternative to the interactive AMP part.

5. Email Size Limit in Gmail

Gmail enforces two different limits on email size:

• HTML part: maximum 102 KB. If exceeded, the email is clipped and Gmail shows a "View entire message" link. This disrupts the layout and hides part of the content.

• AMP part: maximum 200 KB. If exceeded, the AMP version simply won’t be displayed — the user will see the HTML version instead.

Solutions:

• Minify your code. Remove comments, whitespace, and duplicate styles. Use specialized tools (e.g., htmlminifier.com).

• Eliminate unnecessary elements. Reduce tracking links, clean the template from unused elements and hidden blocks.

• Optimize styles: put shared styles in <style amp-custom>, and use inline styles only when necessary.

6. Issues with AMP Email Analytics

AMP allows interaction with content directly within the email — for example, clicking buttons, filling out forms, or browsing carousels — without navigating to a website. Such actions are not captured by standard trackers, since JavaScript is not allowed inside AMP, and the <amp-analytics> component is not supported in AMP for email. As a result, clicks and events remain "invisible" to analytics systems like Google Analytics, Yandex.Metrica, and most ESPs.

Solution:

To implement such analytics, you can use services that support event tracking via tracking pixels. One reliable option is Pixcraft, which provides an API for tracking AMP events through regular GET requests.

Conclusion

When coding AMP emails, it’s important to consider how they behave across different email clients. Even major platforms like Gmail show variations in behavior: carousels may break in some places, states may be ignored in others.

Always test your emails in Gmail (web, Android, iOS), Yahoo. The key is not to rely on “if it works in one place, it works everywhere.” Take the time to test thoroughly, and the interactivity in your emails will work reliably, regardless of the platform.