Jak zakodować dynamiczny kanał Twittera na żywo w wiadomości e-mail w formacie HTML?

Opublikowany: 2015-05-26

Gdy w 2015 r. zaczęliśmy opracowywać logistykę dla Litmus Live (dawniej Email Design Conference), rozpoczęły się rozmowy o tym, aby nasz e-mail startowy był większy i lepszy niż w zeszłym roku. Jak możemy polepszyć technikę tła wideo HTML5 w wiadomości e-mail? Używając treści dynamicznych: kanał na żywo na Twitterze.

Tak, kanał Twittera w e-mailu .

Nasze cele były dwojakie: wzbudzić zainteresowanie konferencją i wykorzystać w tym celu innowacyjną – i inspirującą – technikę w wiadomości e-mail. Po wielu sesjach burzy mózgów zdecydowaliśmy się na wspólne podejście do treści dynamicznych, ale z niespodzianką.

tedc15-e-mail

Zobacz pełną pocztę w przeglądarce →

Możesz również wyświetlić pełny kod tutaj i wyniki testu Litmus tutaj, aby zobaczyć, jak wyświetla się w ponad 40 klientach poczty e-mail.

Treść dynamiczna w wiadomości e-mail

Treść dynamiczna w wiadomości e-mail nie jest nową koncepcją. W rzeczywistości jest często używany do tworzenia spersonalizowanych, ukierunkowanych wiadomości e-mail. Historycznie zawartość dynamiczna była implementowana wyłącznie za pomocą tekstu lub obrazów i przeciągana przez scalanie tagów lub zmiennych za pośrednictwem ESP. Obrazy dynamiczne są połączone z pojedynczym plikiem źródłowym, który jest dynamicznie nadpisywany w celu wyświetlenia nowego obrazu dla określonego podzbioru subskrybentów na podstawie wstępnie zdefiniowanych parametrów personalizacji. Obie te metody umożliwiają stworzenie unikalnego, spersonalizowanego doświadczenia e-mailowego dla subskrybentów.

Użyliśmy dynamicznych obrazów w naszym e-mailu startowym, aby dynamiczny kanał Twittera na żywo działał w kilku popularnych klientach poczty e-mail. Jednak do implementacji treści dynamicznych zastosowaliśmy zupełnie nową metodę: dynamiczny CSS.

Chociaż dynamiczny CSS działał dla klientów WebKit, musieliśmy wdrożyć odpowiednią rezerwę za pomocą dynamicznych obrazów dla naszych subskrybentów korzystających z klientów innych niż WebKit. Biorąc to pod uwagę, kanał Twittera na żywo był obsługiwany (w taki czy inny sposób!) w następujących skrzynkach odbiorczych:

  • Poczta AOL
    Obraz dynamiczny
  • Poczta Apple
    Dynamiczny CSS
  • iOS (natywna aplikacja e-mail)
    Dynamiczny CSS
  • Perspektywy (2000-2013)
    Obraz dynamiczny
  • Outlook dla komputerów Mac (2011 i 2016)
    Dynamiczny CSS
  • Outlook.com
    Obraz dynamiczny
  • Thunderbird
    Obraz dynamiczny
  • telefon Windows
    Obraz dynamiczny
  • Poczta systemu Windows
    Obraz dynamiczny
  • Poczta usługi Windows Live
    Obraz dynamiczny
  • Wieśniak! Poczta
    Obraz dynamiczny

Dynamiczna treść CSS dla klientów poczty e-mail WebKit

Chociaż mogliśmy użyć dynamicznych obrazów dla wszystkich klientów poczty e-mail, zdecydowaliśmy się użyć dynamicznego CSS w celu stopniowego ulepszania klientów poczty e-mail WebKit, takich jak natywne klienty poczty e-mail na iPhone'a i iPada, aby kanał Twittera był bardziej realistyczny.

Jak więc sprawiliśmy, że to działało? Korzystając z piętnastu najnowszych tweetów, które zawierały hashtag #TEDC15, domyślnie wyświetlaliśmy pierwsze 5 tweetów, a następnie animowaliśmy pozostałe tweety jeden po drugim w ciągu minuty. To pozwoliło nam sprawić, że streamowanie tweetów było odczuwalne w czasie rzeczywistym i miało dodatkową zaletę, że ludzie dłużej byli zaangażowani.

