Subtract.svg

Group 488121.svg

Union.svg

Union (1).svg

Group 488455.svg

Недавно mail.ru начал вырезать пробельные символы при отображении начального текста письма до его открытия, что сломало эффект «короткого прехедера» — когда рядом с темой только тот текст, что мы задумали. Мы нашли решение.

Используйте следующий код:
```
<vk-snippet-end/>
```


Как использовать короткий прехедер в mail.ru

small_photo_2025-04-29_17-16-29.jpg

thumbnail_photo_2025-04-29_17-16-29.jpg

photo_2025-04-29_17-16-29.jpg

Как починить короткий прехедер в mail.ru

В статье сравниваем конструкторы писем Pixcraft и TOPOL: в чём заключаются их подходы к созданию email-шаблонов и какие различия между двумя инструментами особенно заметны.

small_pixvstopcov (1) (1).png

thumbnail_pixvstopcov (1) (1).png

pixvstopcov (1) (1).png

Pixcraft vs TOPOL: чем различаются подходы в работе над email-шаблонами

В последние годы в России постепенно меняется практика использования иностранных цифровых сервисов. Так, [**с 2025 года**](https://www.consultant.ru/document/cons_doc_LAW_499984/) ужесточились требования к хранению и обработке персональных данных граждан РФ, а использование зарубежной инфраструктуры в ряде случаев грозит юридическими рисками.

Новые требования затрагивают в том числе веб-аналитику: в частности, Google Analytics передаёт технические и поведенческие данные на зарубежные серверы, что может не соответствовать установленным нормам. В подобных условиях решением становится поиск альтернативы, одной из которых является Яндекс Метрика.

В этой статье рассмотрим практический способ перехода с Google Analytics на Яндекс Метрику: от различий в логике сбора данных до переноса событий и параметров.

## Чем отличаются подходы Google Analytics и Яндекс Метрики

В основе **Google Analytics** лежит событийная модель: любое значимое действие пользователя фиксируется как событие. Здесь цель, как правило, представляет собой не отдельное действие, а цепочку событий с дополнительными условиями. Единичное событие лишь иногда может рассматриваться как цель, но это происходит редко.

События почти всегда дополняются параметрами. В Google Analytics чаще всего используют разбиение на значимые события, такие как подписка на рассылку, совершение покупки, получение заявки и так далее. Само событие фиксирует факт действия, а параметры событий передают контекст (например, идентификатор формы, источник трафика, тип контента или заголовок статьи).

В **Яндекс Метрике** логика устроена иначе. Базовой сущностью здесь считается именно цель: посещение страницы, клик, отправка формы, определённое время на сайте, количество просмотров и так далее. Для каждой цели задаётся условие, по которому система фиксирует её достижение.

## Как передавать события и параметры в Яндекс Метрику

При переходе с Google Analytics на Яндекс Метрику событийная логика переносится через цели. Для пользовательских действий используется цель «JavaScript-событие»: по сути, она служит точкой фиксации действия, к которой можно привязать любой контекст.

Сначала цель настраивается в интерфейсе Яндекс Метрики. Для этого:

**1.** Перейдите в раздел «Цели» (он находится в панели слева).

**2.** Нажмите «Добавить цель».

**3.** Выберите тип «JavaScript-событие».

**4.** Задайте название и идентификатор цели, например, `myEventName`.

<Img
img="/api/uploads/01_dobtsel_ba12dd41b2.png"
alt="Настройка цели в Яндекс Метрике"
/>

После этого Яндекс Метрика покажет код цели, который необходимо разместить на сайте:

```xml
ym(123456789,'reachGoal','myEventName');
```

Он фиксирует достижение цели, но не содержит параметров, уточняющих детали действия. Чтобы сохранить привычную для Google Analytics модель с контекстом, к вызову `reachGoal` добавляются параметры цели.

Простой вариант с параметрами может выглядеть так:

```xml
ym(123456789, 'reachGoal', 'myEventName', {
  "myParam1": "myParam1Value",
  "myParam2": "myParam2Value"
});
```

При этом Яндекс Метрика принимает не только строки и числа. В параметрах можно передавать объекты с вложенной структурой, что удобно для описания сложных действий:

```xml
ym(123456789, 'reachGoal', 'myEventName', {
  form: {
    id: 'lead_form',
    type: 'popup'
  }
});
```

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

После того как цели начинают фиксироваться, информация о них появляется в отчётах. Найти их можно во вкладке **Отчёты → Содержание → Параметры цели**. Здесь:

- отображаются зафиксированные достижения целей;<br><br>
- базовая группировка строится по JavaScript-целям;<br><br>
- параметры доступны как вложенности цели (в интерфейсе они называются «Группировками»), отражающими структуру переданных данных.

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

## Как использовать Яндекс Метрику с разметкой в Google Tag Manager

Переход с Google Analytics обычно выполняется в несколько этапов. На первом из них все события начинают отправляться в Яндекс Метрику, но управление существующей разметкой всё ещё выполняется через **Google Tag Manager (GTM)**. Это снижает потенциальные риски и на время переходного периода позволяет собирать данные как в Google Analytics, так и в Яндекс Метрике.

Логика работы следующая:

- пользовательские действия продолжают отслеживаться триггерами GTM;<br><br>
- значения подставляются из переменных GTM;<br><br>
- вместо отправки событий в Google Analytics фиксируется достижение JavaScript-цели в Яндекс Метрике (либо данные могут отправляться сразу в обе системы).

Предположим, что в контейнере Google Tag Manager уже настроены:

- триггер «Отправка формы»;<br><br>
- переменные `FormType`, `ButtonText`.

В этом случае создаётся тег типа `Custom HTML` со следующим кодом:

```xml
<script>
  ym(123456789,'reachGoal','lead_submit', {
    form_type: '{{FormType}}',
    button_text: '{{ButtonText}}'
  });
</script>
```

Здесь:

- `lead_submit` — идентификатор JavaScript-цели в Яндекс Метрике;<br><br>
- значения параметров подставляются из переменных GTM;<br><br>
- вся логика сбора данных остаётся централизованной в контейнере.

Фактически меняется только точка назначения данных, а структура триггеров, набор переменных и сценарии срабатывания остаются прежними. За счёт этого можно перенастроить аналитику с Google Analytics на Яндекс Метрику без пересборки существующей логики отслеживания.

Вкратце на этом этапе система выглядит так:

- Google Analytics может быть отключена;<br><br>
- Яндекс Метрика фиксирует достижение целей и принимает параметры;<br><br>
- триггеры по-прежнему описаны в GTM;<br><br>
- управление логикой не требует изменений в коде сайта.

Следующим шагом становится перенос разметки в **Яндекс Тег Менеджер**, где вся логика полностью локализуется.

## Как подключить Тег Менеджер в Яндекс Метрике: базовая логика

Яндекс Тег Менеджер работает как часть счётчика Яндекс Метрики. Он загружается вместе с кодом счётчика, но при этом имеет собственный слой логики для управления тегами и триггерами.

Подключение выполняется в интерфейсе Яндекс Метрики:

**1.** Откройте настройки и перейдите в раздел «Счётчик».

**2.** Включите Тег Менеджер.

**3.** При необходимости активируйте опцию «Пользовательский HTML», если требуется запуск произвольного кода.

<Img
img="/api/uploads/02_tegmng_15b7daba60.png"
alt="Подключение Тег менеджера в Яндекс Метрике"
/>

После этого менеджер тегов готов к работе. Если счётчик Яндекс Метрики уже установлен на сайте, в код не потребуется вносить никаких изменений.

### Переменные, триггеры и теги

По логике работы Яндекс Тег Менеджер близок к Google Tag Manager. В нём также используются переменные, триггеры и теги, которые связываются между собой. При этом важно отметить, что повторная разметка сайта не понадобится, а для вызова триггера пользовательских событий используется тот же синтаксис, что и в GTM:

```xml
dataLayer.push({ event: 'form-submitted', param: 'param-value' });
```

**Переменные.** В менеджере доступны встроенные переменные, которые чаще всего используются в условиях и передаче данных:

- URL страницы;<br><br>
- текст клика;<br><br>
- идентификатор формы;<br><br>
- referrer и другие.

Эти значения можно применять в условиях триггеров и при передаче параметров в тегах.

Переменные уровня данных (те параметры, которые передаются через `dataLayer.push`) необходимо перенести отдельно. Для этого:

- нажмите «Добавить переменную» и укажите название;<br><br>
- в поле «Шаблон переменной» выберите «Переменная уровня данных»;<br><br>
- в появившемся поле «Имя переменной уровня данных» укажите значение, которое используется в качестве параметра в `dataLayer.push`.

При необходимости также можно создать служебную переменную с кодом счётчика. Для этого в шаблоне переменной выберите «Константа» и укажите номер вашего счётчика Яндекс Метрики.

<Img
img="/api/uploads/03_perem_d38c04e0fb.png"
alt="Создание переменной в Яндекс Тег Менеджере"
/>

**Триггеры.** В Яндекс Тег Менеджере они работают аналогично GTM. Триггер реагирует на действие пользователя и запускает связанный с ним тег. Например:

- тип: «Отправка формы»;<br><br>
- условие: `Form ID` равно `lead_form`.

Для пользовательских событий, отправляемых через `dataLayer.push`, необходимо выбрать тип триггера «Специальное событие». В качестве названия события укажите значение поля `event`, заданное в `dataLayer.push`.

**Теги.** Также опираются на логику, аналогичную GTM, и выполняют код при срабатывании триггера. Для разметки целей используется шаблон тега из каталога с названием «Яндекс Метрика», служащий для передачи информации о достижении цели.

При этом в отличие от GTM, в Яндекс Тег Менеджере доступен визуальный шаблон, поэтому прописывать HTML-код вручную не требуется.

<Img
img="/api/uploads/04_nastrteg_4c6d13c074.png"
alt="Настройка тега в Яндекс Тег Менеджере"
/>

В поле «ID счётчика» укажите ранее созданную переменную. Для передачи параметров необходимо выбрать опцию «Добавить поле params» и указать JSON-структуру, где в качестве значений используются переменные уровня данных. Например:

```xml
{"form-type":"{{FormType}}", "button-text":"{{ButtonText}}"}
```

После публикации:

- достижение JavaScript-цели будет фиксироваться в Яндекс Метрике;<br><br>
- параметры станут доступны в отчёте (Отчёты → Содержание → Параметры цели).

Синтаксис вызовов на сайте не меняется, поэтому на завершающем этапе достаточно удалить код GTM и заменить его кодом Яндекс Метрики в шаблоне сайта.

Таким образом, краткая последовательность перехода с Google Analytics на Яндекс Метрику выглядит так:

**1.** Действия, которые ранее отслеживались как события в Google Analytics, переводятся в цели Яндекс Метрики.
 
**2.** Контекст действий передаётся через параметры `reachGoal`.

**3.** На первом этапе логика может продолжать работать в Google Tag Manager.

**4.** Затем эта же логика переносится в Яндекс Тег Менеджер без изменения сценариев срабатывания.

## Заключение

Переход на отечественные инструменты веб-аналитики в 2026 году — это актуальная и при этом технически реализуемая задача. Яндекс Метрика предоставляет богатый функционал для сбора и анализа данных, а Яндекс Тег Менеджер обеспечивает централизованное управление разметкой и сценариями. При корректной настройке качество аналитики сохраняется, а работа с данными остаётся управляемой и соответствует требованиям законодательства.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье пошагово разбираем, как перейти с Google Analytics на Яндекс Метрику, в чём отличие подходов двух инструментов и что учитывать в процессе.

small_cov_new_1.png

thumbnail_cov_new_1.png

cov_new_1.png

Переход с Google Analytics на Яндекс Метрику: как не потерять данные и время

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

В статье разбираем отличия отображения AMP-писем в Gmail и Mail.ru, а также какие ограничения необходимо учитывать при вёрстке.

## Состояния (amp-state) и их начальные значения

Состояния в AMP-письмах используются как переменные, где можно хранить любые данные и строить на их базе условную логику отображения. Эти значения подставляются в атрибуты (`[text]`, `[class]` и другие) и обновляются в ответ на действия пользователя. 

Важно учитывать, что значение внутри `<amp-state>` применяется только после инициализации состояния через `AMP.setState`. Если какие-либо данные необходимо показать сразу после открытия письма, их можно задать как обычный контент элемента или значение атрибута:

```xml
<span [text]="myItem.el">default value</span>
```

В данном случае изначально будет отображаться `default value`, а после действия пользователя — значение `myItem.el`. При этом само действие может быть любым, в том числе формальным. Например:

```xml
<amp-state id="myItem">
  <script type="application/json">
    { "el": "new value" }
  </script>
</amp-state>
<span [text]="myItem.el">default value</span>
<button on="tap:AMP.setState({})">Кнопка</button>
```

В **Gmail** этот процесс работает в соответствии со стандартом. Здесь при клике на кнопку инициализируется состояние, и в элементе `<span>` появляется текст `new value`. 

**Mail.ru**, в свою очередь, не учитывает начальные значения, заданные в `<amp-state>`. Из-за этой особенности атрибуты, которые рассчитывают на данные по умолчанию, после инициализации будут отображаться как `null`.

Для обхода этого ограничения вместо `<amp-state>` используйте `setState`, чтобы значения динамически обновлялись в момент действия пользователя:

```xml
<button on="tap:AMP.setState({ myItem: { el: 'new value' } })">
  Кнопка
</button>
<div [text]="myItem.el">default value</div>
```

## Ограничение на размер выражений

Хотя в `amp-bind` стандартом не предусмотрены какие-либо ограничения, **Mail.ru** устанавливает строгий лимит на длину выражений — не более **100** единиц. В частности, команда Pixcraft столкнулась с этим ограничением во время разработки [**AMP-игры «Змейка»**](https://pixcraft.io/ru/blog/zmejka-v-pisme-kak-my-s-altcraft-sozdali-igru-dlya-amp-rassylki). При клике на кнопку в письме Mail.ru отображал ошибку:

```xml
amp-bind: Expression eval failed. Expression size (194) exceeds max (100)
```

В то же время с **Gmail** подобных сложностей не возникало.

Здесь практическое решение — проектировать логику письма с учётом лимита в Mail.ru: оптимизировать вычисления таким образом, чтобы не выходить за установленные рамки. 

## Работа AMP‑каруселей

`<amp-carousel>` — полезный инструмент для создания интерактивных галерей изображений. Он работает предсказуемо в большинстве клиентов с поддержкой AMP, однако в **Gmail для iOS** при нажатии на стрелку навигации письмо прокручивается вверх, а контекст просмотра теряется. Исправить проблему настройками самого `<amp-carousel>` нельзя, так как она не связана с параметрами `type`, `layout` или размерами компонента.

Надёжным решением для этой ситуации становится сборка собственной карусели с использованием `amp-bind`. В этом варианте письмо при взаимодействии не смещается самопроизвольно. Ниже — пример такой AMP‑карусели, включающий 4 слайда:

```xml
<style amp-custom>
.carousel-wrapper {
position: relative;
width: 500px;
height: 400px;
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%); }
.slide-3 { transform: translateX(-300%); }
.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="pic1.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic2.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic3.jpg" width="500" height="400" class="carousel-slide"></amp-img>
<amp-img src="pic4.jpg" width="500" height="400" class="carousel-slide"></amp-img>
</div>
</div>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 4) % 4}})">
Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 4}})">
Next
</button>
```

Базовая логика здесь следующая:

- индекс текущего слайда хранится в состоянии;<br><br>
- контейнер со слайдами сдвигается через `transform: translateX(...)`;<br><br>
- навигация реализуется через `AMP.setState` по кнопкам «вперёд» и «назад».

## Поддержка CSS

Восприятие AMP-CSS в Gmail и Mail.ru заметно различается. Например, **Gmail** следует спецификации AMP for Email максимально строго, что проявляется в нескольких аспектах:

- **Разрешён только ограниченный набор CSS-свойств.** Конструкции, выходящие за рамки спецификации, приводят к тому, что письмо не проходит валидацию.<br><br>
- **Запрещено использование псевдоэлементов `:before` и `:after`.** Это критично для привычных приёмов вёрстки, таких как декоративные иконки, маркеры списков, оверлеи и тени, реализуемые через псевдоэлементы.<br><br>
- **[Анимация](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya) и переходы сильно ограничены на уровне рендеринга.** Поддерживаются только базовые CSS-анимации, без сложных таймингов и цепочек эффектов.

**Mail.ru** на практике предъявляет более мягкие требования к использованию CSS. Здесь:

- шире поддержка CSS-анимаций;<br><br>
- меньше ограничений на декоративные приёмы и визуальные эффекты;<br><br>
- допустимы решения, которые Gmail блокирует или игнорирует при рендеринге.

Из-за этого если при вёрстке письма ориентироваться только на Mail.ru, почти неизбежно появляется CSS, который Gmail не принимает. Поэтому более надёжная стратегия работы с AMP-CSS выглядит так:

- основная вёрстка с учётом ограничений Gmail: только разрешённые свойства, без псевдоэлементов, с минимальными анимациями;<br><br>
- контрольная проверка, что AMP стабильно отображается в Gmail;<br><br>
- аккуратное расширение под Mail.ru: использование дополнительных анимаций и визуальных приёмов поверх базовой вёрстки, уже прошедшей проверку в Gmail.

## Тёмная тема в AMP‑письмах

На работу [**тёмной темы**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat) влияют как сам почтовый клиент, так и используемая платформа. Из-за этого один и тот же AMP-шаблон может выглядеть по-разному в Mail.ru, Gmail на Android и Gmail на iOS.

**Mail.ru** не перекрашивает AMP-письма автоматически. Цвета, фоны и контраст здесь задаются через CSS. Для управления темами используется meta-тег:

```xml
<meta name="supported-color-schemes" content="light dark">
```

Также задействуются CSS-селекторы в `style`:

- `:root[data-ogsc]` — тёмная тема;<br><br>
- `:root:not([data-ogsc])` — светлая тема.

В **Gmail для Android** ситуация иная. При включённой тёмной теме светлые AMP-письма автоматически перекрашиваются по общей логике преобразования светлого макета в тёмный. Если же AMP-письмо изначально выполнено в тёмной цветовой схеме, в Gmail на Android оно сохраняет свой внешний вид. По этой причине тёмные дизайны здесь обычно отображаются стабильнее, чем светлые.

В **Gmail для iOS** AMP-письма не перекрашиваются автоматически, а управлять тёмной темой через CSS нельзя. Письмо отображается в исходных цветах вне зависимости от настроек системы или самого приложения Gmail.

Таким образом, полноценная поддержка светлой и тёмной темы доступна только для Mail.ru. Поэтому при жёстких требованиях к цветам рекомендуется использовать нейтральный или базовый тёмный дизайн, а проверку письма стоит проводить отдельно в каждом клиенте.

## Тестирование AMP‑писем

Тестирование — финальный этап перед отправкой рассылки. Он позволяет оценить валидность AMP-кода, корректность CSS и то, как почтовый клиент реагирует на ошибки.

Для этого **Gmail** предлагает инструмент [**Gmail AMP for Email Playground**](https://amp.gmail.dev/playground/), с помощью которого можно:

- проверять разметку на соответствие спецификации AMP for Email;<br><br>
- обнаруживать недопустимые компоненты или атрибуты;<br><br>
- отправлять тестовые письма на собственный адрес @gmail.com.

<Img
img="/api/uploads/01_pgrndgm_ef906bc75c.png"
alt="Playground Gmail"
/>

Если после отправки в клиенте отображается AMP-версия — значит, проверка пройдена. Если же вместо неё открывается HTML-версия, над письмом появится уведомление: код ошибки (например, недопустимый компонент) и ссылка на документацию.

Собственный [**Playground**](https://postmaster.mail.ru/amp/playground.html) есть и у **Mail.ru**. В нём также можно выявить ошибки, связанные с нарушением спецификации или внутренних ограничений почтового клиента, и отправить тестовую рассылку себе на почту.

<Img
img="/api/uploads/02_plgrnmlr_7a2a6e664c.png"
alt="Playground Mail.ru"
/>

Таким образом, оптимальным решением становится тестирование в обоих клиентах:

- сначала общая проверка валидности AMP-кода;<br><br>
- затем тестирование интерактива и логики в Gmail;<br><br>
- после этого обязательная проверка рендеринга и поведения в Mail.ru.

Подробнее о том, как подготовить AMP-письмо к тестированию и отправке, читайте в нашей [**подробной инструкции**](https://docs.pixcraft.io/ru/amp/getting_started.html).

## Заключение

Поведение AMP-писем зависит не только от реализации кода, но и от правил его обработки в почтовом клиенте. Учёт особенностей Gmail и Mail.ru помогает сохранить контроль над интерактивом и визуальной частью письма. В этом контексте различия между клиентами задают понятные рамки, на основании которых строится реализация email-кампаний.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

Рассказываем о различиях отображения AMP-писем в Gmail и Mail.ru: как отличаются использование состояний, восприятие длины выражений, работа каруселей, тёмная тема и многое другое.

Заметки

Рекомендовано к прочтению в блоге