Как отправить html письмо через Gmail
Дата публикации: 5 сентября 2016
В этой статье мы расскажем как отправить html-письмо через Gmail. Способ специфичен, но имеет право жить.
Итак, приступим.
Шаг 1. Подготовка шаблона
Важным правилом при отправке письма таким способом является то, что ссылки на изображения в коде должны быть прописаны полностью, а сами изображения должны находиться на сервере.
Если ссылки ведут на изображения с вашего компьютера, то программа их не увидит.
Шаг 2. Вставка письма
Создайте новое письмо, разверните его на всю страницу для удобства и кликните по полю для текста.
Теперь нужно вставить код письма в сообщение, но если вы просто вставите его, то код вставится как обычный текст и никакого письма не получится. Поэтому тут нужно схитрить и сделать так, что бы браузер считал, что код письма — часть страницы.
Для этого нужно кликнуть по полю для текста сообщения правой кнопкой и выбрать «Просмотр кода элемента». Откроется панель с нужным блоком на странице.
Обратите внимание, мы работаем через Google Chrome. Если вы работаете из-под другого браузера, то название пункта в меню и внешний вид самой панели могут отличаться от нашего примера, но все они работают одинаково, так что вам не составит труда разобраться. В крайнем случае установите Chrome и сделайте все как у нас. Это быстро. Скачать можно с официальной страницы.
Браузер выделил нам блок div. Именно он отвечает за содержимое письма. Отредактируем его. Предварительно скопируйте код письма, открыв его через блокнот и скопировав содержимое.
Далее кликаем правой кнопкой мыши по тому самому блоку и выбираем пункт «Edit as HTML».
Удаляем фрагмент <br>, который создает лишний отступ не нужный нам и вместо него вставляем код нашего письма. И просто кликаем по окну сообщения, что бы изменения принялись.
Вы увидите, что письмо появилось внутри сообщения. Нижнюю панель можно закрыть, нажав на крестик справа.
Шаг 3. Отправка письма через Gmail
Внесите нужные изменения в письмо, добавьте адресатов, тему. И просто нажмите на кнопку «Отправить». Все готово.
Рекомендации
Изменения в коде страницы и обновление
Изменения, которые вы будете вносить в код страницы существуют только на вашем компьютере и если вы что-то сделали не так — обновите страницу и все вернется в изначальное состояние. Соответственно, если вы вставили шаблон и перед отправкой случайно обновите страницу — все слетит и нужно будет повторить действия снова.
Проверка корректности
Мы рекомендуем сначала отправить одно такое письмо на свой почтовый ящик, что бы убедиться, что программа не нарушила корректность шаблона.
Множественная рассылка
Что бы не создавать письмо каждый раз, мы рекомендуем создать черновик и использовать его повторно сколько вам хочется. Либо можно отправлять уже отправленные вами письма на другие адреса, но убедитесь, что бы в шаблон не добавилось ничего лишнего.
4 сервиса для тестирования HTML-писем — Журнал Mindbox о разумном бизнесе
Учебные материалы
7 сентября 2021
Прежде чем отправить письмо, нужно проверить, каким его увидит получатель. Если этого не сделать, адресат может получить письмо с пустыми ссылками, кривым форматированием и картинками, которые не отображаются. Или из-за цвета шрифта, сокращенных ссылок и изображений без alt-тегов почтовая программа отправит письмо в спам. В статье рассмотрим, что представляют собой сервисы для тестирования html-писем и чем они отличаются друг от друга.
Содержание
- Зачем нужны сервисы для тестирования писем
- Litmus
- Email on Acid
- Mail Tester
- Email Preview Services
- Что в итоге
- Полезные ссылки
Зачем нужны сервисы для тестирования писем
Сервисы проверки рассылок созданы, чтобы облегчить жизнь email-маркетолога, потому что это:
Удобно ― не придется регистрироваться во всех почтовых программах и отправлять письма самому себе.
Полезно ― тесты позволяют понять особенности отображения писем в разных почтовых сервисах. Это помогает доработать код, чтобы рассылка выглядела достойно в любой программе и на любом устройстве.
Быстро ― сервис найдет ошибки в верстке и покажет все варианты отображения письма за пару секунд.
Возможности Mindbox для самостоятельной настройки email-рассылок
мнение
Сервисы для проверки могут не знать всех реальных нюансов работы почтовых движков, поэтому без теста в ручном режиме не обойтись.
Тут нужно идти от общего к частному: сначала поймайте все баги в сервисе проверки, а потом протестируйте рассылки на реальных почтовиках.
Для этого отправьте сверстанное письмо на тестовые адреса разных почтовых сервисов и проверьте его веб и мобильную версию на разных устройствах и в разных почтовых программах. Соберите статистику, какие из них пользуются популярностью среди вашей аудитории, и сконцентрируйтесь на них.
Петр Никитин, product owner дополнительных каналов
Что это: сервис для создания рассылок, тестирования писем и анализа email-кампаний.
Минусы | Плюсы |
— довольно дорогой; | — покажет, как выглядит письмо в 90 почтовиках и устройствах; |
— охватывает мало популярных в России почтовиков, но проверяет отображение писем в иностранных почтовых сервисах, которыми у нас не пользуются. | — предложит выбрать, в каких клиентах и устройствах тестировать; |
— отметит ссылки, которые не работают; | |
— отыщет картинки без alt-тега; | |
— проанализирует, поддерживает ли код почтовая программа; | |
— проведет спам-тест. |
Сколько стоит: от 79 долларов в месяц, если оформить годовую подписку, и от 99 долларов, если платить ежемесячно. Предусмотрен бесплатный пробный период на 7 дней.
Результат теста рассылки в Litmus
Что это: сервис, который, как и Litmus, помогает создавать, тестировать и анализировать рассылку.
Минусы | Плюсы |
— довольно дорогой; | — покажет, как выглядит письмо в 90 почтовиках и устройствах; |
— в базе устройств для проверки совсем немного устройств на Android. | — подскажет, что сделать, чтобы письмо было удобно читать людям с нарушениями зрения и дислексией; |
— проверит корректность ссылок; | |
— поможет установить фиксированный размер изображений и первый кадр гифок для почтовиков со статичными картинками; | |
— продемонстрирует, как выглядит письмо в dark mode; | |
— поделится опытом в верстке и дизайне писем в блоге; | |
— проведет спам-тест. |
Сколько стоит: от 73 долларов в месяц, если оформить годовую подписку, и от 86 долларов, если платить ежемесячно. Предусмотрен бесплатный пробный период на 7 дней.
Интерфейс сервиса Email on Acid
Что это: сервис, который в основном проверяет рассылку на технические ошибки. Он не покажет, каким увидит письмо адресат, но поможет доставить его в папку «Входящие», а не в «Спам».
Минусы | Плюсы |
— без регистрации можно сделать только четыре теста в день; | — не требует регистрации, чтобы провести проверку; |
— бесплатно проверит до 20 писем в день; | |
— проведет спам-тест в SpamAssassin и подскажет, как улучшить письмо; | |
— проверит настройки верстки, код и качество форматирования; | |
— сохранит статистику проверок на 7 дней в бесплатной версии и на 30 дней в платном тарифе. |
Сколько стоит: от 50 евро за 500 проверок. Четыре бесплатных теста в день без регистрации. Если зарегистрироваться, можно делать 20 тестов в день бесплатно.
Результат проверки и рекомендации Mail Tester
Что это: такой же функциональный сервис, как хедлайнеры Litmus и Email on Acid, но в три раза дешевле.
Минусы | Плюсы |
— охватывает мало популярных в России почтовиков, но проверяет отображение писем в иностранных почтовых сервисах, которыми у нас не пользуются. | — покажет, как выглядит письмо в 50 почтовиках и устройствах; |
— продемонстрирует, как выглядит письмо в dark mode; | |
— протестирует рассылку на реальных устройствах; | |
— предложит выбрать, в каких клиентах и устройствах тестировать; | |
— проведет спам-тест; | |
— сгенерирует ссылку, с помощью которой можно поделиться результатами проверки; | |
— стоит дешевле сервисов-конкурентов. |
Сколько стоит: от 20 долларов в месяц, если оформить подписку на год, и от 25 долларов, если платить ежемесячно. Предусмотрен бесплатный пробный период на 7 дней.
Превью письма в Email Preview Services
мнение
Главный минус сервисов автоматической проверки в том, что они не гарантируют 100% правильность результатов. Их использование снижает вероятность появления багов, но не исключает ее полностью.
Петр Никитин, product owner дополнительных каналов
Что в итоге
Если сравнить функциональность сервисов между собой:
Litmus | Email on Acid | Mail Tester | Email Preview Services | |
Почтовые клиенты для предпросмотра | 90+ | 90+ | нет | 50+ |
Поиск ошибок в коде | да | да | да | да |
Поиск ошибок в верстке | да | да | нет | да |
Тест на реальных устройствах | нет | нет | нет | да |
Cпам-тест | да (для тарифов Pro и Enterprise) | да | да | да |
Цена | от 79 долларов в месяц | от 73 долларов в месяц | от 50 евро за 500 проверок | от 20 долларов в месяц |
Тестовый период | 7 дней | 7 дней | от 4 тестов в день бесплатно | 7 дней |
Заметно, что у популярных сервисов схожее наполнение ― можно выбрать ресурс, чей интерфейс будет приятнее и обойдется дешевле. Есть и бесплатные программы, но с ограниченным функционалом. Они вполне могут стать дополнительным инструментом проверки: пользуйтесь нужными функциями и ничего не платите.
Что делать, если рассылки попали в спам
Почему обрезается рассылка на Gmail и как это починить
Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога
Как не попасть в спам при отправке email-рассылок
Как настроить постмастеры Mail, Yandex и Gmail
Рroduct owner дополнительных каналов
Пётр Никитин
Автор
Екатерина Жукова
Редактор
Филипп Вольнов
Рroduct owner дополнительных каналов
Пётр Никитин
Редактор
Севиль Нагаева
Редактор электронной почты HTML с перетаскиванием
Встречайте Stripo — интуитивно понятный и простой, но гибкий инструмент для создания шаблонов писем. Ускорить производство. Тестируйте и экспортируйте электронные письма в любые ESP. Перетаскивание и редакторы HTML.
Любимы величайшими компаниями мира
Дизайн и макеты
Интеграция и экспорт
Экономия времени и автоматизация
Тестирование и проверка
Совместное использование и сотрудничество
Создавайте электронные письма по-своему
Конструктор электронной почты с перетаскиванием
Интуитивно создавайте и настраивайте каждый элемент сообщения электронной почты. Нет разработки кода электронной почты. Полезные готовые модули и блоки контента для оптимизации процесса.
Редактор кода HTML и CSS
Пишите электронные письма с нуля или начните в конструкторе Drag-n-Drop, а затем добавьте пользовательские элементы HTML. Вы можете одновременно использовать конструктор электронных писем D-n-D и HTML-редактор без переключения.
Начните бесплатноОтправляйте сообщения электронной почты на более чем 70 ESP
Беспроблемный экспорт в один клик. Нет неуместных элементов электронной почты, не требуется ручная настройка кода.
Чистый код электронной почты, который мы вам предоставляем, обеспечивает беспроблемную миграцию и позволяет работать сразу с несколькими поставщиками услуг электронной почты.
Не пользуетесь ESP? Экспортируйте сообщения электронной почты в CRM через Zapier или Webhook или отправляйте их в Gmail, Outlook. Вы также можете загружать электронные письма в виде файлов PDF, изображений или HTML, если это необходимо.
Начать бесплатно Просмотреть все интеграцииУскорьте производство электронной почты
Готовые модули
Избавьте вас от необходимости заново создавать одни и те же элементы электронной почты. Разработайте модули контента один раз и используйте их в нескольких кампаниях по электронной почте.
Автоматическая замена электронной почты
Если вы отредактируете одно из своих триггерных писем с помощью Stripo, а затем отправите его в ESP, новая версия автоматически появится в существующем рабочем процессе.
Массовое редактирование и экспорт
Отличная функция, если вам нужно обновить некоторые элементы ваших электронных писем одновременно. Например, вы можете редактировать контактную информацию во всех нижних колонтитулах электронной почты одновременно. Просто активируйте синхронизацию между модулями и готово.
Простой процесс перевода
Переводите электронные письма с помощью Google прямо в редакторе или автоматически вставляйте пользовательский перевод в соответствующие блоки электронной почты. Все языковые версии можно экспортировать одним щелчком мыши и компактно хранить.
Начните бесплатноПроверяйте сообщения электронной почты перед отправкой
Тестируйте традиционные электронные письма HTML и AMP HTML.
Посмотрите, как ваша электронная почта будет отображаться на более чем 90 устройствах.
Попробуйте режим предварительного просмотра для настольных компьютеров и мобильных устройств.
Встроенная проверка орфографии
Темный режим для предварительного просмотра электронной почты
Подсветка отсутствующих ссылок и альтернативных текстов
Скоро
Начните бесплатноПригласите товарищей по команде работать с вами
Назначение пользовательских ролей и уровней доступа
Пригласите писателей, дизайнеров, корректоров или зрителей с соответствующими уровнями доступа к вашему рабочему пространству. Совместная работа с полным контролем над любыми изменениями, которые вносят ваши товарищи по команде.
Поделитесь результатами своей работы для одобрения
Получите общедоступную ссылку на веб-версию электронного письма или отправьте ее на адреса электронной почты ваших товарищей по команде.
Совместное редактирование и
комментирование
Создавайте шаблоны писем вместе.
Скоро
Более 1350 бесплатных HTML-шаблонов электронной почты
Креатив
Информационные бюллетени
Триггер
Праздники
События
Заказ
Нужна помощь с вашим первым шаблоном?
Наш дизайнер электронной почты может создать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.
Заказать индивидуальный шаблонСоздавайте электронные письма на основе AMP
Создавайте интерактивные электронные письма в стиле веб-сайтов с помощью технологии AMP for Email.
Действия прямо в письме
С AMP получатели могут выполнять действия непосредственно в электронном письме, а не переходить на целевую страницу. Например:
- Бронирование билетов, гостиничных номеров, встречи.
- Просмотр каталогов продукции, выбор размеров и цветов продукции.
- Обмен отзывами, заполнение форм отзывов и участие в опросах.
Данные в реальном времени
Содержимое электронных писем обновляется в тот момент, когда получатели открывают их. Обновляйте количество, цены, изображения продуктов, заголовки сообщений в блогах и т. д. в своих информационных бюллетенях. Все, что вам нужно, это подключение к серверам — здесь мы вас тоже обеспечим.
Взаимодействие с клиентами
Увеличьте рентабельность инвестиций на 300 % и скорость отклика пользователей на 520 %, позволив пользователям играть в мини-игры, отвечать на вопросы и заполнять формы обратной связи и опросы.
Электронная книга «Примеры геймификации»Плагин Stripo
Плагин можно легко настроить в соответствии с вашими требованиями и интегрировать в любой продукт.
Узнать большеИндивидуальная демонстрация
Узнайте больше о Stripo во время видеозвонка с нашими экспертами. Мы будем рады рассказать вам обо всех крутых функциях, которыми обладает Stripo
. Заказать демоПрисоединяйтесь к более чем 850 тысячам пользователей
Начните бесплатно — обновите в любое время
Инструмент проверки и проверки электронной почты HTML
Инструмент проверки и проверки электронной почты HTML | HTML-проверка электронной почты Начать проверку Посмотреть доступные тарифные планы.Меню инструментов Быстро переключайтесь между проверкой кода, визуальным тестированием и отправкой электронной почты.
HTML-редактор и проверка Вносите изменения в свою электронную почту прямо в редакторе и мгновенно проверяйте валидацию.
Результаты проверки Подробная информация, включая анализ уровня серьезности затронутых почтовых клиентов.
Как работает проверка электронной почты в формате HTML?
HTML Email Check включает в себя полный набор инструментов, необходимых разработчикам для проверки и проверки своих электронных писем в формате HTML, включая углубленную программную проверку
для всех популярных почтовых клиентов и служб веб-почты, встроенный HTML-редактор, средство просмотра устройств и отправку электронной почты.
- Проверка HTML
Проверка HTML-разметки, структуры и специфических для клиента тегов. - Проверка CSS
Проверка форматирования CSS, встроенного CSS и стиля клиента. - Проверка шрифтов
Проверка типов шрифтов, веб-шрифтов и стиля клиента. - Проверка изображения
Проверка источников изображения, размеров и атрибутов. - Проверка ссылок
Проверка рабочих URL-адресов, специальных ссылок и атрибутов. - Проверка мобильных устройств
Проверка совместимости с мобильными устройствами и мобильных устройств. - Проверка доступности
Проверка доступности вспомогательных технологий. - Проверка на спам
Проверка на соответствие общим рекомендациям по борьбе со спамом для повышения доставляемости. - Визуальное тестирование
Визуальное тестирование и проверка HTML-структуры электронной почты. - Отправка электронной почты
Отправляйте до 10 тестовых писем за раз непосредственно в папку «Входящие». - Контрольный список разработчика
Освещение важных аспектов, которые должны быть включены в ваше электронное письмо перед отправкой. - Экспорт проверки
Загрузите, сохраните или распечатайте все отчеты проверки на свой компьютер.
Полностью гибкий
Тестирование электронной почты на разных устройствах
Каждый день разный, и иногда вам нужно быстро реагировать на определенную ситуацию или изменения в последнюю минуту.
Проверка электронной почты в формате HTML была разработана для работы на всех популярных типах устройств, от настольных компьютеров и ноутбуков до планшетов и мобильных устройств, что позволяет нашим пользователям быстро и легко запускать проверки или отправлять тестовое электронное письмо из любого места и в любое время.