Chociaż aktualizowaliśmy plik CSS co 10 sekund, rzeczywista zawartość wiadomości e-mail nie mogła być aktualizowana w ten sam sposób — wymagało to całkowitego odświeżenia dokumentu, aby działać. Użytkownicy musieli ponownie otworzyć wiadomość e-mail lub odświeżyć wersję internetową, aby zobaczyć zaktualizowane tweety. Chociaż nie jest to idealne rozwiązanie, okazało się, że jest bardzo wciągające!

Aby kanał Twittera na żywo działał, użyliśmy HTML i CSS, które wyświetlały się tylko w klientach WebKit. Aby to osiągnąć, utworzyliśmy puste znaczniki <div> i <span> oraz użyliśmy właściwości content CSS, aby dodać zawartość nazw użytkowników Twittera, uchwytów, znaczników czasu i kopii tweeta.

Oto kod 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>

Aby dynamicznie nadpisywać CSS, polegaliśmy na zewnętrznym arkuszu stylów, który był aktualizowany co 10 sekund i dołączany do naszego e-maila, jak na przykład:

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

Oto odpowiedni kod CSS, z informacjami o tweecie we właściwości 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 dla tweetów został opakowany w zapytanie o media, które pozwoliło nam wyświetlić go tylko w klientach pocztowych opartych na WebKit:

 @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }

Używając pustych <div> jako domyślnej struktury, zawartość nie pojawiała się w klientach pocztowych innych niż WebKit. Następnie wróciliśmy do obrazu dynamicznego kanału Twittera dla subskrybentów innych niż WebKit.

Jedyną wadą korzystania z kierowania WebKit i właściwości zawartości jest to, że niektóre klienty poczty e-mail, takie jak poczta lotnicza oraz aplikacja Outlook na systemy iOS i Android, obsługują zapytanie o media ukierunkowane na WebKit, ale nie właściwość zawartości, co sprawia, że ​​tweety są niewidoczne. Ale biorąc pod uwagę, że ci klienci poczty e-mail stanowią bardzo niewielką część naszych odbiorców (mniej niż 1%), było to poświęcenie warte poniesienia.

Dynamiczne obrazy dla klientów poczty e-mail innych niż WebKit

W przypadku klientów poczty e-mail innych niż WebKit użyliśmy bardziej tradycyjnej metody wyświetlania obrazu dynamicznego, ponieważ właściwość CSS content nie jest dobrze obsługiwana w klientach poczty e-mail poza WebKit.

W e-mailu odnieśliśmy się do dynamicznego obrazu kanału Twittera:

 <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, aby pojawić się na żywo!

Stworzyliśmy prostą stronę internetową z samego kanału Twittera, używając tego samego kodu HTML i CSS z wiadomości e-mail. Po prostu zrobiliśmy zrzut ekranu kanału o tych samych wymiarach 600×902 za pomocą narzędzia wiersza poleceń wkhtmltoimage i dynamicznie aktualizowaliśmy ten sam obraz co 10 sekund.

Ponieważ używaliśmy HTML i CSS w widoku WebKit, ukryliśmy obraz w WebKit, aby uniknąć zduplikowanych kanałów:

 @media screen and (-webkit-min-device-pixel-ratio: 0) { .webkit-hide { display: none; } }

Dzięki tej technice kanał Twittera na żywo działał nawet w najbardziej kłopotliwych klientach (ahem, Outlook) i pozwolił większości naszych subskrybentów dołączyć do zabawy!

Jedyną poważną wadą tej dynamicznej implementacji obrazów jest to, że Gmail buforuje swoje obrazy. W rezultacie użytkownicy Gmaila nie mieli dostępu do kanału Twittera na żywo. Zamiast tego zobaczyli osiem najnowszych tweetów i specjalną wiadomość, aby wyświetlić wersję internetową e-maila, aby uzyskać pełny efekt:

