Как добавить интерактивные элементы в ваши электронные письма

Что такое интерактивные элементы электронной почты?

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

Интерактивные элементы в электронных письмах — это все, что требует действий от получателя для отображения. Этим действием может быть наведение курсора на кнопку CTA или нажатие на ответ в опросе.

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

Совместимость с поставщиками услуг электронной почты (ESP)

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

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

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

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

Как добавить интерактивные элементы в ваши электронные письма

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

1. Изменение цвета фона при наведении

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

В приведенном ниже примере Really Good Emails использует изменение цвета кнопки CTA.

Вот как ты это делаешь

Для большинства интерактивных элементов в этой статье вам потребуется добавить класс в CSS-часть шаблона. Затем вы включите класс в тег <a> раздела, который вы хотите сделать интерактивным. Это пример из шаблона электронной почты в редакторе кода Twilio SendGrid.

Вы заметите, что ниже есть довольно много кода, но большая его часть предназначена для стилизации кнопки CTA перед наведением курсора и того, как она выглядит при наведении курсора. Чтобы активировать функцию наведения, вам в основном нужно изменить класс (строка 12), чтобы он соответствовал правильному свойству CSS.

CSS:

HTML:

2. Изменение текста при наведении

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

В этом примере цвет шрифта меняется с белого на черный.

Вот как ты это делаешь

Основное различие между этим примером и изменением цвета фона при наведении — это CSS и свойство CSS, на которое есть ссылка в HTML.

CSS:

HTML:

Во втором примере шрифт изменяется при наведении курсора на полужирный и подчеркнутый.

Вот как ты это делаешь

Опять же, основные различия заключаются в CSS и свойстве CSS, на которое ссылается HTML.

CSS:

HTML:

3. Замена изображения при наведении

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

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

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

Посмотрите пример ниже!

Вот как вы это делаете:

Интерактивный элемент обмена изображениями создается путем наложения изображений в HTML так, чтобы сначала было фоновое изображение в ячейке таблицы, а второе изображение было доступно при наведении курсора.

CSS:

HTML:

4. Содержание

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

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

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

Вот как вы это делаете:

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

HTML:

5. Встроенный опрос

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

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

Вот несколько примеров.

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

Вот как вы это делаете:

Метод, который SendGrid использует для встраивания опроса, требует большого количества кода, поэтому вот более простой пример с использованием Google Forms.

1. Создайте свой опрос в форме Google .
2. Нажмите отправить.
3. Введите свой адрес электронной почты в поле «Кому».
4. Установите флажок «Включить форму в сообщение электронной почты».
5. Нажмите отправить.
6. Откройте письмо в папке «Входящие» и щелкните правой кнопкой мыши форму. Нажмите «Проверить».
7. Найдите код, начинающийся с <table=”center align”. Скопируйте и вставьте код в свой шаблон.
8. Проверьте свою электронную почту, чтобы убедиться, что опрос работает.

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

Продолжайте привлекать получателей

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

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

Чтобы ваш интерактивный контент попал в цель, вот несколько рекомендаций по прощанию:

1. Знайте, на какие почтовые клиенты (Gmail, Yahoo, AOL, Outlook) вы отправляете сообщения. Это поможет вам определить, имеет ли смысл тестировать интерактивные элементы в первую очередь.
2. Всегда имейте запасной вариант. Если вы отправляете получателю электронное письмо с интерактивным содержимым, которое не отображается, у получателя будет плохое впечатление от вашего бренда. Для получения информации о том, как создать резервные варианты для вашего интерактивного контента, ознакомьтесь со статьей Email on Acid.
3. Проверяйте свои письма перед отправкой. Вы можете использовать инструмент тестирования электронной почты SendGrid, Litmus или электронную почту на Acid.
4. Не тестируйте более одного интерактивного элемента одновременно. Слишком много может отвлекать.

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

• Отчет о сравнительном анализе и взаимодействии с электронной почтой за 2019 г.
• Лучшие стратегии взаимодействия с email-маркетингом
• Полная учебная программа по измерению для укрепления взаимодействия с электронной почтой
• Как добавление SMS в вашу программу электронной почты может поддерживать вовлеченность контактов