Как закодировать живую динамическую ленту Twitter в электронной почте HTML

Опубликовано: 2015-05-26

Когда в 2015 году мы начали заниматься логистикой Litmus Live (бывшая Конференция по дизайну электронной почты), начались разговоры о том, чтобы сделать наше стартовое письмо больше и лучше, чем в прошлом году. Как мы можем превзойти технику фонового видео HTML5 в электронной почте? Используя динамический контент: живую ленту Twitter.

Да, канал Twitter по электронной почте .

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

tedc15-email

Просмотреть электронную почту полностью в браузере →

Вы также можете просмотреть полный код здесь и результаты теста Litmus здесь, чтобы увидеть, как он отображается в более чем 40 почтовых клиентах.

Динамический контент в электронной почте

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

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

Хотя динамический CSS работал для клиентов WebKit, нам нужно было реализовать надлежащий откат с использованием динамических изображений для наших подписчиков, использующих клиенты, не относящиеся к WebKit. При этом живая лента Twitter поддерживалась (так или иначе!) В следующих почтовых ящиках:

  • Почта AOL
    Динамическое изображение
  • Apple Mail
    Динамический CSS
  • iOS (собственное почтовое приложение)
    Динамический CSS
  • Перспективы (2000-2013 гг.)
    Динамическое изображение
  • Outlook для Mac (2011 и 2016)
    Динамический CSS
  • Outlook.com
    Динамическое изображение
  • Thunderbird
    Динамическое изображение
  • телефон с операционной системой Виндоус
    Динамическое изображение
  • Почта Windows
    Динамическое изображение
  • Почта Windows Live
    Динамическое изображение
  • Yahoo! Почта
    Динамическое изображение

Динамический CSS-контент для почтовых клиентов WebKit

Хотя мы могли бы использовать динамические изображения для всех почтовых клиентов, мы решили использовать динамический CSS для прогрессивного улучшения в почтовых клиентах WebKit, таких как собственные почтовые клиенты для iPhone и iPad, чтобы сделать ленту Twitter более реалистичной.

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

Хотя мы обновляли файл CSS каждые 10 секунд, фактическое содержимое электронного письма не могло быть обновлено таким же образом - для работы требовалось полное обновление документа. Пользователям нужно было повторно открыть электронное письмо или обновить веб-версию, чтобы увидеть обновленные твиты. Хотя это и не идеально, на самом деле он оказался очень интересным!

Чтобы заставить работать прямую ленту Twitter, мы использовали HTML и CSS, которые будут отображаться только в клиентах WebKit. Для этого мы создали пустые теги <div> и <span> и использовали свойство CSS content для добавления содержимого имен пользователей Twitter, дескрипторов, временных меток и копии твита.

Вот HTML:

 <div class="tweet"> <div class="tweet-avatar-wrapper"> <div class="avatar"></div> </div> <div class="tweet-wrapper"> <span class="name"></span> <span class="handle"></span> <span class="timestamp"></span> <span class="copy"></span> </div> </div>

Для динамической перезаписи CSS мы использовали внешнюю таблицу стилей, которая обновлялась каждые 10 секунд и включалась в нашу электронную почту следующим образом:

 <link href="http://assets.insights.litmus.com/campaigns/tedc-2015/assets/tweets.css" type="text/css" rel="stylesheet" />

Вот соответствующий 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) { /* Insert CSS here */ }

При использовании пустых <div> для структуры по умолчанию содержимое не отображалось для почтовых клиентов, не относящихся к WebKit. Затем мы вернулись к изображению динамической ленты Twitter для не подписчиков WebKit.

Единственным недостатком использования WebKit-targeting и свойства content является то, что некоторые почтовые клиенты, такие как Airmail и приложение Outlook для iOS и Android, будут поддерживать медиа-запрос, ориентированный на WebKit, но не свойство контента, делая твиты невидимыми. Но, учитывая, что эти почтовые клиенты составляют очень крошечную часть нашей аудитории (менее 1%), это стоило того.

Динамические изображения для почтовых клиентов, не использующих WebKit

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

В письме мы ссылались на динамическое изображение ленты Twitter:

 <img src="/uploads/article/137983/1JLxfeWJnz4EGtoE.jpg" width="600" height="902" border="0" class="webkit-hide" alt="tweet #TEDC15 to show up in the live feed!"/>
tweet # TEDC15, чтобы появиться в прямой трансляции!

Мы создали простую веб-страницу из ленты 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. Вместо этого они увидели восемь последних твитов и специальное сообщение, чтобы просмотреть веб-версию электронного письма для полного эффекта:

gmail-twitter-feed

Как мы построили динамическую интеграцию с 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. В конечном итоге мы решили вообще не разрешать размещать фотографии в твитах в потоке, поскольку это могло стать неуправляемым и более вредным, чем просто текст. Кроме того, невозможно динамически вставлять ссылки через свойство CSS содержимого, поэтому ссылки в каких-либо твитах тоже не работали - они просто отображались как текст. Все твиты были напрямую связаны с потоком твитов # TEDC15.

В качестве последнего средства защиты у нас была возможность полностью отключить результаты поиска в Twitter в реальном времени, вернувшись к отфильтрованному списку избранных твитов из нашей учетной записи Twitter @emaildesignconf. В итоге осталось удалить всего пару плохих твитов. И на данный момент нам вообще не пришлось использовать последний отказоустойчивый переход на избранные твиты - дай пять #emailgeeks!

Ключ? Убедившись, что мы протестировали все сверху вниз. Убедитесь, что ваши дизайны отлично смотрятся в почтовых ящиках, которые подписчики используют с Litmus.

Протестируйте все сверху вниз

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

Попробовать Litmus бесплатно →

Чрезвычайно положительная реакция

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

Некоторые люди сомневались, было ли это на самом деле реальным:

Многие просто смотрели на это:

https://twitter.com/hannahsmeznik/status/601464682180816896

Группа передала привет другим:

https://twitter.com/WebDevRich/status/601669735483363328

Было несколько упоминаний о магии, колдовстве и Гарри Поттере:

https://twitter.com/oompt/status/601495402962116611

За этим последовала масса дурачества и махинаций:

https://twitter.com/MrMoon123/status/601658129349214209

https://twitter.com/capitocapito/status/601458692161019904

В довершение ко всему, умы многих людей были взорваны:

https://twitter.com/adamrandazzo/status/601450740964466688

https://twitter.com/MattRoxo/status/601782360460251137

Посмотрите на производительность

Мы были потрясены результатами этой кампании! Более 53% наших открытий приходилось на почтовый клиент WebKit, поэтому многие из наших пользователей видели прогрессивно улучшенную версию. Всего было опубликовано 750+ твитов о # TEDC15 за первые 24 часа после отправки письма. Кроме того, это электронное письмо помогло привлечь на наш веб-сайт более 4000 новых посетителей и за тот же период времени привлекло более 1000 новых потенциальных клиентов! Не говоря уже о том, что это письмо было самым лучшим из всех, которые мы когда-либо отправляли - почти 60% пользователей просматривали письмо более 18 секунд!

Снимок экрана 26 мая 2015 г., 15: 48.42

Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в комментариях ниже, присоединяйтесь к теме сообщества Litmus или пишите в Твиттере @KevinMandeville и @KevinThompson!

Получайте отличные электронные письма

Не пропустите наше следующее умопомрачительное электронное письмо - подпишитесь, чтобы получать новости и информацию обо всем, что происходит в Litmus.