gmail-twitter-feed

Jak zbudowaliśmy dynamiczną integrację z Twitterem

Kevin Thompson, nasz twórca marketingu, był mózgiem właściwej integracji Twittera. Stworzył bardzo prostą aplikację zbudowaną na frameworku Sinatra i hostowaną na Heroku. Możesz sprawdzić kod i wypróbować go samodzielnie, postępując zgodnie z instrukcjami na Github. Ten wstępny test wykazał, że można wygenerować tweety w CSS, załadować zewnętrzny arkusz stylów do kilku klientów poczty e-mail i że klienci mogą pobrać najnowszy CSS za każdym razem, gdy wiadomość zostanie otwarta.

Od tego momentu aplikacja zaczęła być nieco bardziej złożona. Ponieważ Twitter nakłada ograniczenia na liczbę żądań wysyłanych do interfejsu API, musieliśmy mieć pewność, że nie przekroczymy limitu 150 żądań na 15 minut przydzielonych na zapytania wyszukiwania. Aby rozwiązać ten problem, dodaliśmy drugi proces do naszej aplikacji Heroku. Ten proces działał w tle, pobierając tweety co 10 sekund i przechowując je w pamięci podręcznej. Główny proces aplikacji ładuje następnie tweety z pamięci podręcznej zamiast szukać ich bezpośrednio przez Twittera.

Kevin musiał również wziąć pod uwagę skalowalność i szybkość. Chociaż mieliśmy rozwiązanie pozwalające utrzymać się w granicach API Twittera, nasz pojedynczy serwer prawdopodobnie nie byłby w stanie przetworzyć oczekiwanej liczby żądań od ponad 200 000 odbiorców naszego e-maila. Aby rozwiązać ten problem, wdrożyliśmy Amazon CloudFront CDN, co pozwala nam obsługiwać znacznie więcej żądań dotyczących naszych zasobów, a także rozpowszechniać je globalnie, aby zapewnić szybkie ładowanie plików dla całej naszej publiczności. W naszej aplikacji Sinatra Kevin dodał również nagłówki Cache-Control, które nakazywały CloudFront wygaśnięcie zasobów po 10 sekundach. To zmusiło go do częstszego żądania nowej zawartości z naszej aplikacji.

Aby wyniki były jak najbardziej aktualne bez przekraczania limitów szybkości interfejsu API Twittera, co 10 sekund renderowaliśmy i buforowaliśmy dynamiczne pliki CSS i obrazy z wynikami naszego wyszukiwania na Twitterze.

Aby zarządzać treścią tweetów, zarówno wyszukiwane hasła na Twitterze, jak i zablokowane treści/użytkownicy byli kontrolowani za pomocą zmiennych środowiskowych. Chociaż zmiana zmiennych środowiskowych w Heroku oznaczała, że ​​nasza aplikacja będzie musiała zostać zrestartowana, ponieważ zasoby były dystrybuowane przez CDN, a aplikacja była tak prosta, ponowne uruchomienie trwało tylko kilka sekund i byłoby całkowicie niezauważalne. Ponadto, ponieważ Heroku zapewnia interfejs użytkownika do edycji zmiennych środowiskowych, nasz zespół marketingowy był w stanie wprowadzić zmiany w wyszukiwanych hasłach i w razie potrzeby zablokować treść.

Jeśli te metody wydają Ci się zbyt skomplikowane lub czasochłonne, istnieją firmy zewnętrzne, takie jak Movable Ink, LiveClicker, PowerInbox i Avari, które specjalizują się w dynamicznej zawartości do wiadomości e-mail.

Filtrowanie złych tweetów

Dużym problemem dla nas podczas włączania dynamicznego kanału Twitter na żywo było zrzeczenie się kontroli nad treścią naszego e-maila, co skutkowało pojawieniem się w strumieniu „złych tweetów”. Kilka osób na Twitterze zwróciło na to uwagę:

