Автоматизируйте создание писем двумя способами: сниппеты против частичных шаблонов

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

Так быть не должно.

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

Например, почти 18% email-маркетологов говорят, что при создании нового письма они повторно используют один и тот же заголовок и подвал, а также в основном собирают письма, используя фрагменты кода из предыдущих писем, согласно отчету Litmus 2018 State of Email Workflows. Еще 23% говорят, что создают письма, используя библиотеку стандартных компонентов или модулей электронных писем.

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

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

## Что такое сниппеты?

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

Возьмем в пример «bulletproof» кнопку:

Вот фрагмент HTML, который мы используем для «bulletproof» кнопки:

«`html

Я кнопка →

«`

«Bulletproof» кнопки являются основой наших дизайнов писем для призывов к действию (CTA). Однако каждая кнопка требует индивидуальной настройки для каждого отдельного письма: разный текст, другая ссылка и другое расположение. Сниппеты решают проблему постоянного ручного воссоздания кода «bulletproof» кнопки, сохраняя его в нашей библиотеке сниппетов с помощью триггер-сокращения. В этом примере мы назовем его ‘bb’, сокращение от ‘bulletproof button’.

Затем, всякий раз, когда вы хотите добавить «bulletproof» кнопку, вы можете использовать триггер-сокращение ‘bb’.

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

`

{text}

`

В приведенном выше примере, после вызова сниппета, редактор автоматически перейдет к первой точке редактирования {fs}. Таким образом, вы можете отредактировать этот контент и перейти к следующей точке редактирования (в этом примере {lh}), нажимая Tab, вместо того чтобы прокручивать, чтобы найти каждое место, которое вам нужно настроить. (Просто помните, что каждый редактор обрабатывает синтаксис точек редактирования по-разному.)

Вы можете использовать сниппеты в:

* Litmus Builder

* Sublime Text

* Atom

* Dreamweaver

* Coda

Чтобы узнать больше об использовании сокращений кода и сниппетов, посмотрите этот доклад с The Email Design Conference 2015:

[ссылка на видео]

Или углубитесь в то, как использовать сниппеты, в этом посте.

[ссылка на пост]

## Что такое частичные шаблоны?

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

Частичные шаблоны хорошо подходят для таких элементов, как заголовки, подвалы, CSS для сброса настроек и часто используемые CTA — все, что вам нужно повторно использовать в нескольких письмах, но при этом контент для этих отдельных компонентов не меняется.

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

Возьмем, к примеру, заголовок письма. Мы используем один и тот же заголовок во всех наших письмах в Litmus:

[изображение заголовка]

Мы можем взять код этого заголовка:

«`html

«`

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

«`html

{{header}}

«`

**Примечание: приведенная выше ссылка использует синтаксис Handlebars, который применяется в Litmus Builder.*

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

Чтобы использовать частичные шаблоны, вам необходимо использовать систему сборки и генератор статических сайтов, такой как Handlebars, Middleman или Assemble. Без одного из этих инструментов вы не сможете использовать частичные шаблоны или их функциональность. Эти генераторы поддерживают функциональность частичных шаблонов, автоматически компилируя ссылки на синтаксис частичных шаблонов в итоговый HTML-файл, пригодный для использования в электронной почте. Мы настоятельно рекомендуем использовать Litmus Builder (настройка не требуется) или Grunt Email Workflow от Lee Munroe (рабочий процесс запуска задач на основе Grunt) для использования частичных шаблонов.

## Итак, снова, в чем разница?

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

Что происходит, когда мы меняем местами наши примеры выше?

### Давайте сделаем заголовок сниппетом.

Мы, конечно, могли бы сделать это, но это потребовало бы от нас ручного вывода сниппета заголовка в каждой отдельной сборке письма. Кроме того, сниппеты не динамичны, как частичные шаблоны, что означает отсутствие связи между ними. Внесение изменений в сниппет не обновляет никаких ваших предыдущих сниппетов, только будущие. Это означает, что после создания сниппета вам придется использовать HTML или CSS для внесения ручных правок в каждое отдельное письмо, чтобы настроить его. Не так уж и идеально для заголовка, который должен быть одинаковым во всех письмах!

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

### Давайте сделаем «bulletproof» кнопку частичным шаблоном.

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

Узнайте больше о том, как использовать частичные шаблоны в вашем рабочем процессе создания писем, в этом посте.

[ссылка на пост]

## Автоматизируйте свои письма с помощью сниппетов и частичных шаблонов

Оба инструмента пригодятся, когда настанет время создавать вашу следующую email-кампанию. У вас еще нет Litmus Builder? Не беспокойтесь. Попробуйте сегодня — бесплатно:

[ссылка на бесплатную версию]