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

Как вытащить код письма из нового редактора?

Итак, я работал в новой версии конструктора. В целом он мне понравился. Однако минус в том, что он не позволяет конвертировать созданное письмо вместе с текстом и картинками в HTML-код. Это печально. Но выход есть. Нужно самостоятельно вытащить код. Как это сделать?

Сейчас расскажу. В общем, у Вас есть письмо. Или шаблон письма. Если нет, то вернитесь к прочтению этой части после того, как создадите шаблон (либо уже готовое письмо на его основе).

С самого начала

Итак, пройдём всю процедуру полностью. С самого начала. Всё делаем за четыре шага.

Шаг второй. Выбираем сохраненный шаблон.

Шаг третий. Нажимаем на кнопку «Предпросмотр». Далее я буду описывать порядок действий в браузере Google Chrome . По клику на кнопку «Предпросмотр» открывается письмо в том виде, в каком его увидит подписчик.

Шаг четвёртый. Правой клавиши мыши вызываем меню, где выбираем опцию «Просмотреть код». В браузере Chrome после этого снизу открывается дополнительное окошко («окно в окне») с HTML-кодом письма.

Чтобы Вам было понятнее, ниже представлены скрины всех шагов.

Как получить HTML-код письма

Если навести курсор мыши на любую строку кода, то в окне предпросмотра письма (оно же у нас открыто, никуда не делось) будет помечено поле, которые описывает эта строка.

Двигаясь вверх, мы доходим до самого начала нашего письма. Это может быть самый первый текст, например, «Здравствуйте, уважаемый подписчик», либо же картинка – логотип Вашего сайта.

У меня письмо начинается именно с логотипа. Вот мы и будем искать код, с которого начинается описание всех элементов письма: текста и картинок.

Окно с кодом может располагаться горизонтально (в нижней части окна браузера), вертикально (в правой части окна браузера), а также в виде отдельного самостоятельного окна. Но нам отдельное самостоятельное окно не нужно, ведь мы будем бродить по коду и смотреть, какой элемент письма он отображает. Мне удобнее, чтобы дополнительное окно располагалось в нижней части окна браузера.

Как настроить дополнительное окно

Выбрать расположение дополнительного окна просто.

1. В верхнем меню дополнительного окна, в правой части, рядом с крестиком, есть элемент, обозначенный тремя вертикальными точками. Называется он Customize and control DevTools (название отображается при наведении курсора мыши). Открываем его.
2. Выбираем режим 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.

Делается это несложно.

1. Выбираем во вкладке «Рассылки» раздел «Список шаблонов писем».
2. Нажимаем на кнопку «Создать шаблон».
3. Выбираем тип «Красочное HTML-письмо (старый редактор)» и жмём «Дальше».
4. В открывшемся редакторе в меню инструментов для создания письма нажимаем на кнопку «HTML-код».
5. Вставляем наш код (жмём Ctrl + V). Можем ещё раз нажать на кнопку «HTML-код», то есть выключить режим отображения кода и включить режим просмотра внешнего вида письма.
6. Обязательно заполняем поле «Тема письма» (по-русски: даём название нашему шаблону).
7. Нажимам кнопку «Сохранить».

Вот, собственно, всё, что я хотел рассказать Вам о новом редакторе SmartResponder после того, как создал в нём своё первое письмо.

Хочу сказать, что я ранее вообще не был знаком с сервисом SmartResponder. То есть навыков работы ни в старом, ни в новом редакторе я прежде не имел. Но вот зарегистрировался и разобрался. Что ж, теперь и Вы знаете, как работать в новом конструкторе SmartResponder.

А какие сервисы для создания и отправки писем используете Вы в своей работе?

Всем привет!

Рустем у нас уехал в Сочи, наслаждаться теплым морским климатом. А продолжать рассказ о Email-маркетинге поручил нам с Алиной. Ну что же, на этой неделе – мой пост. Расскажу про OpenRate.

Показатель открываемости писем (Open Rate по-английски) – один из самых важных. Отправили вы 10 000 писем, и только 10 человек прочитали. OpenRate составил 0,1%. Печаль! А вот если 2 000 человек, то уже неплохо – 20%. Но возникает вопрос, как узнать, сколько человек прочитали письмо? Такие сервисы, как Unisender, Mailchimp и др. дают эту информацию в интерфейсе. Давайте попробуем разобраться, как они получают эти данные. Благо, способов немного – всего два.

Вариант 1. Однопиксельная картинка.

Метод чрезвычайно прост! Сервис вставляет в письмо прозрачную картинку размером 1×1 пиксель. Когда пользователь открывает письмо, происходит загрузка картинки в браузере. При этом, картинка как будто бы находится на серверах «рассыльщика». Когда приходит запрос картинки (обращение на сервер), то сервис может отследить, какая картинка запрашивалась. И сделать вывод – какое письмо, из какой рассылки было открыто.

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

Минусы такого отслеживания: работает не во всех интерфейсах почтовиков (и почтовых программах), а также метод применим только если ваше письмо в формате HTML. Ведь это определенный html-код. В обычном текстовом письме метод не сработает.

Вариант 2. Переходы по ссылкам.

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

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

Вот, в принципе, и всё. Плодотворной рабочей недели!

По ходу изучения теоретического материала по языку HTML у некоторых пользователей возникает вопрос: как вставить html файл в web-обозреватель ? Как, уже написанный html-код, просмотреть в браузере . Увидеть , так сказать, результат проделанной работы.

Как мы уже договорились пишем наш html-код в программе "Блокнот" (но никто не запрещает пользоваться и другими редакторами, "Notepad++" например, который даже более удобен).

И так, открываем программу "Блокнот" и пишем в нем какой нибудь html-код. Возьмем html-код из прошлого урока.

"Description" content="Описание страницы ">

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

Все работает

Добавляем эти три строчки в наш html-код и получаем код такого вида:

"Description" content="Описание страницы ">

Проверяем результат написания html-кода

Все работает

Сохраняем наш файл: жмем файл → сохранить как

В открывшемся окне выбираем папку в которую мы сохраним файл, прописываем имя файла (например dokument ), меняем расширение файла.txt на.html, и тип файла ставим "Все файлы".

Чтобы открыть наш файл в браузере наводим указатель мыши на файл, кликаем правой кнопкой мыши, в открывшемся окне выбираем "Открыть с помощью" и выбираем браузер которым пользуемся.

Следующий урок - .