Jednocześnie chcieliśmy, aby tweety były jak najbardziej zbliżone do surowego, niefiltrowanego strumienia tweetów, aby utrzymać efekt „wow”. Nasza hipoteza była taka, że ​​złe tweety byłyby scenariuszem skrajnym i zostałyby usunięte z kanału poprzez ciągłą aktywność. Dlatego początkowo polegaliśmy na filtrach wyszukiwania Twittera, aby wyeliminować mniej niż idealne treści.

Ale chcieliśmy mieć dodatkowe filtry, więc daliśmy sobie również możliwość blokowania określonych nazw użytkowników i ciągów tekstowych po pobraniu wyników z Twittera. Ostatecznie zdecydowaliśmy się nie zezwalać na umieszczanie zdjęć z tweetów w strumieniu, ponieważ mogłoby to stać się niesforne i bardziej szkodliwe niż tylko tekst. Ponadto niemożliwe jest dynamiczne wstrzykiwanie linków za pomocą właściwości CSS content, więc żadne linki w żadnych tweetach również nie działały — były po prostu wyświetlane jako tekst. Wszystkie tweety zostały połączone bezpośrednio ze strumieniem tweetów #TEDC15.

Jako ostateczne zabezpieczenie mieliśmy możliwość całkowitego wyłączenia wyników wyszukiwania na Twitterze w czasie rzeczywistym, powracając do przefiltrowanej listy ulubionych tweetów z naszego konta @emaildesignconf na Twitterze. W końcu było tylko kilka złych tweetów, które należało usunąć. I jak dotąd nie musieliśmy w ogóle korzystać z ostatniego zabezpieczenia, jakim jest przejście na ulubione tweety — przybij piątkę #emailgeeks!

Klucz? Upewniając się, że przetestowaliśmy wszystko od góry do dołu. Upewnij się, że Twoje projekty wyglądają świetnie w skrzynkach odbiorczych używanych przez subskrybentów z Litmusem.

Przetestuj wszystko od góry do dołu

Przeglądaj wiadomości e-mail w wieku 50+ i odetchnij z ulgą, próbując nawet najbardziej szalonych wyczynów e-mail, takich jak kanał na Twitterze na żywo.

Wypróbuj Litmus za darmo →

Zdecydowanie pozytywna reakcja

Nasi odbiorcy zdecydowanie pokochali tę zabawną i wyjątkową implementację w e-mailu. Dzięki temu e-mail stał się interaktywnym i wspólnym doświadczeniem, w którym każdy mógł uczestniczyć. Reakcje z Twittera były bezcenne, a nawet dotyczyły podobnych tematów.

Niektórzy pytali, czy to rzeczywiście prawda:

Wielu po prostu się na to gapiło:

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

Kilka osób przywitało się z innymi:

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

Było kilka wzmianek o magii, czarach i Harrym Potterze:

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

Nastąpiło też mnóstwo wygłupów i wybryków:

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

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

Na domiar złego, wiele umysłów zostało zdmuchniętych:

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

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

Spojrzenie na wydajność

Byliśmy zachwyceni wynikami tej kampanii! Ponad 53% naszych otwarć pochodziło z klienta poczty e-mail WebKit, więc wielu naszych użytkowników widziało stopniowo ulepszaną wersję. W sumie w ciągu pierwszych 24 godzin po wysłaniu e-maila pojawiło się ponad 750 tweetów na temat #TEDC15. Dodatkowo wiadomość e-mail pomogła przyciągnąć ponad 4000 nowych odwiedzających do naszej witryny i wygenerować ponad 1000 nowych perspektyw w tym samym czasie! Nie wspominając o tym, że ten e-mail odnotował największe zaangażowanie, jakie kiedykolwiek wysłaliśmy — prawie 60% użytkowników obejrzało go przez ponad 18 sekund!

Zrzut ekranu 26.05.2015 o godzinie 15.48.42

Jeśli masz jakieś pytania, nie wahaj się ich zadać w komentarzach poniżej, dołącz do wątku Litmus Community na ten temat lub tweetuj @KevinMandeville i @KevinThompson!

Otrzymuj niesamowite e-maile

Nie przegap naszego następnego oszałamiającego e-maila — zarejestruj się, aby otrzymywać wiadomości i informacje o wszystkim, co dzieje się w Litmus.