Если вам нужно показать много товарных карточек или, например, товар с нескольких ракурсов прямо в письме, то интерактивные AMP-карусели — отличный инструмент.

Базовый пример AMP-карусели:

<amp-carousel width="450" height="300" layout="responsive" type="slides" role="region" aria-label="Basic carousel">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300"></amp-img>
  </amp-carousel>

Но есть нюанс: в Gmail на iOS при клике на стрелку карусели письмо может резко прокручиваться вверх.

Что предпринять: заменить amp-carousel на использование amp-bind. То есть вместо стандартной карусели используем отслеживание состояний и меняем изображения с помощью amp-bind. Такой подход работает стабильно на всех платформах.

Пример реализации:

<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>

Gmail позволяет выделить ваши письма среди десятков других в папке «Промоакции» — с помощью promotion cards. Это визуальные карточки, которые появляются прямо в списке писем и помогают привлечь внимание ещё до открытия.

Карточки могут быть разными: от лаконичного баннера до полноценной карусели товарных карточек. При клике пользователь может сразу перейти на ваш сайт, минуя саму рассылку.

Зачем: яркие карточки в списке «Входящих» точно привлекут внимание подписчика, сократят путь пользователя до перехода на сайт, а также предотвратят автоматическое формирование карточек с неудачными изображениями.

Как реализовать: для вставки карточек используйте JSON-LD разметку, как описано в этой инструкции.

📌Важно знать: карточки показываются не всем пользователям. На их отображение влияет множество факторов, включая качество контента и репутацию отправителя.