Рассказываем про аналитику email-рассылок: что полезного она даёт, как настроить её в Pixcraft и подключить к вашим письмам, а также как использовать данные аналитики на практике.

small_cov_analytics.png

thumbnail_cov_analytics.png

cov_analytics.png

Аналитика писем: как оценить эффективность ваших email-рассылок

В статье рассказываем о том, какую пользую несут мастер-шаблоны писем и как с ними работать в визуальном конструкторе Pixcraft.

small_Обложка Pixcraft (2) (1).png

thumbnail_Обложка Pixcraft (2) (1).png

Обложка Pixcraft (2) (1).png

Мастер-шаблоны писем: для чего они нужны и как с ними работать

Мы выпустили глобальное обновление Pixcraft, одно из самых крупных в истории сервиса. Изменения затронули как интерфейс, так и функционал конструктора шаблонов и плагина для Figma.

Рассказываем, что именно изменилось, что нового добавили и что улучшили в уже привычном функционале.

## Работа с шаблонами писем

### Обновлённый экран рабочего пространства

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

<Img
img="/api/uploads/01_interfeis_5ea0121af8.png"
alt="Обновлённый экран рабочего пространства"
/>

### Предпросмотр шаблона прямо из списка

Ранее предпросмотр письма в Pixcraft был доступен только внутри конструктора. Чтобы оценить итоговый вид шаблона, сначала требовалось открыть его в редакторе. 

Свежее обновление предлагает пользователям возможность проверять email-шаблоны непосредственно в общем списке. Функция пригодится, в частности, когда нужно быстро просмотреть или сравнить несколько писем.

Работает это так: наведите курсор на шаблон, письмо немного увеличится на экране и при вертикальном движении будет скроллиться вверх и вниз. А как только вы уберёте с него курсор, оно вернётся к исходному размеру.

<Img
img="/api/uploads/02_predprosmanimatsiya_4a4a5bfd53.gif"
alt="Предпросмотр шаблона из списка"
/>

### Система тегов

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

Требуемое название тегов вы задаёте сами: например, можно указать тип шаблона (триггерное письмо, промо, регулярная рассылка), принадлежность к определённой кампании, имя сотрудника, работавшего над рассылкой, или что-то другое.

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

<Img
img="/api/uploads/03_tegidspiske_af83df1518.png"
alt="Теги в списке шаблонов"
/>

### Тестовые рассылки

