Когда мы начали прорабатывать логистику конференции Litmus Live (ранее известной как Email Design Conference) в 2015 году, начались обсуждения о том, как сделать наше стартовое письмо масштабнее и лучше, чем в прошлом году. Как превзойти технику фонового видео HTML5 в письмах? С помощью динамического контента: живой ленты Twitter.
Да, *ленты Twitter в письме*.
Наши цели были двоякими: вызвать интерес к конференции и использовать инновационную — и вдохновляющую — технику в письме. После множества мозговых штурмов мы решили использовать распространённый подход с динамическим контентом, но с изюминкой.
Вы также можете ознакомиться с полным кодом здесь и результатами тестирования в Litmus здесь, чтобы увидеть, как оно отображалось в более чем 40 почтовых клиентах.
## Динамический контент в письмах
Идея динамического контента в письмах не нова. На самом деле, она часто используется для создания персонализированных и таргетированных писем. Исторически динамический контент реализовывался исключительно с помощью текста или изображений и подгружался через merge-теги или переменные через ESP. Динамические изображения ссылаются на один исходный файл, который динамически перезаписывается для отображения нового изображения определённой группе подписчиков на основе заранее заданных параметров персонализации. Оба этих метода позволяют создать уникальный, персонализированный опыт для ваших подписчиков.
В нашем стартовом письме мы использовали динамические изображения, чтобы живая лента Twitter работала в нескольких популярных почтовых клиентах. Однако мы также применили совершенно новый метод реализации динамического контента: динамический CSS.
Хотя динамический CSS работал в клиентах на базе WebKit, нам нужно было реализовать корректный фолбэк с использованием динамических изображений для подписчиков, использующих клиенты не на базе WebKit. Тем не менее, живая лента Twitter поддерживалась (так или иначе!) в следующих почтовых ящиках:
— AOL Mail
— Apple Mail
— iOS (родное почтовое приложение)
— Outlook (2000–2013)
— Outlook для Mac (2011 и 2016)
— Outlook.com
— Thunderbird
— Windows Phone
— Windows Mail
— Windows Live Mail
— Yahoo! Mail
## Динамический CSS-контент для почтовых клиентов на базе WebKit
Хотя мы могли бы использовать динамические изображения для всех почтовых клиентов, мы решили применить динамический CSS для прогрессивного улучшения в клиентах на базе WebKit, таких как родные почтовые клиенты iPhone и iPad, чтобы лента Twitter выглядела более реалистично.
Как мы это сделали? Используя пятнадцать последних твитов с хэштегом #TEDC15, мы по умолчанию отображали первые пять твитов, а затем анимировали оставшиеся твиты по одному в течение минуты. Это позволило нам создать эффект потока твитов в реальном времени и имело дополнительное преимущество — удерживало внимание пользователей дольше.
Хотя мы обновляли CSS-файл каждые 10 секунд, фактический контент в письме не мог обновляться таким же образом — для этого требовалось полное обновление документа. Пользователям нужно было повторно открыть письмо или обновить веб-версию, чтобы увидеть обновлённые твиты. Хотя это и не идеально, на практике оказалось весьма увлекательным!
Чтобы заставить работать живую ленту Twitter, мы использовали HTML и CSS, которые отображались только в клиентах на базе WebKit. Для этого мы создали пустые
Вот HTML-код:
«`
«`
Для динамического перезаписывания CSS мы использовали внешнюю таблицу стилей, которая обновлялась каждые 10 секунд и подключалась в нашем письме следующим образом:
«`
«`
Вот соответствующий CSS с информацией о твите в свойстве content:
«`
#tweet-1 .name::before {
content: «Kevin Mandeville»;
}
#tweet-1 .handle::after {
content: «@KevinMandeville»;
}
#tweet-1 .copy::before {
content: «I’m excited for #TEDC15! Who’s going?»;
}
#tweet-1 .timestamp::after {
content: «1m»;
}
«`
CSS для твитов был обёрнут в медиа-запрос, который позволял отображать его только в почтовых клиентах на базе WebKit:
«`
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Вставьте CSS здесь */
}
«`
Используя пустые
Единственный недостаток использования таргетинга на WebKit и свойства content заключается в том, что некоторые почтовые клиенты, такие как Airmail и приложения Outlook для iOS и Android, поддерживают медиа-запрос для WebKit, но не поддерживают свойство content, из-за чего твиты остаются невидимыми. Однако, учитывая, что эти почтовые клиенты составляют очень малую часть нашей аудитории (менее 1%), это был оправданный компромисс.
## Динамические изображения для почтовых клиентов не на базе WebKit
Для почтовых клиентов не на базе WebKit мы использовали более традиционный метод отображения динамических изображений, поскольку свойство CSS content плохо поддерживается в почтовых клиентах за пределами WebKit.
В письме мы ссылались на динамическое изображение ленты Twitter:
«`
«`
Мы создали простую веб-страницу с лентой Twitter, используя тот же HTML и CSS, что и в письме. Затем мы сделали скриншот ленты с теми же размерами 600×902 с помощью утилиты командной строки wkhtmltoimage и динамически обновляли это изображение каждые 10 секунд.
Поскольку мы использовали HTML и CSS для отображения в WebKit, мы скрыли изображение в WebKit, чтобы избежать дублирования лент:
«`
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.webkit-hide {
display: none;
}
}
«`
Благодаря этой технике живая лента Twitter работала даже в самых проблемных клиентах (например, Outlook) и позволила большинству наших подписчиков присоединиться к веселью!
Единственным серьёзным недостатком этой реализации динамического изображения было то, что Gmail кэширует изображения. В результате пользователи Gmail не видели живую ленту Twitter. Вместо этого они видели восемь последних твитов и специальное сообщение с предложением открыть веб-версию письма для полного эффекта.
## Как мы создали интеграцию с динамической лентой Twitter
Кевин Томпсон, наш маркетинговый разработчик, был главным архитектором этой интеграции с Twitter. Он создал простое приложение на базе фреймворка Sinatra и разместил его на Heroku. Вы можете ознакомиться с кодом и попробовать его самостоятельно, следуя инструкциям на GitHub. Этот первоначальный тест доказал, что возможно генерировать твиты в CSS, загружать внешнюю таблицу стилей в нескольких почтовых клиентах и что эти клиенты могут получать обновлённый CSS каждый раз при открытии письма.
Затем приложение стало немного сложнее. Поскольку Twitter накладывает ограничения на количество запросов к API, нам нужно было убедиться, что мы не превысим лимит в 150 запросов за 15 минут, отведённых для поисковых запросов. Для решения этой проблемы мы добавили второй процесс в наше приложение на Heroku. Этот процесс работал в фоновом режиме, получая твиты каждые 10 секунд и сохраняя их в кэше. Основной процесс приложения затем загружал твиты из кэша вместо прямого поиска через Twitter.
Кевину также пришлось учитывать масштабируемость и скорость. Хотя у нас было решение для соблюдения лимитов API Twitter, наш единственный сервер вряд ли смог бы обработать ожидаемое количество запросов от более чем 200 000 получателей нашего письма. Для решения этой проблемы мы внедрили CDN Amazon CloudFront, что позволило нам поддерживать гораздо больше запросов к нашим ресурсам и распределять их по всему миру, чтобы файлы загружались быстро для всей нашей аудитории. В нашем приложении на Sinatra Кевин также добавил заголовки Cache-Control, которые указывали CloudFront истекать срок действия ресурсов через 10 секунд. Это заставляло его чаще запрашивать новый контент у нашего приложения.
Чтобы поддерживать результаты как можно более актуальными, не превышая лимиты API Twitter, мы рендерили и кэшировали динамические CSS и файлы изображений каждые 10 секунд с результатами нашего поиска по Twitter.
Для управления содержимым твитов как поисковые термины Twitter, так и заблокированный контент/пользователи контролировались с помощью переменных окружения. Хотя изменение переменных окружения на Heroku означало, что наше приложение должно было перезапуститься, из-за того, что ресурсы распространялись через CDN, а приложение было очень простым, перезапуск занимал всего несколько секунд и был совершенно незаметен. Кроме того, поскольку Heroku предоставляет интерфейс для редактирования переменных окружения, наша маркетинговая команда могла вносить изменения в поисковые термины и блокировать контент по мере необходимости.
Если эти методы кажутся вам слишком сложными или трудоёмкими, существуют сторонние компании, такие как Movable Ink, LiveClicker, PowerInbox и Avari, которые специализируются на динамическом контенте для писем.
## Фильтрация нежелательных твитов
Одной из главных проблем при внедрении живой динамической ленты Twitter было то, что мы теряли контроль над содержимым нашего письма, что могло привести к появлению «плохих твитов» в ленте. Некоторые пользователи Twitter отметили это:
Здорово иметь живые ленты твитов в письмах, но меня пугает мысль, что кто-то может написать: «Это письмо отстой!» #TEDC15
— Nick (@NicholasLester) 22 мая 2015 г.
Письмо от @litmusapp с #TEDC15 — это потрясающее достижение, но уязвимость некурируемого потока проблематична для брендированного #emailмаркетинга.
— Matthew Minnich (@minnichmj) 21 мая 2015 г.
В то же время мы хотели предоставить как можно более «сырую», нефильтрованную ленту твитов, чтобы сохранить эффект «вау». Наша гипотеза заключалась в том, что плохие твиты будут редким случаем и будут вытесняться из ленты за счёт постоянной активности. Поэтому мы изначально полагались на фильтры поиска Twitter, чтобы отсеивать нежелательный контент.
Однако мы хотели иметь дополнительные фильтры, поэтому также дали себе возможность блокировать определённые имена пользователей и текстовые строки после получения результатов от Twitter. В итоге мы решили не допускать фотографии в твитах вообще, так как это могло выйти из-под контроля и нанести больший вред, чем просто текст. Кроме того, невозможно динамически вставлять ссылки через свойство CSS content, поэтому никакие ссылки в твитах не работали — они просто отображались как текст. Все твиты были связаны непосредственно с лентой твитов #TEDC15.
В качестве последней меры предосторожности у нас была возможность полностью отключить результаты поиска твитов в реальном времени, переключившись на отфильтрованный список избранных твитов из нашего аккаунта @emaildesignconf. В итоге нам пришлось удалить всего пару плохих твитов. И, насколько известно, нам пока не пришлось использовать последний резервный вариант переключения на избранные твиты — да здравствуют #emailgeeks!
Хорошо, что мы все ответственны без модераторов. #TEDC15
— Talis Lin (@TalisLin) 21 мая 2015 г.
Главное — убедиться, что мы протестировали всё от начала до конца. Убедитесь, что ваши дизайны отлично выглядят в почтовых ящиках, которые используют ваши подписчики, с помощью Litmus.
## Потрясающе положительная реакция
Наша аудитория определенно оценила это забавное и уникальное решение в письмах. Оно сделало письмо интерактивным и общим опытом, в котором мог участвовать каждый. Реакции в Twitter были бесценны и даже следовали схожим темам.
Некоторые сомневались, действительно ли это работает:
Это действительно работает? #TEDC15
— Ajedsshi (@Ajedsshi) 22 мая 2015 г.
#TEDC15 Мне нужно проверить, появится ли этот твит в письме от Litmus
— Duncan Cartledge (@superdunc) 22 мая 2015 г.
#tedc15 ЭТО ВООБЩЕ РАБОТАЕТ?
— Lisa Campo (@HighRoadLisa) 22 мая 2015 г.
Это живая лента Twitter реальна? #TEDC15
— Chloé (@ChloeM_F) 21 мая 2015 г.
#TEDC15 Примите мои извинения. Я верю
— Name darf nicht leer sein (@boulderhalter) 21 мая 2015 г.
Многие просто смотрели на неё:
Я продолжаю смотреть на живую ленту Twitter в письме #TEDC15 от @litmusapp, чтобы понять, реально ли это. #умопомрачительно #какэтовозможно
— Amy Dodge (@Amykdodge) 21 мая 2015 г.
Смотрю на это письмо #TEDC15 от @litmusapp. Живая лента прямо в почтовом ящике. #emailмаркетинг pic.twitter.com/4XErfhMOcm
— Melissa Danh (@MelW) 21 мая 2015 г.
Тук-тук. Кто там? Litmus. Litmus кто? Litmus здесь, откройте то же письмо ещё раз на 90 минут. @litmusapp #TEDC15
— Shai Creates (@shaicreates) 21 мая 2015 г.
Просто сижу здесь и наблюдаю, как обновляется лента #TEDC15 в реальном времени В МОЁМ ПОЧТОВОМ ЯЩИКЕ. @litmusapp
— Anno Pohl (@nanoanno) 21 мая 2015 г.
Некоторые здоровались с другими:
Привет, мам! #TEDC15
— Andy Barnes (@WhoIsAndyBarnes) 21 мая 2015 г.
Было несколько упоминаний магии, колдовства и Гарри Поттера:
Какую сатанинскую кровь использует @litmusapp, чтобы загружать живую ленту Twitter в тело письма??? #TEDC15
— Andy Hunt (@andyhunt) 21 мая 2015 г.
Живая лента Twitter от Litmus — это колдовство, которое РАБОТАЕТ даже в Outlook! Где платформа 9 3/4? Мне нужны эти знания #TEDC15
— Brittany P (@brittles_86) 21 мая 2015 г.
Гарри Поттер, кусай локти #TEDC15
— Ben Moore (@spongydice) 21 мая 2015 г.
@litmusapp, вы — волшебники! Удивительно, что этот твит появляется в живой ленте, встроенной в письмо! #TEDC15 это должно быть магия!
— Craig Elve (@CraigElve) 22 мая 2015 г.
Было и много шуток и шалостей:
Знаете ли вы, что кошки могут использовать свои хвосты для баланса и у них почти 30 отдельных костей в них! #TEDC15
— Jason Meeker (@jpmeeker) 21 мая 2015 г.
Теневое правительство контролирует нас всех. #TEDC15
— Fabio Carneiro (@flcarneiro) 21 мая 2015 г.
И, наконец, многих просто поразило:
#TEDC15 Дрожь по коже! Вот мой твит в этой email-кампании от @litmusapp
— Joe Tearle (@jtearle) 21 мая 2015 г.
Святая живая лента, Бэтмен #TEDC15
— Rob Lyons (@RobPLyons) 21 мая 2015 г.
@KevinMandeville @kevinthompson огромное уважение и почёт! Первое письмо, которое вызвало у меня восхищение. ✨😮✨👏👏👏
— Jason Tropp (@tropp) 21 мая 2015 г.
Мой разум *взорван* от наблюдения за тем, как живая лента Twitter прокручивается в письме в OUTLOOK, из всех клиентов! #TEDC15 — отличная работа, @litmusapp
— Sam Foreman (@forepac) 21 мая 2015 г.
#TEDC15 Кто-то должен сказать ребятам из Litmus, что невозможно вставить живую ленту Twitter в письмо. Ой, подождите. У них это получилось!
— Mitrache Adrian (@adimitrache) 22 мая 2015 г.
Каждый email-маркетолог сегодня #tedc15 pic.twitter.com/JOpKAvjqQp
— 🧵Kristinmbond (@EmailSnarketing) 21 мая 2015 г.
Люди всё ещё пишут в письме @litmusapp, как будто засыпаешь в конце вечеринки и просыпаешься, обнаружив, что люди всё ещё танцуют #TEDC15
— Chris Goldson (@Chrisgoldson90) 22 мая 2015 г.
## Анализ эффективности
Мы были поражены результатами этой кампании! Более 53% наших открытий пришлись на почтовые клиенты на базе WebKit, поэтому многие пользователи увидели улучшенную версию. Всего за первые 24 часа после отправки письма было опубликовано более 750 твитов с хэштегом #TEDC15. Кроме того, письмо помогло привлечь более 4000 новых посетителей на наш сайт и сгенерировало более 1000 новых потенциальных клиентов за тот же период! Не говоря уже о том, что это письмо показало лучшие показатели вовлечённости из всех, что мы когда-либо отправляли — почти 60% пользователей просматривали письмо более 18 секунд!
Если у вас есть вопросы, не стесняйтесь задавать их в комментариях ниже, присоединяйтесь к обсуждению в сообществе Litmus или напишите в Twitter @KevinMandeville и @KevinThompson!
## Получайте потрясающие письма
Не пропустите наше следующее умопомрачительное письмо — подпишитесь, чтобы получать новости и информацию обо всём, что происходит в Litmus.
Related Posts
Как легко добавить фоновое изображение в email (+ код для реализации)- Четыре эффективных способа использования динамического контента в email-рассылках
Будущее дизайна электронных писем
Telegram-бот для анализа футбольных матчей, команд и прогноза на ставки.
Утечки, сливы баз данных от 19.06.2026 00:21- PR для стартапа с минимальным бюджетом