Письма всё больше становятся похожи на мини-сайты не только в плане оформления, а и по возможности добавлять разный интерактивный контент. Сейчас можно прийти в ужас от того, что называют интерактивностью - это и гифки, и таймеры, и обычные кнопки…. Нет. Это элементы, с которыми подписчик может так или иначе взаимодействовать в письме без перехода на сайт. Давайте расставим все точки над “ё” и заодно узнаем стоит ли возлагать большие надежды на интерактивность.
Тестирование интерактивных элементов в email-рассылках
Я отправила тесты на все мои адреса (да, у меня их много) и различные устройства с разными вариантами интерактивности.
Подопытными были выбраны:
-
самые популярные почтовики в нашем сервисе
-
нативные почтовики на мобильных
-
мобильные устройства с ОС: IOS, Android, Windows
-
зарубежные инструменты для создания интерактивного контента
Пока разные интерактивные элементы в email-рассылки добавляются только через код. Давайте посмотрим, что можно уже использовать и оправдают ли затраченные усилия ожидания.
Смена картинок при наведении
Реализуется с помощью: freshinbox, emailmonks и т.д.
Такой результат достигается с hover-эффектом, протестировать как это работает можно с помощью rollover, который работает только в Gmail, Thunderbird, Apple mail.
Следует так же учитывать, что на мобильных нет курсора - наведение и щелчок будет приравниваться к одному и тому же действию. Однозначно, не все такие пользователи как я, но на мобильном у меня по умолчанию открывается ссылка по клику. Я даже не заметила, что в письме был такой блок :)
В большинстве писем отображается просто статичный кадр и даже в моих тестах на Outlook mobile и web. Также в статье указано, что Gmail не поддерживает rollover, но это касается конкретного примера - можно найти отдельные решения для рассылок в Gmail и они работают довольно неплохо )
Подстановка такого изображения в разных сервисах осуществляется только вручную, прописав код в письмо. В eSputnik вы можете добавлять такие элементы в несколько кликов без вмешательства в код.
Смотреть инструкцию по добавлению Ролловера в письмо >.
Карусель
Реализуется с помощью: freshinbox, emailmonks и т.д.
Выглядит это как полоса изображений, которые можно переключать вправо/ влево.
Чтобы добавить на сайт такую ленту - есть разные плагины, чего не скажешь о письмах. Проблема в том, что некоторые типы CSS не поддерживаются и пользователь увидит только главное изображение. На сайте freshinbox.com есть разные заготовки - можно прописывать их примеры или отправлять с сайта. Взглянем на результаты:
Карусель даже не отображается толком в почтовиках - только главное изображение. Через раз справился с отображением Outlook, но порадовали стандартные почтовики iPhone и Android, хотя не уверена, что ими часто пользуются :)
В списке почтовиков не указан Yahoo! Mail, ведь он не слишком популярен среди отечественных пользователей, но теста ради нужно было проверить и его. На ПК карусель отработала, а вот на мобильном - нет.
Так-себе игрушка для вовлечения клиентов - больше головной боли с созданием письма, чем проку.
Эффективный email-маркетинг с eSputnik
РегистрацияФорма опроса в теле письма
Реализуется с помощью: google forms, emailmonks и т.д.
Чтобы добавить форму опроса - чаще всего размещают кнопку и под неё прописывают ссылку с Google Docs. Можно пойти более хитрым путём и добавить форму прямо в письмо. Каково же было удивление, когда наша форма показалась на всех устройствах и во всех почтовиках. И только Outlook, как обычно, отличился нестабильностью.
Популярные почтовики порадовали корректным отображением формы:
-
внешний вид чекбоксов и шрифтов не изменились
-
возможно заполнение формы
-
отправка сработала
Клиент Mail.ru даже перенёс по слогам слово “подарки” :)
В Gmail на Android включился режим “смотреть, но не трогать” - форма показалась, но она не активна для заполнения. Хуже ситуация в Outlook 2010/13 и Mobile
Изменились шрифты, сломалась кнопка, но главное - чек-боксы не работают. Хотя, в ранних версиях всё было отлично.
В нашем случае - с 1 из 10 устройств нельзя было заполнить форму, поэтому, чтобы перестраховаться лучше добавлять и ссылку на опрос. И да, если у вас 15 вопросов, вероятно, тоже не стоит их все сразу добавлять в письмо. Таки пошаговая форма будет куда удобнее.
Поисковик в письме
Реализуется с помощью: emailmonks и т.д.
Вероятно, вы встречали в письмах подобные поисковики:
Ничего особенного - просто картинка, ссылка под которой ведёт на поисковик на сайте. В emailmonks есть готовый поисковик, в котором можно прямо в письме прописывать запрос. Можно использовать гугл-поиск или строку поиска с вашего сайта.
На сайте emailmonks даётся готовое решение для встраивания кода в письмо и указано, что такой поиск будет работать на Apple Mail, Yahoo Desktop, AOL, Lotus Notes, Outlook 2007+, Outlook.com, Mobile App (Gmail App, Yahoo App) etc.
При тестировании же скрин практически во всех почтовиках выглядел одинаково "Упс, ваш емейл клиент не поддерживает поиск в письме?":
Эта ситуация повторялась практически везде:
- В Gmail App форма подгрузилась строка поиска только в веб-версии.
- Почтовый клиент Inbox на IOS нас тоже особо не порадовал, не отобразив форму.
- Зато в Apple Mail наконец-то форма заработала!
Если почитать на сайте, разработчики опять добавляют ложку дёгтя: “Поскольку Apple имеет ограниченную поддержку текстового поля, пользователи Apple не смогут заполнить поле или ввести «пробел» между словами. Однако «Alt + Space» может решить проблему.” Хотя, в наших тестах форма легко заполнялась, даже если ввести три слова.
В Yahoo! поисковик сработал, но это скорее радостная весть для тех, кто отправляет рассылки зарубеж, в силу непопулярности Yahoo mail среди наших пользователей.
В emailmonks я протестировала каждую функцию отдельно и даже при том, что на сайте указано где будет отображаться та или иная функция - делите это ещё на 2. Всё-таки комбинации устройств и операционок никто не отменял и это важно учитывать.
Например, пару слов о другой функции - фиксированная кнопка СТА в письме. При скроле кнопка всегда должна быть видимой внизу письма:
В общем, из всех отправленных тестов, отработала у меня кнопка только на нативном почтовике Android. Доверяйте, но лучше проверяйте :)
Интерактивность в письмах для гиков
Реализуется с помощью: волшебника вёрстки Justin Khoo, гиков table tr td :)
Примеры того, что можно сверстать вручную, но это действительно нужно быть фанатиком.
1) Freshinbox
Для “не верстальщика” придумать и внедрить такие активности в письмо довольно сложно. Главным образом их волнует Safari и iOS, чтобы там всё красивенько смотрелось. По ссылке можно поиграться с примерами от freshinbox и это впечатляет.
Зажигайте огоньки на гирлянде в любом режиме и любой последовательности. Можно менять режимы у ёлочки, обнулять результат и начинать заново.
Задача подписчика - кликать на ячейки с буквами и вычислить правильное слово-код. Есть готовые комбинации при сборе которых будут появляться определёные фразы. Спойлер: только при вводе ACID появится кнопка “Получить купон”
В блоге можно найти гораздо больше примеров, это только те, что мне понравились :)
2) Table tr td
На сайте можно подписаться на рассылку, чтобы получать свежую порцию вдохновения или просматривать готовые примеры. Кусков кода или полностью описанных механик я не нашла, да и особо не хотелось тестировать) Если у нас видео не воспроизвелось нигде, кроме iPad, тогда о чём может быть речь с более сложным кодом?
Примеры, которые мне понравились на сайте:
Немного ребячества и отличного настроения на ближайшие минут 15-20. Выбирайте цвет в палитре и нужный элемент на картинке окрасится в нужный цвет.
Кто же из нас не играл на старенькой Винде в игру “Сапёр”. Оказывается, такое можно добавить и в письмо. Правда, долго не поиграешь - размещение бомб на поле не меняется и флажки нельзя расставлять. Но если получить такое на почту - впечатляет.
На готовый корж по клику можно накидывать оливки, соус, сыр и т.д.Почему ингредиенты добавляются только в определённой последовательности? Мне, например, нравится, когда сыр сверху :)
Быть может, в ближайшем будущем мы сможем в несколько кликов создавать такие письма, но вопрос в другом - кто это увидит? Комбинации: почтовик - устройство - операционка можно перебирать до бесконечности. К сожалению, далеко не все почтовые сервисы и устройства готовы к интерактивным письмам.
Видео в письме
Реализуется с помощью: vidyard.com, realtime и т.д.
Графический контент в письмах лучше, чем 1000 слов. Тем более, эксперты вроде eMarketer.com прогнозируют будущее за видеоматериалами. А можно ли добавить видео в письма? Если вы собираетесь добавлять видео, интернет говорит, что видео корректно отработает только на HTML 5.
Как было обещано: cтандартные клиенты iOS, Apple Mail и Outlook.com, позволят получателям воспроизводить ваше видео в самом почтовом клиенте, не переходя по ссылке. Все остальные клиенты, устройства Android и Windows, будут отображать статичное изображение. Начинаем тестировать:
Видео практически везде отображается в виде статичного скрина. Порадовал только iPad и воспроизвёл видео не уходя из письма, в других случаях видео открывалось в новом окне.
Письмо выглядит довольно неплохо. Но не уверена что стоит тратить много усилий на то, чтобы в итоге всё равно получить в письме статичный скрин. И даже полюбившийся мне за время тестов Yahoo, решил, что воспроизведение видео в письме будет лишним.
Итого. Из всех протестированных инструментов отработала только форма-опроса. Остальные пока не готовы к массовым рассылкам. Возможно, у вас есть свои наблюдения на эту тему - расскажите. С удовольствие восполню знания и протестирую что-то новое :)
До новых встреч!