Нас очень часто спрашивают о возможностях редактирования html-писем. Как правило, проблем с этим не возникает, так как сервисы рассылок оснащены различными редакторами писем.
Но что делать, если вам нужно отправлять письма всего нескольким адресатам и каждое из них должно быть индивидуальным? Платить деньги только за возможность воспользоваться редактором сервиса?
Необязательно. Сегодня мы расскажем вам как заменить контент письма в исходном коде на примере текстового редактора Sublime Text.
Знакомство с редактором
При этом, для того что бы увидеть само письмо и отслеживать изменения в нем, необходимо просто открыть html-файл письма в окне браузера. После сохранения изменений (Ctrl+S) в тексте кода, достаточно просто обновить страницу, и вы увидите внесенные изменения.
Как вы видите, Sublime цветами выделяет различные форматы данных, в нашей версии: розовый - теги html, зеленый - параметры, желтый, фиолетовый и синий - значение различных параметров и белый - текст.
Замена текста письма
Благодаря озвученным выше особенностям редактора, с заменой текста письма может справиться и ребенок. Все что от вас требуется просто заменить сам текст, выделенный Sublime белым цветом.
Стоит отметить что Sublime, равно как и Блокнот, автоматически обнуляет форматирования текста. Так что, вы смело можете копировать любой текст и вставлять в нужное место, отображаться в письме он будет по заданным в коде параметрам.
И еще один маленький совет, для того что бы найти нужный текст во всем массиве кода, нажмите Ctrl+F - после этого, внизу редактора появится поле поиска текста.
При необходимости можно поменять стиль шрифта.
Советуем пользоваться одним из следующих шрифтов - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman.Это стандартные шрифты, которые распознают любые системы. В противном случае ваш текст на другом компьютере может превратится в абракадабру.
Размер - подставить нужное значение в параметре “font-size: 14px;” . Давайте увеличим размер шрифта с 14 пикселей до 16.
Цвет - значение цвета задается в HEX параметром “color: #323232;” .
Подобрать значение цвета вы можете водном из онлайн-сервисов, например здесь - get-color.ru .
Мы сделаем текст серым - #4F4F4F .
Межстрочный интервал - по аналогии с размером шрифта, задается параметром “line-height: 18px;”
Формат шрифта - задается тегами текст - жирный, текст - курсив и текст - подчеркивание.
Стоит отметить, Sublime при открытии тега, автоматически добавляет команду закрытия тега. Будьте внимательны.
Выделим наш текст курсивом.
Перенос строки
- задается тегом
. Просто вставьте этот тег перед нужным участком текста.
Заменяем текст, сохраняем, обновляем и все готово.
Вставка ссылки в текст
target=”_blank” - эта команда для открытия ссылки в новой вкладке. Если вы хотите, что бы ссылка открывалась в текущей вкладке, просто не пишите ее.
text-decoration: underline; - команда браузеру подчеркнуть ссылку. Если подчеркивание не требуется - нужно прописать text-decoration: none;
В любом случае, обязательно пропишите эту команду, иначе каждый браузер будет по-своему решать подчеркивать или нет.
Это тоже обязательная команда, иначе браузеры будут отображать цвет по своему усмотрению.
Внимание! Некоторые почтовые клиенты умнее, чем кажутся и если они видят в тексте ссылку, например, “Вы можете перейти на сайт сайт для дальнейшего изучения…”, то они могут выделить ее самостоятельно и по-своему.
Вставка/замена ссылки в картинку
Картинки в письме хранятся не как вложения, а находятся на серверах. Соответственно в коде, картинка это ссылка на нее, и команда для ее добавления аналогична рассмотренной выше.
www.example.com
” target=”_blank” style=”text-decoration: underline; ”>
color:#234322; - команда установки цвета не актуальна для картинки.
border=”0” - команда обрамление картинки. Значение 0 убирает белую рамку вокруг картинки, значения больше задуют ее соответствующей толщины в пикселях.
Обязательно прописывайте эту команду. Например Outlook автоматически присваивает рамку картинке, если не прописать данную команду.
Найти участок кода с картинкой будет проще в браузере. Для этого кликните правой кнопкой мыши на необходимой картинке и выберете “Посмотреть код” (это названия данной опции в Google Chrome, название и путь к ней в других браузерах может отличаться). Браузер автоматически выделит для вас нужную часть, скопируйте код и вставьте в поиск Sublime.
При замене картинки будьте внимательны - если ее размер новой картинки отличается от размеров прежней, нужно поменять все параметры width и height на актуальные.
Послесловие
Мы рассказали вам о наиболее “безболезненных” возможностях редактирования кода письма. Если вам необходимо внести более значительные изменения, настоятельно рекомендуем доверить такую задачу специалисту по верстке, или как минимум создать копию кода до редактирования.
По ходу изучения теоретического материала по языку HTML у некоторых пользователей возникает вопрос: как вставить html файл в web-обозреватель ? Как, уже написанный html-код, просмотреть в браузере . Увидеть , так сказать, результат проделанной работы.
Как мы уже договорились пишем наш html-код в программе "Блокнот" (но никто не запрещает пользоваться и другими редакторами, "Notepad++" например, который даже более удобен).
И так, открываем программу "Блокнот" и пишем в нем какой нибудь html-код. Возьмем html-код из прошлого урока.
"Description" content="Описание страницы ">
Правда такой html-код нам ничего в браузере не выдаст. Необходимо между тегами и еще что нибудь прописать, например заголовок и пару абзацев:
Все работает
Добавляем эти три строчки в наш html-код и получаем код такого вида:
"Description" content="Описание страницы ">
Проверяем результат написания html-кода
Все работает
Сохраняем наш файл: жмем файл → сохранить как
В открывшемся окне выбираем папку в которую мы сохраним файл, прописываем имя файла (например dokument ), меняем расширение файла.txt на.html, и тип файла ставим "Все файлы".
Чтобы открыть наш файл в браузере наводим указатель мыши на файл, кликаем правой кнопкой мыши, в открывшемся окне выбираем "Открыть с помощью" и выбираем браузер которым пользуемся.
Следующий урок - .
Всем привет!
Рустем у нас уехал в Сочи, наслаждаться теплым морским климатом. А продолжать рассказ о Email-маркетинге поручил нам с Алиной. Ну что же, на этой неделе – мой пост. Расскажу про OpenRate.
Показатель открываемости писем (Open Rate по-английски) – один из самых важных. Отправили вы 10 000 писем, и только 10 человек прочитали. OpenRate составил 0,1%. Печаль! А вот если 2 000 человек, то уже неплохо – 20%. Но возникает вопрос, как узнать, сколько человек прочитали письмо? Такие сервисы, как Unisender, Mailchimp и др. дают эту информацию в интерфейсе. Давайте попробуем разобраться, как они получают эти данные. Благо, способов немного – всего два.
Вариант 1. Однопиксельная картинка.
Метод чрезвычайно прост! Сервис вставляет в письмо прозрачную картинку размером 1×1 пиксель. Когда пользователь открывает письмо, происходит загрузка картинки в браузере. При этом, картинка как будто бы находится на серверах «рассыльщика». Когда приходит запрос картинки (обращение на сервер), то сервис может отследить, какая картинка запрашивалась. И сделать вывод – какое письмо, из какой рассылки было открыто.
Кстати, так можно отслеживать и открытие единичных писем, вставляя в код вместо адреса картинки код GoogleAnalytics. И тогда количество открытий будет показано в его статистике.
Минусы такого отслеживания: работает не во всех интерфейсах почтовиков (и почтовых программах), а также метод применим только если ваше письмо в формате HTML. Ведь это определенный html-код. В обычном текстовом письме метод не сработает.
Вариант 2. Переходы по ссылкам.
Второе решение – также на поверхности. Разметили ссылки в письме, добавили к адресу каждой ссылки специальный код. Если кто-то перешел по ним на наш сайт, то стало быть и письмо он открыл. По коду можно идентифицировать – из какой рассылки пришел пользователь. Данный метод дополняет первый вариант: если не сработал он, то статистику уточнят переходы по ссылкам.
К слову, была однажды задумка отслеживать открываемость писем не для рассылки, а для отправляемых продавцами с коммерческими предложениями. Был обнаружен ряд зарубежных сервисов, которые в конечном счете работают примерно по тем же принципам.
Вот, в принципе, и всё. Плодотворной рабочей недели!
Прочитайте две предыдущие части, освойте третью, и Вы будете вооружены всеми техническими знаниями для полноценной работы в новом редакторе!
Как вытащить код письма из нового редактора?
Итак, я работал в новой версии конструктора. В целом он мне понравился. Однако минус в том, что он не позволяет конвертировать созданное письмо вместе с текстом и картинками в HTML-код. Это печально. Но выход есть. Нужно самостоятельно вытащить код. Как это сделать?
Сейчас расскажу. В общем, у Вас есть письмо. Или шаблон письма. Если нет, то вернитесь к прочтению этой части после того, как создадите шаблон (либо уже готовое письмо на его основе).
С самого начала
Итак, пройдём всю процедуру полностью. С самого начала. Всё делаем за четыре шага.
Шаг второй. Выбираем сохраненный шаблон.
Шаг третий. Нажимаем на кнопку «Предпросмотр». Далее я буду описывать порядок действий в браузере Google Chrome . По клику на кнопку «Предпросмотр» открывается письмо в том виде, в каком его увидит подписчик.
Шаг четвёртый. Правой клавиши мыши вызываем меню, где выбираем опцию «Просмотреть код». В браузере Chrome после этого снизу открывается дополнительное окошко («окно в окне») с HTML-кодом письма.
Чтобы Вам было понятнее, ниже представлены скрины всех шагов.
Как получить HTML-код письма
Если навести курсор мыши на любую строку кода, то в окне предпросмотра письма (оно же у нас открыто, никуда не делось) будет помечено поле, которые описывает эта строка.
Двигаясь вверх, мы доходим до самого начала нашего письма. Это может быть самый первый текст, например, «Здравствуйте, уважаемый подписчик», либо же картинка – логотип Вашего сайта.
У меня письмо начинается именно с логотипа. Вот мы и будем искать код, с которого начинается описание всех элементов письма: текста и картинок.
Окно с кодом может располагаться горизонтально (в нижней части окна браузера), вертикально (в правой части окна браузера), а также в виде отдельного самостоятельного окна. Но нам отдельное самостоятельное окно не нужно, ведь мы будем бродить по коду и смотреть, какой элемент письма он отображает. Мне удобнее, чтобы дополнительное окно располагалось в нижней части окна браузера.
Как настроить дополнительное окно
Выбрать расположение дополнительного окна просто.
- В верхнем меню дополнительного окна, в правой части, рядом с крестиком, есть элемент, обозначенный тремя вертикальными точками. Называется он Customize and control DevTools (название отображается при наведении курсора мыши). Открываем его.
- Выбираем режим Dock to bottom.
Всё. Теперь наше дополнительное окно располагается внизу. При этом в левой части верхнего меню должен быть выбран режим Elements.
Копируем код письма из браузера
Теперь двигаемся по коду сверху вниз. Как только мы нашли код, которым одновременно охватываются все элементы на странице нашего письма, вызываем правой клавишей мышки меню и выбираем Edit as HTML.
Открывается блок: прямоугольник, внутри которого много-много кода. Копируем весь код внутри этого прямоугольника (сначала нажимаем сочетание клавиш Ctrl + A, затем Ctrl + C).
Всё, мы скопировали HTML-код в буфер обмена, то есть во временную память нашего компьютера. Теперь можно этот код сохранить в виде шаблона на SmartResponder.
Открывается чистое поле нового шаблона, в меню которого обязательно нужно нажать кнопку «Источник» (вот буквально сегодня увидел, что теперь эта кнопку переименована в «HTML-код»).
Затем вставляем наш HTML-код сочетанием клавиш Ctrl + V . Потом указываем тему письма (это обязательное поле) и нажимаем клавишу «Сохранить». Готово!
Правильно сохраняем код письма
Так, с этим разобрались. Теперь можно дополнительно сохранить код в виде HTML-файла на своём компьютере. Для этого достаточно открыть «Блокнот» и сохранить код в нём. После этого поменяйте расширение *.txt на *.html и откройте файл. В окне браузера Вы увидите копию Вашего письма.
Строго говоря, для сохранения программных кодов лучше скачать редактор NotePad++ . Я всегда пользуюсь именно им, потому что Notepad – это:
а) наглядное отображение структуры кода;
б) подсветка синтаксиса (то есть связей между элементами кода: где что открывается и закрывается и что между этими «где что» пишется).
Правда, в сл
учае с обработкой кода письма, созданного именно в сервисе рассылок SmartResponder, мне не помог даже NotePad++ получить красивую разметку кода. Здесь выручил Adobe Dreamweaver CC
.
Только благодаря ему удалось структурировать код при помощи команды «Форматировать исходный код».
Теперь можно переносить код в NotePad++ и сохранять. Хотя, нет. Перед сохранением нужно нажать «Преобразовать в ANSI», чтобы не было каракуль вместо текста при просмотре.
Можно ещё выбрать «Вид» — «Перенос строк». Тогда весь код будет располагаться по ширине страницы, а не в строку.
После этого все должно открыться и отобразиться так, как в шаблоне письма на сервисе SmartResponder.
Подстраховка: сохраняем код в SmartResponder
Раз уж мы «выудили» код из нашего письма, созданного в новом редакторе, раз уж он у нас есть, то можно его сохранить в сервисе SmartResponder для подстраховки. Зачем? Чтобы на его основе создавать новые письма, изменять их, и, что самое важное, использовать на других ресурсах (напомню, что в новом редакторе таких возможностей просто нет).
Для этого код, скопированный из браузера Google Chrome, надо вставить в старый конструктор SmartResponder.
Делается это несложно.
- Выбираем во вкладке «Рассылки» раздел «Список шаблонов писем».
- Нажимаем на кнопку «Создать шаблон».
- Выбираем тип «Красочное HTML-письмо (старый редактор)» и жмём «Дальше».
- В открывшемся редакторе в меню инструментов для создания письма нажимаем на кнопку «HTML-код».
- Вставляем наш код (жмём Ctrl + V). Можем ещё раз нажать на кнопку «HTML-код», то есть выключить режим отображения кода и включить режим просмотра внешнего вида письма.
- Обязательно заполняем поле «Тема письма» (по-русски: даём название нашему шаблону).
- Нажимам кнопку «Сохранить».
Вот, собственно, всё, что я хотел рассказать Вам о новом редакторе SmartResponder после того, как создал в нём своё первое письмо.
Хочу сказать, что я ранее вообще не был знаком с сервисом SmartResponder. То есть навыков работы ни в старом, ни в новом редакторе я прежде не имел. Но вот зарегистрировался и разобрался. Что ж, теперь и Вы знаете, как работать в новом конструкторе SmartResponder.
А какие сервисы для создания и отправки писем используете Вы в своей работе?
