AMP-таймер от Pixcraft: чем он полезен и как добавить его в рассылку

Дедлайны в письмах — мощный триггер, подталкивающий читателей к целевым действиям. Когда оставшееся время отсчитывается визуально с помощью таймера, финальный срок становится более ощутимым, а скорость принятия решений способна заметно вырасти.

В статье расскажем про AMP-таймер от Pixcraft и чем он выделяется на фоне других вариантов реализации этого компонента, а также разберём его архитектуру и логику работы в рассылках.

Зачем добавлять таймер в письмо

Таймеры усиливают сценарии коммуникации, переводя дедлайн из расплывчатого обещания в измеримую величину. Время воспринимается как ограниченный ресурс, а подписчики получают повод действовать незамедлительно: возникает так называемый Fear of Missing Out (страх упустить выгоду), за счёт которого становится труднее откладывать решение «на потом».

Ниже — маркетинговые сценарии, где таймеры наиболее эффективны.

Технические пределы привычных таймеров

GIF-таймеры

Долгое время единственным способом отобразить обратный отсчёт в рассылках была GIF-анимация. Такие таймеры работают следующим образом: сервер генерирует изображение с актуальным оставшимся временем, а почтовый клиент подгружает его при открытии письма.

Подход считается классическим, но имеет значительные ограничения:

1. Ресурсоёмкость и цена. Чтобы показать корректное значение в момент открытия, система должна сгенерировать анимацию с актуальным количеством оставшегося времени. То есть, генерировать новую анимацию потребуется в зависимости от числа запросов, вплоть до каждой секунды. Это требует весомых вычислительных мощностей и стоит дорого.

2. Кэширование изображений в почтовых клиентах. Почтовые сервисы ускоряют загрузку писем за счёт кэша. Но в случае с GIF-таймерами при повторном просмотре читатель увидит не отсчёт в реальном времени, а кэшированное значение.

Для обхода этого ограничения используют персонализированные ссылки, случайные query-параметры или специальные заголовки запроса, но на практике гарантий нет. Как итог, таймер попросту теряет свою главную особенность — показ оставшегося времени.

3. Длительность и вес анимации. Размер GIF-файлов растёт вместе с числом кадров и плавностью анимации. Чтобы уложиться в допустимые рамки, длину цикла обычно ограничивают 10–20 секундами. Спустя некоторое время анимация перестаёт воспроизводиться или начинается заново.

При этом даже короткий таймер может занимать сотни килобайт или несколько мегабайт. В письме с баннерами, иллюстрациями и кнопками это сильно влияет на суммарный вес и скорость загрузки.

amp-timeago

amp-timeago — это стандартный amp-компонент для отображения относительного времени в текстовом виде. Он выводит простые значения в зависимости от указанной даты, например, «через 16 часов», «через 3 месяца» или «через год».

Пример отображения времени с помощью amp-timeago. Источник: amp.dev

Ключевые особенности amp-timeago:

1. Корректно пересчитывает оставшееся время вне зависимости от момента открытия письма.
2. Прост в подключении, не содержит сложных элементов.
3. Поддерживает множество языков (по умолчанию установлена локаль en).

Но при этом он слабо применим для маркетинговых писем, где важен эстетический и эмоциональный эффект. Этому мешают полное отсутствие какой-либо анимации и ощущения «тиканья часов», а также малый контроль над визуальной формой. Компонент воспринимается как статичный текст, а не как счётчик.

Несмотря на это, amp-timeago подходит, когда необходимо просто проинформировать аудиторию. К примеру, его можно использовать в технических уведомлениях, таких как «Подтвердите заказ в течение 2 часов» или «Подписка автоматически продлится через 3 дня». Однако в маркетинговых письмах он не заменит полноценный таймер, ориентированный на вовлечение и конверсии.

Как работает AMP-таймер от Pixcraft

Pixcraft предлагает альтернативу привычным GIF-таймерам и amp-timeago. Вместо потоковой генерации картинок задействуется лёгкая AMP-механика, а сам таймер формируется прямо в письме. Это обеспечивает полноценное отображение счётчика времени и стабильную работу без тяжёлых файлов и проблем с кэшированием.

Общая логика работы AMP-таймера

Каждый фрагмент таймера представляет собой отдельную AMP-карусель. Отсчёт оставшегося времени привязан к установленному дедлайну. Например, если финальной точкой станет 31 декабря 2025 года в 23:59, то значение будет выглядеть так:

src="https://app.pixcraft.io/api/timer?date=2025-12-31&time=23-59"

Сервер Pixcraft возвращает текущее состояние обратного отсчёта, а письмо рендерит его через AMP-компоненты. Числа визуализируются в рассылке и создают эффект тикающего таймера.

