Как автоматизировать верстку email-писем с однотипными элементами: используем smart-объекты

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

В DashaMail есть инструмент для автоматизации таких рутинных задач. Это smart-объекты блочного редактора. Расскажем, как они работают.

Что такое smart-объекты

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

Smart-объект – это элемент письма, содержащий нужные вам блоки (картинка, текст, кнопка и т. п.), который может получать данные через переменные из внешних источников. То есть в случае smart-объектов нужно один раз настроить интеграцию с внешним сайтом, а затем в пару кликов можно будет вставлять объекты в письма – и они уже будут сверстаны.

Чтобы всё работало именно так, необходимо указать ссылку на нужную страницу на внешнем сайте – например, это может быть товар в интернет-магазине. Затем система автоматически подгрузит нужные данные и применит их в указанных местах письма.

Как это работает

Чтобы использовать smart-объект, следует создать его структуру с нужными блоками – например, одна картинка, два блока текста и кнопка. После этого необходимо настроить правила, в соответствии с которыми система будет подгружать данные в объект. Это реализовано с помощью переменных.

Правила настраиваются через общепринятый механизм поиска элементов в HTML, CSS-селекторы и атрибуты. То есть если нам нужно сделать так, чтобы smart-объект содержал ссылки на сайт по клику на кнопку «Купить» и картинку продукта, нужно прописать правило, устанавливающее значение переменной для всех значений «a» (поле CSS-селектор), в атрибут ‘href’ (поле Атрибут):

Важный момент: система умеет работать и с динамическими сайтами на базе JavaScript.

Еще один интересный момент: к smart-объектам можно применять roll-over эффект (при наведении курсора на картинку она будет меняться). Таким образом можно показать, например, какой-либо товар сразу с двух сторон, и всё это прямо в письме.

Smart-объекты поддерживают адаптивную верстку. Технология работает гибко: можно настраивать как параметры вроде шрифтов и выравнивания текста на различных устройствах, так и отображение/скрытие контента в разных средах. Например, некоторые элементы могут быть показаны только пользователям десктопа, а другие – тем, кто просматривает письмо со смартфона.

В чем польза smart-объектов

Самое очевидное применение технологии smart-объектов в email-рассылках – сфера электронной коммерции. У компаний здесь множество товаров, о которых можно рассказывать прямо в письмах.

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

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

К примеру, как показали наши тесты, полный цикл верстки рассылки, с ее тестированием и отправкой, при использовании шаблона с 12 товарными карточками не превышает 20 минут. Без smart-объектов верстка аналогичного письма вручную занимает минимум час.

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

Чтобы быть в курсе современных тенденций email-маркетинга в России, получать полезные лайфхаки и наши материалы – подписывайтесь на страницу DashaMail в Facebook и читайте наш блог.