Одно из важнейших обновлений в конструкторе Pixcraft — функция отправки тестовых писем, с помощью которой вы можете оценить отображение шаблона в нужных почтовых клиентах [**до запуска рассылки**](https://pixcraft.io/ru/blog/checklist-chto-protestirovat-pered-otpravkoj-pisma).

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

<Img
img="/api/uploads/04_testrrasilok_2a9d1594c7.png"
alt="Тестирование рассылок"
/>

### Обновлённая панель экспорта и интеграций

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

Помимо этого, мы добавили возможность сжатия кода при экспорте письма. Активировать или деактивировать её можно по соответствующему переключателю.

<Img
img="/api/uploads/05_exportpanel_8a33b412db.png"
alt="Экспорт шаблона"
/>

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

<Img
img="/api/uploads/06_integratsiyapanel_0a31b75d27.png"
alt="ESP-интеграции"
/>

### Разделение ассетов по проектам

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

Такое разделение особенно актуально для команд, которые одновременно работают с несколькими брендами, продуктами или направлениями. Элементы не смешиваются в общей библиотеке, а внутри проекта остаётся только тот набор, который относится к текущему списку писем.

Количество доступных проектов зависит от вашего тарифного плана: 1 проект в «Персональном» (Personal), до 3 проектов в «Стартовом» (Starter) и до 10 — в «Профессиональном» (Pro).

## Гибкая настройка прав доступа

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

Настроить права доступа возможно для:

- шаблонов; 
- компонентов; 
- ассетов; 
- интеграций; 
- файловых хранилищ; 
- статистики; 
- тестовых отправок.

<Img
img="/api/uploads/07_kategoriipolzovatel_865f0e35af.png"
alt="Настройка прав доступа"
/>

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

## Отслеживание условий тарифа

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

<Img
img="/api/uploads/08_uslovijatarifa_cf6ea0415b.png"
alt="Условия тарифа"
/>

Следует учитывать, что условия выбранного тарифного плана распространяются на всё рабочее пространство, а не рассчитываются отдельно для каждого проекта или пользователя.

Например, в рамках «Стартового» плана (Starter) можно создать 3 проекта и 300 шаблонов, а также экспортировать шаблоны 300 раз в месяц. В этом случае:

- Если в одном проекте создать 200 шаблонов, то на два других суммарно останется всего 100 доступных шаблонов. 
- Экспорты учитываются по тому же принципу: 300 экспортов за месяц распределяются на всех участников проекта, а не выдаются каждому отдельно.

## Аналитика

В Pixcraft уже была доступна аналитика AMP-рассылок, однако свежее обновление расширило возможности сервиса и сделало его независимым от сторонних решений: 

- Во-первых, теперь вы можете добавлять аналитику и к шаблонам, созданным в Pixcraft, и к шаблонам, собранным вручную. 
- Во-вторых, аналитика работает полностью самостоятельно в контуре Pixcraft. Больше нет необходимости интегрировать её с Google Analytics или [**Яндекс Метрикой**](https://pixcraft.io/ru/blog/perekhod-s-google-analytics-na-yandeks-metriku-kak-ne-poteryat-dannye-i-vremya).

Отслеживание статистики для писем, созданных в конструкторе, подключается на этапе экспорта: для этого можно выбрать сбор статистики по открытиям и по времени. В разделе «Аналитика» отображаются все письма, которые были выгружены с отметкой сбора событий. Также прямо здесь можно создать новую кампанию. 

<Img
img="/api/uploads/09_analitikaspisok_c91272e332.png"
alt="Экран аналитики"
/>

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

<Img
img="/api/uploads/10_polzovatsobitiya_dc43110fa3.png"
alt="Пользовательские события"
/>

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

<Img
img="/api/uploads/11_grafikotchet_1e9be2fde0.png"
alt="Графики аналитики"
/>

## AMP-компоненты

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

<Img
img="/api/uploads/12_ampsostavpolej_9206dd890a.png"
alt="Состав полей AMP-компонента"
/>

Также для полей теперь возможно задавать правила их проверки. К примеру, валидацию можно настроить для адреса электронной почты или номера телефона.

<Img
img="/api/uploads/13_ampvalidatsija_e06b0fbdac.png"
alt="Валидация полей AMP-компонента"
/>

### Интеграция с Telegram

Для оперативной обработки сообщений в AMP-формах и [**«Живой ленте»**](https://pixcraft.io/ru/blog/zhivaya-lenta-v-amp-rassylkah-novyj-uroven-vovlecheniya) ранее были предусмотрены только вебхуки. Однако со свежим обновлением мы также добавили прямую интеграцию с Telegram. 

Интеграция настраивается с помощью [**специального бота**](https://t.me/pixcraft_forms_bot). К примеру, вы можете добавить его в собственную группу и настроить так, чтобы он отправлял уведомления именно туда. 

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

## Плагин для Figma

Изменения коснулись в том числе и [**плагина Pixcraft для Figma**](https://pixcraft.io/ru/figma). Была добавлена поддержка проектов: по умолчанию используется проект, в котором вы работали ранее, а выбрать другой можно в меню пользователя.

<Img
img="/api/uploads/14_plagininterf_2ab8103b47.png"
alt="Интерфейс Figma-плагина"
/>

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

<Img
img="/api/uploads/15_plaginexport_264e6c3855.png"
alt="Экспорт через Figma-плагин"
/>

При экспорте макета через плагин Figma он автоматически появится в списке шаблонов текущего проекта и будет отмечен соответствующей иконкой.

<Img
img="/api/uploads/16_plaginshablonvspiske_0e6a7b0c0d.png"
alt="Шаблон в списке"
/>

## Другие изменения

На этом список нововведений не заканчивается. Помимо крупных обновлений в Pixcraft были внесены следующие технические улучшения:

- Сохранение email-шаблонов ускорено в несколько раз. Больше не нужно ждать долгой загрузки после внесения значительных изменений. 
- Добавлено автоматическое сжатие PNG-изображений без потери качества: оно выполняется при загрузке изображения. Такой же механизм применяется к макетам, которые создаются в Figma с помощью плагина. 
- Повышены стабильность, отказоустойчивость, безопасность и общее быстродействие сервиса.

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

Глобальное обновление Pixcraft упрощает работу над письмами на всех этапах, от подготовки макета до тестирования, экспорта и анализа результатов. Оцените нововведения в действии: [**создайте аккаунт**](https://app.pixcraft.io/user/register) и получите бесплатный доступ к Pixcraft на 14 дней. А если вы хотите прокачать свои знания в email-маркетинге — подписывайтесь на наш [**Telegram-канал**](https://t.me/pixcraft_io), где мы делимся полезными материалами, лайфхаками и идеями для работы.

Рассказываем про новый функционал конструктора Pixcraft, а также плагина Pixcraft для Figma: что изменилось со свежим обновлением сервиса, какие новые функции были добавлены и как обновились уже существующие.

small_updates_cover (1).png

thumbnail_updates_cover (1).png

updates_cover (1).png

Обновление Pixcraft: что нового в конструкторе писем

В 2026 году [**более 55%**](https://genesysgrowth.com/blog/mobile-email-engagement-stats-for-marketing-leaders) электронных писем открывают со смартфонов и планшетов. Это значит, что рассылки должны сохранять читаемость, удобство и рабочую структуру одновременно и на десктопе, и на мобильных устройствах.

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

## Какие особенности email-среды нужно учитывать при адаптации писем

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

### Медиа-запросы

В веб-разработке медиа-запросы — краеугольный камень адаптивности. Они позволяют менять отображение в зависимости от ширины экрана, ориентации (книжная или альбомная), [**плотности пикселей**](https://pixcraft.io/ru/blog/vyorstka-pisem-pod-retina-displei-kak-adaptirovat-i-chto-pri-etom-uchityvat) и темы (светлая или тёмная). Например, можно переключить отображение с двух колонок на одну при определённой ширине окна.

Вот только с почтовыми клиентами история совсем иная. Далеко [**не все клиенты**](https://www.caniemail.com/features/css-at-media/) понимают медиа-запросы: значительная часть работает с ними ограниченно или вообще их не поддерживает, из-за чего медиа-запросы в профессиональной email-вёрстке не следует рассматривать как основной механизм адаптации.

Два наиболее ярких примера — Яндекс Почта и мобильная web-версия Gmail. Медиа-запросы здесь не работают, поэтому письмо на их основе теряет адаптивность (а иногда и читаемость).

### Mobile First в емейлах

Подход Mobile First следует упомянуть отдельно. Его идея заключается в том, что письмо или страница изначально верстается для маленьких экранов, а затем через медиа-запросы адаптируется под десктопы и ноутбуки. Без медиа-запросов получатель видит одноколоночную мобильную вёрстку, а при их срабатывании — полноценную десктопную. Такой подход, в частности, использует фреймворк [**MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml).

Но если медиа-запросы не сработали, на десктопе отобразится мобильная версия письма. Например, с такой проблемой можно столкнуться при открытии рассылки в Яндекс Почте. Поэтому полагаться на подход Mobile First, особенно для рассылок в России — не лучший вариант.

## Как организовать надёжную мобильную адаптацию

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

- за основу берутся таблицы, формирующие каркас письма; 
- адаптивные блоки внутри них реализуются через CSS-свойства, которые понимает большинство email-клиентов; 
- медиа-запросы задействуются только для косметических улучшений; 
- вспомогательная структура для Outlook строится на условных комментариях.

Разберём слои этого подхода по порядку.

### Таблицы как фундамент

Табличная структура (`<table>`) в email-вёрстке ведёт себя предсказуемо и поддерживается большинством клиентов. Таблицы задают внешнюю сетку письма: ширину, расположение основных секций, фоновые цвета. 

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

### Блоки для адаптации без медиа-запросов

Основной ингредиент, обеспечивающий мобильную перестройку даже в отсутствие медиа-запросов — это обычные `div` с атрибутом:

`style="display: inline-block"`

Элементы с `inline-block` располагаются в строку, пока хватает ширины родительского блока. Если места недостаточно, последний элемент переносится на следующую строку. Подход исправно работает в Яндекс Почте, мобильной web-версии Gmail и других клиентах.

На практике базовая мобильная адаптация выглядит следующим образом.

Предположим, что в десктопной версии письма есть две колонки по 300 px без отступов. Они умещаются внутри контейнера шириной 600 px. Но в мобильном клиенте доступная ширина будет составлять, к примеру, 430 px. Здесь колонки уже не помещаются в одну линию и вместо этого автоматически перестраиваются друг под друга.

<Img
img="/api/uploads/01_mobileadapt_e950bd44fd.png"
alt="Адаптация в мобильной версии письма"
/>

### Медиа-запросы как слой тонкой настройки

Иногда после перестроения у блоков остаётся пустое место слева или справа. Это происходит из-за того, что блоки не растягиваются сами по себе: вместо этого они сохраняют ту ширину, которая была задана для десктопа.

В этой ситуации как раз могут пригодиться медиа-запросы. С их помощью можно:

- изменить ширину блоков на 100%, чтобы они равномерно заполняли экран;

<Img
img="/api/uploads/02_variousadapt_ad5519f7ea.png"
alt="Адаптация с медиа-запросами и без медиа-запросов"
/>

- скорректировать выравнивание (например, переключиться с левого на центральное); 
- скрыть или подменить элементы (например, в десктопной версии показывать горизонтальный баннер, а при срабатывании медиа-запроса на мобильных устройствах — квадратный);

<Img
img="/api/uploads/03_differentbanners_588cae0ea2.png"
alt="Баннеры в десктопной и мобильной версии письма"
/>

- трансформировать отступы: схлопывать ненужные зазоры, превращать горизонтальные разделители в вертикальные.

<Img
img="/api/uploads/04_reshapecolumns_9b100f8f09.png"
alt="Перестроение в мобильной версии письма"
/>

Принципиально важно, что если медиа-запросы не поддерживаются, получатель увидит «базовую» адаптацию с чуть менее эстетичными, но полностью функциональными элементами.

### Условные комментарии для Outlook

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

Причина здесь следующая: 

- Outlook рендерит письма через движок Word, который игнорирует большинство CSS-свойств, необходимых для адаптивного поведения. 
- Из-за этого классические методы перестроения контента (такие как `inline-block`, `float`, `flex` и `grid`) либо работают непредсказуемо, либо не работают вообще. 

Для B2B-сегмента, где Outlook — один из наиболее востребованных почтовых клиентов, потеря качества может оказаться критичной для всей коммуникации.

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

``

Внутри них с помощью таблиц обычно формируется часть структуры: к примеру, многоколоночный блок, который в других клиентах строится на `inline-block`, для Outlook раскладывается в отдельную табличную строку с ячейками.

Проще говоря, десктопный Outlook получает упрощённую, полностью табличную вёрстку и отображает её надёжно и предсказуемо. Остальные клиенты игнорируют условные комментарии и работают с блочной моделью.

## Как ведут себя отступы при мобильной адаптации (и что с этим делать)

Проблема отступов возникает из-за того, что одна и та же вёрстка реализуется в трёх версиях: блочной с `inline-block` (базовая адаптация), улучшенной блочной с медиа-запросами и табличной для Outlook.

Представим, что в десктопном письме две колонки. У левой колонки есть правый отступ (`padding-right`).

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

<Img
img="/api/uploads/05_indentright_b1c81e4cfc.png"
alt="Сохранившийся отступ справа в колонке"
/>

Решений здесь три: 

- Первое — сделать отступы симметричными: добавить у каждого элемента (например, карточек товаров) равные паддинги слева и справа, а в родительском элементе задать центральное выравнивание. Тогда при переносе блоки будут отцентрированы.

<Img
img="/api/uploads/06_indentsboth_bb413b2235.png"
alt="Симметричные отступы в колонках"
/>

Недостаток тут в том, что при таком способе карточки никогда не займут всю ширину экрана и не будут касаться левого и правого края: по бокам всегда будут оставаться отступы. Поэтому решение подходит только в тех случаях, когда это допустимо по дизайну. 
- Второе — оставить асимметричный отступ справа, но сделать выравнивание по левому краю. Тогда перестроенные блоки прижмутся к левой границе, а «лишний» отступ просто окажется у правого края, сохраняя единую ширину контентной части.

<Img
img="/api/uploads/07_indentadapt_104174060b.png"
alt="Выравнивание колонок по левому краю"
/>

- Третье — убрать отступ в мобильной версии с помощью медиа-запросов. Но это не самый надёжный способ, так как если почтовый клиент не поддерживает медиа-запросы, отступ останется. 

## Как устроена адаптация AMP-писем

Технология AMP for Email поддерживается только в современных почтовых клиентах, среди которых — [**Gmail и Mail.ru**](https://pixcraft.io/ru/blog/amp-pisma-kak-razlichaetsya-ih-obrabotka-v-gmail-i-mail-ru). AMP-письма не требуют специальных обходных решений: здесь доступны практически все возможности CSS, включая `flex`, `grid` и медиа-запросы.

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

Следует отметить, что AMP не отменяет необходимости в классическом HTML-шаблоне. Наличие HTML-версии в AMP-письме является обязательным требованием.

## Как мобильная адаптация email-шаблонов работает в Pixcraft

Автоматическая адаптация писем реализована в Pixcraft на уровне email-конструктора. Мы используем комбинирование подходов в зависимости от выбранного режима адаптации. Благодаря этому блоки перестраиваются аккуратно и не теряют визуальной структуры даже при отсутствии поддержки медиа-запросов.

Для почтовых клиентов, поддерживающих медиа-запросы, в редакторе доступны различные [**сценарии адаптации**](https://docs.pixcraft.io/ru/builder/mobile_adaptation.html). Например, здесь можно:

- настроить расширение колонок на всю ширину экрана или оставить перестроение без растягивания; 
- выбрать более сложные схемы перестроения (к примеру, поместить одну колонку с расширением в отдельную строку, а две другие — под ней без расширения).

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

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

Конструктор писем Pixcraft следует этим принципам в логике работы. [**Попробуйте**](https://app.pixcraft.io/user/register) его бесплатно в течение 14 дней и оцените возможности сами. А если хотите узнать о Pixcraft больше — [**напишите нам**](mailto:experts@pixcraft.io), и мы обсудим интересующие вас вопросы.

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

small_adapt_cover.png

thumbnail_adapt_cover.png

adapt_cover.png

Мобильная адаптация писем: как обеспечить корректное отображение для разных устройств и почтовых клиентов

Сравниваем возможности конструкторов писем Pixcraft и Stripo: основные возможности, AMP-функционал, массовое редактирование элементов и многое другое.

small_pix_vs_strp_cover.png

thumbnail_pix_vs_strp_cover.png

pix_vs_strp_cover.png

Pixcraft vs Stripo: какой конструктор писем выбрать

Microsoft Outlook и Gmail (в составе Google Workspace) уже много лет уверенно держат лидерство в сегменте корпоративных рассылок. Однако рынок не ограничивается только гигантами индустрии и предлагает множество иных решений, которые изначально могут не попасть в поле зрения, но определённо заслуживают внимания.

Одно из них — почтовый клиент [**Mozilla Thunderbird**](https://www.thunderbird.net/): его нередко выбирают как бесплатную альтернативу с открытым исходным кодом. В статье расскажем, что представляет собой этот клиент, какие преимущества он предлагает и какие особенности рендеринга писем встречаются в его десктопной и мобильной версиях.

## Что такое Thunderbird и в чём его преимущества

Thunderbird — продукт Mozilla Foundation, создателей популярного браузера Mozilla Firefox. Проект поддерживается как основной командой разработчиков, так и сообществом. При этом он сохраняет независимость от коммерческих платформ и корпоративных экосистем.

Впервые Thunderbird увидел свет в 2003 году и за более чем два десятилетия завоевал признание пользователей, в том числе в корпоративном секторе. Среди основных причин — доступность решения и политика компании.

**Открытый исходный код.** Mozilla Thunderbird представляет собой open-source-проект. Изменения в основной версии оцениваются и принимаются командой разработки. Но при этом исходный код клиента доступен публично: любой желающий может детально изучить, как именно он устроен, предложить улучшения или даже адаптировать код под собственные задачи. 

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

**Свободное и безвозмездное распространение.** Thunderbird полностью бесплатен. Никаких подписок, платных лицензий, обязательного подключения к облачным серверам компании или ограничений по сценариям использования. Письма и настройки остаются под контролем пользователя: их можно хранить локально или на выбранном сервере.

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

Что касается **рендеринга писем**, то Thunderbird отображает HTML-рассылки на базе движка Gecko — того же, который лежит в основе Firefox. То есть, клиент использует знакомую для продуктов Mozilla логику разбора HTML и CSS, в целом корректно обрабатывая базовую структуру email-писем.

Вместе с тем Thunderbird остаётся почтовым клиентом, а не браузером. Письма рендерятся не как обычные веб-страницы, а часть CSS-свойств, медиа-запросов и поведенческих механизмов здесь работает с особенностями и ограничениями. Об этих тонкостях мы и поговорим далее. 

## Особенности рендеринга писем в Thunderbird

### Работа с max-width изображений

Одна из отличительных черт Thunderbird связана с обработкой изображений.

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

<Img
img="/api/uploads/01_upscl_fe0d1cb4bc.gif"
alt="Масштабирование изображения в Thunderbird"
/>

Чтобы реализовать такое поведение, Thunderbird добавляет правило: 

`max-width: 100% !important`

Оно имеет более высокий приоритет для клиента и перезаписывает ограничения, заданные в письме.

Рассмотрим простой пример:

`<img src="..." style="width: 100%; max-width: 30px;" />`

Здесь логика компонентов работает так: 

- `width: 100%` задаёт ширину как 100%; 
- `max-width: 30px` ограничивает максимальную ширину тридцатью пикселями. 

Вот только в Thunderbird добавленный стиль `max-width: 100% !important` перекрывает ограничение `max-width: 30px`. В результате изображение попросту игнорирует заданный предел и растягивается на всю доступную ширину контейнера.

По итогу получается, что графика в рассылке может выглядеть так:

<Img
img="/api/uploads/002_imgerr_f5b8340d4e.png"
alt="Растянутые изображения в Thunderbird"
/>

Хотя по изначальной задумке изображения в письме должны были отображаться иначе:

<Img
img="/api/uploads/03_imgintnd_993bdda96b.png"
alt="Как изображения должны были выглядеть изначально"
/>

Как с этим бороться? На самом деле, довольно легко. Достаточно использовать атрибут `width` вместо `max-width` для описания точного размера:

`<img src="..." style="width: 30px;" />`

В этом случае внутренняя логика Thunderbird не будет вмешиваться в расчёт, а `shrinktofit` не повлияет на ширину изображения.

### Поведение в тёмной теме

Как и большинство других почтовых клиентов, Thunderbird поддерживает [**тёмную тему**](https://pixcraft.io/ru/blog/tyomnaya-tema-kak-ona-ustroena-i-kak-s-nej-rabotat). Однако здесь её обработка происходит по собственным правилам. 

По стандартной логике (во многих других почтовых клиентах), в тёмной теме:

- светлые фоновые цвета перекрашиваются в тёмные, сохраняя при этом свой тон; 
- изначально тёмные цвета остаются неизменными. 

<Img
img="/api/uploads/04_lghtdrkthm_b40c54b4fd.png"
alt="Отображение цветов в светлой и тёмной теме"
/>

Thunderbird действует иначе: здесь атрибут `bgcolor` в тёмной теме вырезается. Фоновый цвет, заданный через CSS-свойство `background-color`, останется без изменений, но только если он достаточно тёмный. В противном случае он также будет удалён:

<Img
img="/api/uploads/05_lghtdrkthndr_89eac7310f.png"
alt="Отображение цветов в десктопном Thunderbird"
/>

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

Вот как это выглядит на практике. Светлая кнопка, хорошо заметная в светлом режиме, в тёмной теме едва различима:

<Img
img="/api/uploads/06_bttndark_a0d0c07af6.png"
alt="Визуально малозаметная кнопка в десктопном Thunderbird"
/>

В то же время кнопка с более тёмным фоном сохраняет заметность:

<Img
img="/api/uploads/07_bttnvisible_942b732564.png"
alt="Кнопка в более тёмном тоне в десктопном Thunderbird"
/>

Решением в этой ситуации может стать использование более тёмных заливок для кнопок или использование обводки (`border`). В Thunderbird она не перекрашивается и не удаляется, за счёт чего способна акцентировать кнопку:

<Img
img="/api/uploads/08_buttonbrdr_a576045b10.png"
alt="Кнопка с обводкой в десктопном Thunderbird"
/>

### Рендеринг цветов в мобильном приложении

Начиная с 2024 года Thunderbird также стал доступен в виде приложения для Android. При этом в части отображения цветов поведение мобильного клиента отличается от десктопного в лучшую сторону.

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

<Img
img="/api/uploads/09_colrndr_33ffacada5.png"
alt="Отображение цветов в мобильном Thunderbird"
/>

### Загрузка изображений и обрезка писем

И в десктопной, и в мобильной версиях Thunderbird загрузка внешних изображений по умолчанию отключена. Их можно отобразить в конкретном письме или включить загрузку внешнего контента в «Настройках». 

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

В мобильном Thunderbird есть и ещё одна особенность — рассылка не всегда загружается целиком при открытии. Сначала видно только заголовок и часть тела письма, а остальной контент загружается после нажатия по кнопке «Загрузить полностью».

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

<Img
img="/api/uploads/10_loadmore_676fe9ffcf.jpg"
alt="Письмо без изображений с кнопкой «Загрузить полностью» в мобильном Thunderbird"
src="Скриншот письма Лемана ПРО используется исключительно для иллюстрации, в информационных и образовательных целях"
/>

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

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

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

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

Держать вёрстку шаблонов под контролем вам поможет наш конструктор писем Pixcraft, учитывающий тонкости различных email-клиентов. Убедитесь сами: [**зарегистрируйтесь сегодня**](https://app.pixcraft.io/user/register) и получите 14 дней бесплатно, чтобы опробовать его в деле.

Рассказываем о почтовом клиенте Mozilla Thunderbird: какие преимущества он предлагает для личного и корпоративного использования, а также на какие особенности клиента следует обратить внимание.

small_thundercov.png

thumbnail_thundercov.png

thundercov.png

Mozilla Thunderbird: почему он заслуживает внимания и как обрабатывает email-рассылки

Дисплеи с высокой плотностью пикселей, такие как 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 на Яндекс Метрику, в чём отличие подходов двух инструментов и что учитывать в процессе.