В основе компонента лежат:

1. amp-list — делает запрос к серверу и получает данные о том, сколько времени осталось до дедлайна.
2. amp-mustache — подставляет полученные данные в шаблон письма.
3. amp-carousel — визуально перелистывает часы, минуты или секунды.

Как отображаются часы

Сервер возвращает два значения:

1. hours.i0 — текущее количество часов до дедлайна.
2. hours.i1 — следующее значение (уменьшенное на 1).

То есть, если до конца акции осталось 2 часа 30 минут, то hours.i0 будет иметь значение «2», а hours.i1 — «1». Эти значения перелистываются в карусели: сначала показывается «2», а когда текущий час заканчивается, происходит автопереключение hours.i0 на «1» и hours.i1 — на «0» . Тайминг перелистывания задаётся параметром delay="{{ hour_left }}": он определяет время, оставшееся до конца текущего часа.

Как отображаются минуты

Здесь формируется массив из 60 элементов (от minutes.i0 до minutes.i59), а карусель перелистывает каждую минуту с задержкой 60 000 мс. При этом, чтобы время было корректным, первой позицией в массиве автоматически становится не «нулевая», а текущая минута относительно дедлайна.

К примеру, если до финальной точки остаётся 1 час 30 минут, логика будет работать следующим образом:

1. В массиве первым идёт значение 30.
2. Далее значение меняется каждую минуту: 29, 28 и далее до 0. Затем оно переключается на 59, после на 58 и так до 31.
3. После этого отсчёт начинается заново с 30. Таким образом возможно зациклить корректный ход времени в минутах.

Как отображаются секунды

Для простоты и надёжности секунды реализованы как циклическая имитация, где ежесекундно происходит переключение числовых значений. Карусель секунд всегда начинается с 59, после чего значение меняется на 58, 57 и вплоть до 00, а затем снова возвращается к 59.

Что происходит после дедлайна

Общую задержку до дедлайна контролирует элемент time_left. Он управляет моментом, когда таймер по истечении времени должен сменить состояние. В отличие от GIF-анимации, здесь отсчёт меняется на другой блок, в рамках которого можно задействовать новый сценарий. Например:

1. Показать лаконичное сообщение: «Акция завершилась».
2. Предложить альтернативу: «Глобальная распродажа закончилась, но доступна подборка со скидками до −30%» и кнопка на актуальный раздел.

Сильные и слабые стороны AMP-таймера

Таймер от Pixcraft предлагает заметные преимущества, которые делают его полезным инструментом для email-маркетинга:

1. Точность и устойчивость отображения. AMP-таймер не зависит от кэширования изображений. Счётчик показывает актуальные данные даже после закрытия письма и возвращения к нему спустя время.
2. Лёгкий вес. Формирование таймера не требует рендеринга десятков кадров GIF-анимации. Это позволяет значительно ускорить процесс загрузки письма.
3. Контроль над состоянием после дедлайна. AMP-решение позволяет заранее прописать сценарий окончания акции: от простого сообщения до более сложных подходов.

Однако вместе с плюсами у AMP-таймера есть и ограничения, о которых следует помнить:

1. Условные секунды. Секундная карусель стартует с 59 независимо от системного времени: настроить кастомное отображение первой секунды на текущий момент нельзя. Но хотя в инженерном смысле это компромисс, визуально эффект выглядит естественно и отлично подходит для маркетинговых задач.
2. Необходимость поддержки AMP. Таймер работает только в тех почтовых клиентах, которые совместимы с технологией AMP (например, Mail.ru, Gmail, Yahoo и AOL). Для остальных клиентов следует предусмотреть fallback: статичный блок или классическую GIF-анимацию.

Как включить AMP-таймер в письмо

Реализация компонента в конструкторе Pixcraft запланирована в ближайшем будущем, но включить AMP-таймер в письмо можно уже сегодня с помощью готового кода. Достаточно лишь добавить в него нужные значения даты и времени, указать сообщение после окончания отсчёта, настроить визуальную часть — и можно добавлять таймер к вашему шаблону.

  ▶️ Забрать код AMP-таймера от Pixcraft

Заключение

С AMP-таймером от Pixcraft вы получаете полное управление динамикой времени в письме. Отсутствие тяжелых файлов и проблем с кэшем картинок, а также аккуратная смена состояния после наступления дедлайна, делают компонент удобным и гибким в использовании.

В скором времени таймер будет доступен прямо в интерфейсе Pixcraft. Однако вы можете подключить его через код и сделать письма конверсионно сильнее уже сегодня.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.