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

Дисплеи с высокой плотностью пикселей, такие как Retina, предъявляют собственные требования к качеству графики. Это касается в том числе дизайна писем: иллюстрации, баннеры и иконки должны выглядеть качественно на самых разных экранах.

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

## Что такое Retina-дисплеи и в чём их особенность

Термин «Retina» был представлен корпорацией Apple в 2010 году и поначалу относился только к дисплеям её собственных устройств. Но со временем он вышел за рамки продуктов компании и неформально стал обозначать все экраны с высоким значением DPR (Device Pixel Ratio).

DPR показывает, сколько физических пикселей экрана используется для отображения одного CSS-пикселя:

- на экране с DPR=1 один CSS-пиксель соответствует одному физическому; 
- на устройствах с DPR=2 одному CSS-пикселю соответствуют два физических по горизонтали и два по вертикали, то есть всего четыре пикселя; 
- на дисплеях с DPR=3 — уже девять физических пикселей на один CSS-пиксель.

Предположим, что растровое изображение с разрешением 450×300 px в макете письма отображается как 450×300 CSS-пикселей. На экране с DPR=2 такое изображение займёт 900×600 физических пикселей и из-за этого может визуально «размываться».

Со [**шрифтами**](https://pixcraft.io/ru/blog/tipografika-pisem-kak-sdelat-tekst-chitaemym) подобных проблем обычно не возникает. Глифы шрифтов описываются векторными контурами и при выводе переводятся в пиксели с учётом плотности экрана. Поэтому визуально текст остаётся качественным в том числе на дисплеях с высокой плотностью пикселей.

### Почему это важно для email-рассылок

В email-кампаниях читатели, как правило, первым делом обращают внимание на визуальную составляющую. Поэтому графика в письме играет не менее важную роль, чем [**адаптивность вёрстки**](https://pixcraft.io/ru/blog/adaptivnyj-design) и корректное отображение в разных почтовых клиентах.

Так, фирменные элементы бренда часто содержат тонкие линии, мелкую типографику или сложные графические детали. При отображении на экране с DPR=2 и выше дефекты масштабирования особенно заметны именно в подобных элементах. 

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

<Img
img="/api/uploads/01_notadapt_355f8cb4b3.png"
alt="Логотип, не адаптированный под дисплеи с высоким DPR"
/>

Для сравнения, ниже — адаптированное изображение, сохраняющее качество детализации при масштабировании:

<Img
img="/api/uploads/02_adapted_c648987822.png"
alt="Логотип, адаптированный под дисплеи с высоким DPR"
/>

Это относится не только к [**брендингу**](https://pixcraft.io/ru/blog/kak-ispolzovat-brending-v-email-shablonah-dlya-sozdaniya-uznavaemogo-stilya), но и ко всем остальным графическим компонентам письма. Если они выглядят размытыми или присутствует заметная пикселизация, то рассылка воспринимается как небрежная и плохо подготовленная.

## Как адаптировать изображения под высокий DPR

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

Например, если отображаемый размер логотипа составляет 150×62 px, графический файл готовят в масштабе 300×124 px. При этом в коде обязательно фиксируют отображаемый размер через атрибуты `width` и `height`, чтобы почтовый клиент отрисовал изображение в нужных пределах:

```xml
<img src="logo2x.png" width="150" height="62" alt="Company logo" style="display:block; border:0;">
```

Такой логотип будет занимать всё те же 150×62 CSS-пикселя, но за счёт подготовки файла в увеличенном размере изображение сохранит визуальное качество на экранах с DPR=2.

Обычно бывает достаточно увеличения элемента в 2 раза относительно фактического размера: коэффициент закрывает большинство типовых сценариев для современных смартфонов, ноутбуков и планшетов. Теоретически возможно и увеличение в 3 раза, но в email-рассылках оно используется реже, так как при этом растёт и вес файлов.

## Что учитывать при адаптации изображений для писем

### Подбор нужного формата

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

- **PNG** — изображения со сжатием без потерь, за счёт чего сохраняются чёткие контуры и мелкие детали. PNG поддерживается [**большинством почтовых клиентов**](https://www.caniemail.com/features/image-png/), включая мобильные версии, и подходит в том числе для логотипов, иконок, интерфейсной графики и иллюстраций с прозрачным фоном. 
- **JPEG** — здесь размер файла уменьшается за счёт частичной потери данных изображения, а прозрачные фоны не поддерживаются. Формат подходит для фотографий и сложных иллюстраций с большим количеством цветов. 
- **GIF** — чаще всего используется для простой [**анимации**](https://pixcraft.io/ru/blog/animaciya-v-email-rassylkah-rekomendacii-dlya-stabilnogo-otobrazheniya): небольших анимированных баннеров, демонстрации интерфейса или коротких иллюстративных сцен. Формат поддерживает ограниченную палитру (до 256 цветов), поэтому не подходит для сложной графики.

Помимо этого в веб-разработке широко используется формат **SVG**. За счёт того, что он является векторным, формат не имеет проблем с чёткостью отображения при масштабировании. Однако в email-рассылках SVG практически не используется. Причина — низкий уровень поддержки: ни один популярный почтовый клиент (включая Gmail и Mail.ru) не отображает SVG-иллюстрации.

### Компромисс по размеру рассылки

Увеличение размеров изображений неизбежно влияет на вес письма. Чем больше графических элементов используется в рассылке, тем выше их суммарный объём, что сказывается на времени загрузки письма.

Для оптимизации изображений можно воспользоваться специальными сервисами, например **TinyPNG**: они уменьшают объём файла за счёт более эффективного сжатия и удаления лишних служебных данных, не влияющих на визуальное отображение. Подобная обработка особенно актуальна для крупных баннеров, фоновых иллюстраций и других изображений.

### Текст внутри изображений

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

Проблемы возникают, когда в изображениях размещается основной текст письма:

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

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

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

Дисплеи с высоким DPR уже стали обычным явлением, и дизайн рассылок должен это учитывать. Аккуратная подготовка графики делает письма визуально цельными и поддерживает высокое качество отображения на различных типах дисплеев.

Корректно адаптировать шаблоны писем вам поможет наш [**плагин для Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios). Он позволяет не просто выгрузить готовую вёрстку письма, но и автоматически адаптирует все изображения под Retina-экраны.

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

В статье рассказываем про особенности адаптации писем под экраны с высокой плотностью пикселей: как это происходит и что следует принимать во внимание.

small_ret_cover.png

thumbnail_ret_cover.png

ret_cover.png

Вёрстка писем под Retina-дисплеи: как адаптировать и что при этом учитывать

В статье сравниваем конструкторы писем 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'
 }
});
```

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

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

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

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

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

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

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

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

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

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

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

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

Здесь:

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

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

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

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

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

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

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

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

**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 страницы; 
- текст клика; 
- идентификатор формы; 
- referrer и другие.

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

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

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

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

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

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

- тип: «Отправка формы»; 
- условие: `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-цели будет фиксироваться в Яндекс Метрике; 
- параметры станут доступны в отчёте (Отчёты → Содержание → Параметры цели).

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

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

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

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

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

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

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

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

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

Заметки

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