Инлайнер — Красивые письма и Email-рассылки на 1С-Битрикс

• HTML-инлайнер
• Функция “Темы оформления для Email-маркетинга”
• Функция “Преобразование текстовых почтовых шаблонов”
• Функция “Перенос отписки от рассылки в тему оформления”
• Функция “Сохранение неразрывных пробелов”
• Функция “Наследование свойств из стилей”
• Функция “Распознавание ссылок”
• Функция “Прикладывание картинок”
• Коннектор для комментаторов блога
• Итого

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

HTML-инлайнер

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

Вот так выглядит процесс создания рассылки, если используется внешний инлайнер (по умолчанию):

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

Если до внесения изменений в стили вы уже успели “переодеть” в красивую верстку шаблоны служебных сообщений, то эту операцию также нужно будет повторить сначала. Трудоемкость описанных изменений - десятки часов.

Каково же решение? А решение простое - нужно отодвинуть процесс инлайна как можно ближе к моменту отправки письма.

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

Стоит установить флаг и инлайнер начнет работать. Об остальных настройках я расскажу ниже.

Мы не забыли и о верстальщике. Чтобы упростить ему жизнь - добавили специальную страницу: "Настройки" → "Настройки продукта" → "Почтовые события" → "Инлайнер". На ней можно преобразовать свою верстку в готовую к отправке, а также отправить себе на почтовый ящик для тестирования.

Наш инлайнер хорошо понимает как рассылки через модуль “Email-маркетинг”, так и шаблоны почтовых событий (восстановление пароля, оформлен заказ и другие). 

Вот такой вот волшебный инструмент, наличие которого сильно упрощает работу с красивыми письмами.

Функция “Темы оформления для Email-маркетинга”

Модуль “Email-маркетинг” от 1С-Битрикс несомненно хорош. Но ему есть куда расти. В частности он не поддерживает темы оформления. А это значит что шапки и подвалы вы должны включать в каждое письмо с заранее примененными стилями. Это печально и весьма трудоемко.

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

В самой рассылке достаточно написать только контентную часть.

Функция “Преобразование текстовых почтовых шаблонов”

По умолчанию, когда вы устанавливаете 1С-Битрикс, все шаблоны почтовых событий (восстановление пароля, оформлен заказ) создаются в виде текста.

Таких шаблонов может быть очень много. На нашем сайте их сейчас 170 штук. В редакции “Старт” ~10 стандартных шаблонов, в редакции “Бизнес” ~80.

Просто так они не встраиваются в HTML-письмо - сперва текст нужно преобразовать в html. И наш модуль делает это автоматически. В результате вам не нужно тратить десятки часов на ручную конвертацию всех шаблонов в HTML.

Функция “Перенос отписки от рассылки в тему оформления”

Отлично, у нас есть шапки и подвалы. Но теперь возникает две проблемы:

1. Отписку от рассылки хочется видеть в подвале

2. В случае системного сообщения (не рассылки) эта самая отписка от рассылки должна заменяться на что-то другое

Эти кейсы мы автоматизировали.

Когда тема оформления используется вместе с рассылкой - мы заменяем постановку #UNSUBSCRIBE_LINK# в теме оформления (например, в подвале) на ту же ссылку которая подставилась бы в теле письма.

Когда тема оформления используется вместе с системным сообщением - мы заменяем эту подстановку на путь к странице, которая указана в настройках нашего модуля. Это решение по логике требует небольшого изменения в вашем шаблоне: текст “Отписаться от рассылки” нужно заменить на “Изменить параметры подписки”.

Функция “Сохранение неразрывных пробелов”

Представьте что у вас в письме есть кнопка и на ней написано “Зарегистрироваться на семинар”. Угадайте что с ней произойдет при открытии на узком экране iPhone или в Outlook? - Правильно, она расползется на несколько строк и станет выглядеть ужасно.

Проблема решается если в верстке обернуть тест на кнопке в тег <nobr>, но к сожалению Outlook его проигнорирует.

Вот так должно быть:

А вот так будет если не принять мер:

Значит нужно добавлять неразрывные пробелы, но при редактировании текста кнопки они наверняка сотрутся.

Мы решили эту проблему следующим образом: если в CSS для какого-то узла указан стиль “white-space: nowrap”, мы автоматически заворачиваем содержимого такого узла в <nobr> и все пробелы внутри заменяем на неразрывные непосредственно при отправке письма.

Функция “Наследование свойств из стилей”

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

Поэтому мы сделали ряд автоматических подстановок атрибутов на основе CSS.

Эти CSS-правила автоматически продублируются в HTML-атрибуты при отправке.

Функция “Распознавание ссылок”

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

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

Мало того что “Mail.ru” и “target.my.com” не были ссылками в отправляемой рассылки (это был просто текст), так они еще и стали “синими ссылками”.

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

В нашем модуле эта возможность реализована 2 настройками: для обычных ссылок и для email-ов.

Функция “Прикладывание картинок”

Если ваши письма выглядят подозрительно а картинки загружаются с сайта, то существует большая вероятность что почтовик отобразит письмо без картинок но со ссылкой “Загрузить изображения”. Чтобы такого не случалось мы добавили настройку “Прикладывать изображения из письма как вложения”. Стоит ее отметить - ваши картинки будут отправлены вместе с письмом и загружать их с сайта не потребуется.

Коннектор для комментаторов блога

Вместе с выпуском модуля Email-маркетинг появилась возможность создавать свои “источники” предоставляющие подписчиков. По умолчанию Битрикс предоставляет несколько: Веб-формы, Пользователи, Подписчики (из старого модуля рассылок).

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

P.S. Если будет спрос - сделаем такой же коннектор для комментариев форума.

Итого

В результате имеем волшебный модуль, который можно установить на любой сайт с 1С-Битрикс. Единтсвенное ограничение - у вас должны быть установлены стабильные обновления (как минимум главный модуль версии 15.0.7, а лучше 15.5).

Модуль может быть установлен на ваш сайт из Marketplace.

На создание модуля было потрачено немало ресурсов и поэтому он платный (3 000р.), зато имеет демо-период 30 дней.

Для сертифицированных и золотых партнеров 1С-Битрикс мы с радостью предоставим по 1 коммерческому купону бесплатно (нужно оставить заявку в форме ниже).

• E-mail маркетинг для сайтов на 1С-Битрикс
• Красивые письма и Email-рассылки на 1С-Битрикс
• Рассылки при помощи сайта
• Кейс e-mail рассылки на 1С Битрикс
• Рассылки с сервисом MailChimp