Как отправить собственный HTML-код с помощью Gmail

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

Раньше Gmail позволял пользователям напрямую вводить и редактировать HTML-код в редакторе электронной почты. Эта функция понравилась тем, кто хотел широко персонализировать и оформить свои электронные письма. Однако, стремясь повысить безопасность и упростить работу пользователя, Gmail принял решение удалить возможность прямого ввода HTML-кода в редакторе электронной почты.

Это изменение побудило пользователей изучить альтернативные методы отправки пользовательских электронных писем в формате HTML через Gmail, которые мы углубим в эту статью.

Перейдите в раздел здесь или прочитайте полное руководство:

• Отправка пользовательских писем в формате HTML через Gmail
• Копирование визуализированного HTML непосредственно в Gmail
• Ограничения использования пользовательских шаблонов HTML
• Обычные текстовые электронные письма против электронных писем в формате HTML
• Отправляйте персонализированные электронные письма в формате HTML с помощью Mailmeteor!

Отправка пользовательских писем в формате HTML через Gmail

Gmail использует редактор «Что видишь, то и получаешь» (WYSIWYG), а это означает, что отправка необработанного HTML-кода напрямую не является жизнеспособным вариантом. Потому что получатель фактически увидит необработанный HTML-код вместо визуализированного документа.

Например, взгляните на этот макет электронного письма.

Было время, когда вы могли сделать что-то подобное прямо в Gmail, но если вы попытаетесь скопировать и вставить HTML-код в редакторе Gmail, произойдет вот что:

Поскольку Gmail использует редактор WYSIWYG, получатель получает именно то, что вы видите здесь: электронное письмо, которое представляет собой не что иное, как HTML-код, написанный в виде обычного текста:

Однако есть практический обходной путь. Пользователи могут скопировать и вставить обработанное электронное письмо в формате HTML в редактор Gmail, чтобы отправлять собственные электронные письма в формате HTML. Этот метод позволяет создавать визуально привлекательные персонализированные электронные письма, работая в рамках ограничений Gmail.

Копирование визуализированного HTML непосредственно в Gmail

Этот метод на самом деле намного проще, чем кажется: вам просто нужно открыть шаблон электронного письма в браузере, а затем скопировать и вставить все его содержимое в редактор Gmail. Вот что вам нужно сделать:

1. Подготовьте свой HTML-код
   • Откройте текстовый редактор, например «Блокнот» (Windows) или TextEdit (Mac).
   • Напишите или вставьте свой HTML-код в текстовый редактор. Этот код может включать текст, изображения, ссылки и форматирование, как и стандартная веб-страница, но с некоторыми ограничениями, о которых мы поговорим позже.
   • Сохраните файл с расширением «.html», например «template.html».
2. Предварительный просмотр в веб-браузере
   • Дважды щелкните только что созданный HTML-файл, чтобы открыть его в веб-браузере по умолчанию. Это отобразит ваше электронное письмо точно так, как оно увидит получателя.
   • Вы можете вернуться в текстовый редактор и изменить содержимое, если хотите, просто не забудьте сохранить файл после завершения изменений и обновить страницу браузера, чтобы обновить ваши изменения.
3. Выбрать все и скопировать
   • В браузере нажмите Ctrl+A (Windows) или Cmd+A (Mac), чтобы выделить все содержимое электронного письма в формате HTML.
   • Затем нажмите Ctrl+C (Windows) или Cmd+C (Mac), чтобы скопировать выбранное содержимое. Вы также можете щелкнуть правой кнопкой мыши и выбрать в меню «Копировать».
4. Вставить в Gmail
   • Откройте Gmail и начните создавать новое электронное письмо.
   • Нажмите на тело электронного письма, куда вы хотите вставить содержимое электронного письма в формате HTML. Вы не можете вставить HTML в строку темы, поэтому единственным вариантом является тело письма.
   • Теперь нажмите Ctrl+V (Windows) или Cmd+V (Mac), чтобы вставить содержимое, скопированное из браузера. Или вы можете щелкнуть правой кнопкой мыши и выбрать в меню «Вставить».
   • Электронное письмо в формате HTML должно быть вставлено непосредственно в редактор Gmail, и вы должны увидеть его, как на изображении ниже.
5. Отправить электронное письмо
   • Заполните электронное письмо темой, получателем и любым дополнительным текстом или элементами.
   • Нажмите кнопку «Отправить», и ваше электронное письмо в формате HTML будет доставлено получателю.

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

Использование браузерного расширения HTML-редактора

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

Эти расширения, широко доступные для популярных браузеров, таких как Google Chrome, предоставляют опытным пользователям возможность вручную писать и редактировать HTML-код перед отправкой электронной почты через Gmail. Бесплатный HTML-редактор для Gmail от CloudHQ — один из наиболее популярных вариантов для пользователей Chrome.

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

Ограничения использования пользовательских шаблонов HTML

К сожалению, даже несмотря на возможность написания собственного HTML-кода, существуют ограничения, о которых вам необходимо знать, прежде чем отправиться в это путешествие. Это то что тебе нужно знать:

Попрощайтесь со шрифтами!

К сожалению, Gmail не предлагает возможности импортировать собственные веб-шрифты в ваши электронные письма в формате HTML. Вы ограничены использованием стандартных шрифтов, что может ограничить ваш выбор дизайна и возможности брендинга.

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

Изображения должны быть публично размещены

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

В нашем примере шаблона мы использовали изображения из заполнителя и поместили котенка, поскольку оба изображения общедоступны. Ваши изображения также должны быть общедоступны и размещены где-нибудь в Интернете. Это может быть ваш собственный веб-сайт, общедоступная папка на Google Диске или веб-сайт для обмена изображениями в Интернете.

Нет поддержки внешних таблиц стилей

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

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

Придерживайтесь табличных макетов

Хотя во многих современных HTML-кодах для макетов и стилей используются элементы <div> , в электронных письмах по-прежнему используются старые добрые табличные макеты. Итак, если вам нужно создать какие-либо элементы или блоки сетки, вам нужно будет сделать это, используя различные теги таблицы, такие как <table> , <tr> и `<td>.

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

Обычные текстовые электронные письма против электронных писем в формате HTML

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

Давайте выделим ключевые различия между этими двумя форматами электронной почты:

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

Отправляйте персонализированные электронные письма в формате HTML с помощью Mailmeteor!

Mailmeteor — это мощный инструмент электронного маркетинга, который упрощает процесс отправки персонализированных электронных писем в формате HTML нескольким получателям через Gmail. Это удобное дополнение легко интегрируется с вашими Gmail и Google Sheets, позволяя вам с легкостью создавать и отправлять персонализированные электронные письма.

• Персонализация электронной почты. Создавайте персонализированные электронные письма, используя пользовательские теги слияния из данных в ваших Google Таблицах или используя веб-платформу с такими полями, как имена, сведения о компании или любые другие пользовательские переменные.
• Редактор HTML-шаблонов: используйте премиум-редактор HTML и вставляйте персонализированные данные непосредственно в шаблоны электронной почты.
• Отслеживание электронной почты: отслеживайте свои электронные письма после того, как они покидают ваш почтовый ящик, смотрите, открывают ли их получатели, и запускайте A/B-тесты с надежной обратной связью.
• Библиотека шаблонов: получите доступ к библиотеке готовых шаблонов электронной почты или создайте свои собственные шаблоны электронной почты в формате HTML для использования в своих кампаниях.