Содержание:
- Пункт “Добавьте письма” 0:06;
- Скачивание шаблона 1:47;
- Вид шаблона 2:46;
- Ссылки, ведущие на сайт 4:38;
- Загрузка писем 11:13;
- Проверка на соответствие 15:29;
- Спам 18:39;
Видеоинтрукция "Настройка триггера брошенной корзины. Шаг 4. Добавление писем для триггеров"
Переходим к четвертому шагу интеграции сервиса — это загрузка писем.
Заходим в пункт “Добавьте письма”, видим здесь всего две функции.
С помощью этих двух функций вы можете скачать шаблон, т.е. скачать конкретный пример шаблона, который мы для вас подготовили и который вы можете изменить, добавив в него свой логотип, свои контактные данные, ссылки на свой сайт и т.д., и загрузить его. Либо, если они у вас есть, свои шаблоны писем, сверстанные по правилам писем в табличной форме, оформленные под ваш корпоративный стиль, то вы можете загрузить с помощью этой кнопки и назвать каждый из шаблонов, которые вы загрузили, каждое из писем, которые вы загрузите,с таким названием, чтобы потом не заблудиться среди этих писем, чтобы была какая-то логика.
Например, если вы грузите письма для брошенной корзины, вы можете назвать как вот тут в примере “Корзина. Письмо 1; Корзина. Письмо 2”. Эти названия пользователи не видят, это конкретно технические названия, с помощью которых вы ориентируетесь в системе. А вот “Тема письма” — это как раз та тема, которую увидят ваши пользователи. И здесь вы также вольны назвать свое письмо как хотите, но, если вы делаете кампанию о брошенной корзине, вы, соответственно, выбираете какое-то логическое название для темы письма. Для того, чтобы пользователь понимал, о чем вообще речь. И дальше можете выбрать файл шаблона письма с вашего компьютера, нажав на кнопку “Выбрать файл”.
Давайте сделаем по порядку с помощью подготовленного нами шаблона: шаблон имеет смысл скачивать наш, если у вас нет подготовленного вами шаблона с корпоративным стилем и если у вас нет такой возможности где-то заказать, вы хотите по-быстрому сделать или вы считаете, что необязательно оформлять шаблон под ваш стиль и вы готовы воспользоваться нашим шаблоном.
- Нажимаем “Скачать шаблон”;
- Загружаем на ваш компьютер, смотрим в папке (у нас скачался архив tmpl001.zip);
- Распаковываем этот архив, у нас появляется папка с нашим шаблоном;
- Смотрим как он в принципе выглядит. Видим, что в нашем шаблоне есть место под логотип;
- Первая позиция “Поместите ваш текст заголовка здесь” — (2:59) превращаются в вот этот кусочек текста, т.е. предпросмотр;
- Следующая позиция — это логотип. С логотипа вы можете адресовывать на Главную вашего сайта пользователя и, соответственно, загрузить свой логотип;
- Также, в заготовке есть пункты меню, если вы хотите дать возможность вашему потенциальному или существующему клиенту перейти на разные категории/каталоги вашего сайта.
- Баннер с вашим каким-то предложением, соответственно, подготовленный текст для брошенных корзин;
- Дальше условное обозначение, которое включает товарную сетку из вашего фида;
- Кнопка-ссылка на вашу корзину. Вы также можете заменить эту кнопку, как и все остальные элементы декора или изображения на элементы с вашими корпоративными цветами либо с вашим корпоративным названием.
- Дальше ссылки на социальные сети вашей компании, ну и, соответственно, подвал с вашими контактными данными
Здесь вы можете просто изменить номер на ваш, либо добавить кнопку с контактами и так далее.
То есть вы вольны изменять этот шаблон как хотите либо, соответственно, если у вас нет такой возможности, просто найти в коде этого письма соответствующие ссылки и добавить ссылки названий пунктов меню, которые будут вести на ваш сайт.
Покажу вкратце как это сделать: значит мы переходим в папку с шаблоном и открываем его с помощью блокнота. Вот так этот шаблон выглядит внутри, то есть, много-много строчек кода.
Если у вас нет соответствующего навыка, вы все равно можете изменить этот шаблон аккуратно, и он будет работать. Вы сможете не привлекать разработчика, не тратить дополнительных ресурсов на это.
Значит, здесь все очень просто. Вы можете кликнуть по каждому элементу в самом браузере нашего письма и узнать, как этот элемент называется, т.е., сейчас понятно, это письмо, которое мы видим в браузере, оно открывается просто при клике левой кнопки мыши по нему два раза. Вот, открылось письмо. И при этом, когда мы правой кнопкой нажали на этот же файл, мы можем открыть его с помощью Блокнота либо Notepad и т.д. И тогда наше письмо откроется в редакторе.
Мы переходим в браузер, находим в браузере элемент, которые мы должны изменить. Например, выделяем вот этот текст (Поместите ваш текст заголовка здесь), переключаемся на Блокнот, нажимаем Ctrl + F, ну либо правой кнопкой и “Найти и по тексту”.
Добавляем наш текст, который необходимо найти и нажимаем “Найти далее”. Вот он этот текст.
Вы можете дальше выключить поиск и дальше заменить конкретно этот текст в письме, т.е. пишем, например, какую-нибудь завлекающую историю - “Перейдите на сайт, кликнув по товару”.
Следующий пункт вы можете изменить, например, логотип, либо пункт меню. Чтобы найти логотип, вы можете кликнуть по логотипу и посмотреть, к примеру, как он называется, ну либо какие-то его атрибуты. Вот мы видим, что логотип — это именно что вот такая ссылка.
Нажимаем по трем точкам, просим показать нам “Edit as HTML” и прямо можем скопировать ссылку на эту картинку и найти эту картинку также с помощью поиска на сайте.
Дальше мы можем просто изменить эту ссылку на свой логотип. Давайте посмотрим, как это делается. К примеру, заходим на наш сайт email2business.ru, зайдем в admin-ку, в медиафайлы, найдем, а вот кстати и логотип сразу же скопируем ссылку на этот него, переходим в наш текстовый редактор, выделяем эту ссылку на логотип и вставляем ссылку на наш логотип. Аккуратно, не трогаем никаких других слов, никаких кавычек, все оставляем как есть, меняем только ссылку.
И теперь нам нужно чтобы этот логотип отправлял нас (клик по этому логотипу из письма) на сайт. В этой же строке мы видим ссылку, которая завернута вот в такое выражение <a href, ну и, соответственно, она должна вести на наш сайт. То есть мы берем, выделяем название нашего сайта (Главную) и добавляем в эту строку. После этого мы сохраняем.
Также мы поступаем абсолютно с каждым элементом, который вы хотите заменить, т.е. будь то баннер, будь то пункт меню, вы можете посмотреть код, найти как называется этот элемент, найти его у себя в Блокноте и заменить его на то, что вы хотите.
Важно обратить внимание, что изображение не должно находиться где-то в Интернете, т.е. оно либо загружено в медиатеку вашего сайта, либо вы его берете в каком-то публичном доступе, либо вы можете сделать ссылку, опять же, на открытый доступ, на свой Google Disk, либо Yandex Disk, ну либо другие какие-то хранилища и добавляете конечную ссылку на элемент в ваш Блокнот. После этого ваше письмо будет готово. Смотрите, мы сохранили этот файл, сейчас обновим и видим, что добавился логотип. Понятное дело, что вот здесь сейчас логотип добавлен немного большего размера, чем стоял, соответственно, у нас изменилась верстка так, что появился разрыв между меню и баннером. В этом случае вам нужно добавить логотип либо любое другое изображение того размера, который соответствует нашей болванке. Болванка на то она и болванка, чтобы быть универсальной.
Если вас устраивает внешний вид, вы загружаете это письмо уже дальше в сервис. Ну и, допустим, мы сейчас сделали несколько писем и загружаем несколько писем. Обозначаем их как нам интересно, в данном случае мы делаем письма для брошенной корзины, обозначаем “Корзина. Письмо 1”. Для наших клиентов мы делаем заголовок “Вы забыли товар в корзине”, выбираем файл - наш измененный шаблон, нажимаем “Сохранить”.
Если у нас несколько писем, мы делаем это еще раз и еще раз, ровно столько, сколько нам нужно. То есть можем выбрать другой какой-то шаблон, “Сохранить”. В вашем личном кабинете в четвертом шаге сохранено уже два письма.
Перед тем, как переходить к следующему шагу, необходимо проверить письма на соответствие. Поэтому, первое, что мы делаем, смотрим, как выглядит письмо, которое в самом сервисе, которое мы загрузили.
Мы можем посмотреть как выглядит письмо с товарами, для этого нажимаем на вторую иконку и видим, что добавилось двенадцать товаров из нашего фида, который мы вчера добавили в шаг 3 и он за ночь разобрался, т.е. вот у нас здесь все есть: ссылки на товары, мы можем перейти и получить ссылку на товар на тестовом нашем сайте.
И так выглядит кнопка “Перейти в корзину”.
Так будет выглядеть для клиентов в целом это письмо, но нам еще интересно посмотреть, как это письмо будет выглядеть в разных почтовых ящиках и на разных мобильных и не мобильных устройствах.
Для этого, если сейчас все хорошо и нам нравится картинка, как выглядит наше письмо, куда оно переадресовывает, мы делаем конечное тестирование — отправляем это письмо на наши тестовые email-адреса.
Обязательно имеет смысл отправить на те почты, которыми пользуются ваши клиенты, т.е. это почты Yandex, Google, Mail и прочие почты. Вот у меня есть почта Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. — она находится на Yandex и есть Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. — она находится на GMail. Поэтому я отправляю на одну почту, видим здесь сообщение “Успешная отправка!”.
Важно за этими сообщениями наблюдать в процессе тестирования. Если здесь написано “Успешная отправка!”, то все хорошо, вы справились и, как минимум, ваше письмо будет доставляться пользователю. Но если вдруг здесь выдается какая-то ошибка (она может быть на русском языке, на английском языке), то обязательно посмотрите на эту ошибку, переведите, если она на иностранном языке и узнайте в чем дело. Обязательно в этой ошибке будет написано: номер этой ошибки и написано, в чем она состоит. Например, может быть внутри в подстановке регулярного выражения. Вы добавили какой-то лишний пробел либо скобочку, а если вы не можете разобраться с этой ошибкой, то обязательно пишите в наш support по адресу adminemailtools.ru. В данном случае письмо отправлено, и я сразу же отправляю второе письмо и отправляю письмо также на GMail и для теста на Mail.ru я сейчас не буду отправлять потому, что в данном видео это не имеет смысла, мы никак не изменяли болванку. Вам это необходимо будет проделать и переходим в нашу почту, в которой мы можем посмотреть, как же это будет выглядеть. Давайте перейдем в почту, в которую мы отправили тестовые письма. Вот нам пришли тестовые письма, давайте проверять их прямо отсюда.
Смотрим имя отправителя, совпадает с тем, что мы ожидаем или нет. Совпадает. Мы задавали, что будет название нашего сайта. Дальше мы смотрим на название письма, совпадает с тем, как мы называли тему письма, давайте проверим. “Вы кое-что забыли” и “Вы забыли товары в корзине”. Смотрим: “Вы кое-что забыли” и “Вы забыли товары в корзине”. “Тестовая рассылка” — это приписка конкретно сервиса, чтобы вы понимали и не теряли среди всех своих писем тестовую рассылку, и чтобы вам легче было найти ее в поиске, т.е. вы смотрите на название, которое после двоеточия. И дальше смотрим на вот это превью “Перейдите на сайт, кликнув по товару”. Мы так и писали, т.е. у нас в письме, если мы зайдем, мы увидим вот здесь “Перейдите на сайт, кликнув по товару”. Пока что все хорошо. Заходим внутрь письма и видим: вот здесь наше письмо с логотипом, с измененной нами надписью ну и дальше все то, что мы видели в личном кабинете, когда смотрели на предпросмотр. Просматриваем письмо, если нас все устраивает, то значит мы считаем, что наш тест прошел успешно. Мы обязательно кликаем по всем ссылкам, переходим в корзину: проверяем, правильно ли ссылку мы поставили, переходим по ссылкам в социальные сети и т.д. То есть это скрупулезная работа, которую обязательно нужно пройти, чтобы ваши пользователи не жаловались и не отписывались от вашей рассылки.
Также нужно посмотреть рассылку на GMail, куда мы отправили. Давайте посмотрим: вот мы видим: нам пришли тестовые письма. У GMail есть тоже свои нюансы. Для чего мы проверяем в разных рассылках: потому что каждый почтовик по-разному распознает. Соответственно, нам нужно понять, что действительно все качественно работает. Заходим, смотрим, здесь по-другому письмо выглядит, но в целом оно качественное пришло, все в порядке. Иногда GMail, когда происходит какая-то ошибка, не полностью показывает письмо и пишет, что для полного просмотра письма кликните по этой ссылке. Значит, это какой-то косячок вашей верстки, поэтому имеет смысл это переделать. Наше письмо, несмотря на то, что в него подгружается двенадцать товаров или девять, или сколько вы там подгружаете по переменной, оно не сильно много весит потому, что все данные мы берем по ссылке. Поэтому само письмо не очень тяжелое. И еще есть один нюанс, который вам обязательно нужно учесть: если вдруг не пришло письмо, вы не видите его во входящих, то посмотрите в Спаме.
Вам необходимо проверять все возможные варианты и в случае, если письмо в Спаме, тут уже другая история. Необходимо проверить: сделали ли вы цифровую подпись, добавили DKIM/SPF, точно ли вы не отправляли, точнее, точно ли вы не рассылали от своего домена рассылку с какого-то другого сервиса и не попали ли вы там под какие-то фильтры, Спам и т.д. То есть это история, которая конкретно касается вашего домена, но в порядке тестирования вы обязательно проверяете не произошла ли такая история и если она произошла, то обязательно проведите антиспам мероприятия, чтобы ваши пользователи не видели такую же ситуацию.
После того, как вы проверили на десктопе (ноутбук, ПК) письма, вам необходимо и очень стоит проверить как выглядят эти письма:
- На мобильном телефоне в браузере также в разных почтовиках;
- На мобильном телефоне в приложении для почты.
Чем больше приложений и браузеров вы проверите, тем меньше неожиданных нюансов вас ждет в перспективе. Также существуют онлайн-сервисы, которые проверяют отображение вашей рассылки на разных устройствах, в разных браузерах, в разных версиях браузера.
В данном виде я не буду рекламировать ни один сервис потому, что постоянно происходят изменения в этой сфере. Я думаю, на момент тестирования вы сами загуглите и поймете какой способ вам удобнее и правильнее. Также я рекомендую, если вы делаете какую-то очень ответственную рассылку и особенно, если она касается сегмента B2B и вы знаете, что ваш сегмент читателей использует Outlook, либо The Bat!, либо 1C приложения для чтения почты, то проверьте обязательно письмо в этих сервисах, потому что эти сервисы имеют очень чувствительные фильтры, которые по разному относятся к тому, как сверстано письмо. И в случае, если у вас там какие-то проблемы с изображением и т.д., посмотрите правила, которые требуют к верстке каждый из этих сервисов.
Наш шаблон-болванка изначально сверстана и адаптивна под всевозможные версии устройств, мобильные, десктопные планшеты, а также под всевозможные программы. После того, как вы вносите в них изменения, неважно с какого сервиса вы отправляете письма, необходимо делать вот подобные проверки.
И перейдем назад в Личный кабинет. После того, как вы протестировали, вы можете переходить к следующему шагу настройки.
