Cum să codificați un flux Twitter dinamic în direct în e-mail HTML

Publicat: 2015-05-26

Pe măsură ce am început să concentrăm logistica pentru Litmus Live (fostă Conferința de design de e-mail) în 2015, au început conversațiile despre a face e-mailul nostru de lansare mai mare și mai bun decât cel de anul trecut. Cum promovăm tehnica de fundal video HTML5 în e-mail? Prin utilizarea conținutului dinamic: un flux Twitter live.

Da, un feed Twitter într-un e-mail .

Obiectivele noastre au fost duble: să generăm interes pentru conferință și să folosim o tehnică inovatoare – și inspiratoare – în e-mail pentru a face acest lucru. După multe sesiuni de brainstorming, am decis să folosim abordarea comună a conținutului dinamic, dar cu o întorsătură.

tedc15-email

Vizualizați e-mailul complet în browser →

De asemenea, puteți vedea codul complet aici și rezultatele testului Litmus aici pentru a vedea cum s-a afișat pe peste 40 de clienți de e-mail.

Conținut dinamic în e-mail

Conținutul dinamic din e-mail nu este un concept nou. De fapt, este frecvent folosit pentru a crea e-mailuri personalizate, direcționate. Din punct de vedere istoric, conținutul dinamic a fost implementat strict prin utilizarea textului sau a imaginilor și tras prin etichete sau variabile de îmbinare printr-un ESP. Imaginile dinamice sunt legate la un singur fișier sursă, care este suprascris dinamic pentru a afișa o nouă imagine pentru un anumit subset de abonați pe baza parametrilor de personalizare predefiniți. Ambele metode vă permit să creați o experiență de e-mail unică și personalizată pentru abonații dvs.

Am folosit imagini dinamice în e-mailul nostru de lansare pentru a face ca fluxul Twitter dinamic live să funcționeze pe mai mulți clienți de e-mail populari. Cu toate acestea, am folosit și o metodă complet nouă pentru a implementa conținut dinamic: CSS dinamic.

În timp ce CSS-ul dinamic a funcționat pentru clienții WebKit, trebuia să implementăm o soluție de rezervă adecvată folosind imagini dinamice pentru abonații noștri care utilizează clienți non-WebKit. Acestea fiind spuse, fluxul Twitter live a fost suportat (într-un fel sau altul!) în următoarele căsuțe de e-mail:

  • AOL Mail
    Imagine dinamică
  • Apple Mail
    CSS dinamic
  • iOS (aplicație nativă de e-mail)
    CSS dinamic
  • Perspective (2000-2013)
    Imagine dinamică
  • Outlook pentru Mac (2011 și 2016)
    CSS dinamic
  • Outlook.com
    Imagine dinamică
  • Thunderbird
    Imagine dinamică
  • Windows Phone
    Imagine dinamică
  • Windows Mail
    Imagine dinamică
  • Windows Live Mail
    Imagine dinamică
  • Yahoo! Poștă
    Imagine dinamică

Conținut CSS dinamic pentru clienții de e-mail WebKit

Deși am fi putut folosi imagini dinamice pentru toți clienții de e-mail, am optat să folosim CSS dinamic pentru îmbunătățirea progresivă a clienților de e-mail WebKit, cum ar fi clienții de e-mail nativi pentru iPhone și iPad, pentru a face feedul Twitter să pară mai realist.

Deci, cum am făcut-o să funcționeze? Folosind cele mai recente cincisprezece tweet-uri care au inclus hashtag-ul #TEDC15, am afișat primele 5 tweet-uri în mod implicit, apoi am animat tweet-urile rămase unul câte unul pe parcursul unui minut. Acest lucru ne-a permis să facem fluxul de tweet să se simtă în timp real și a avut avantajul suplimentar de a menține oamenii implicați mai mult timp.

În timp ce am actualizat fișierul CSS la fiecare 10 secunde, conținutul real din e-mail nu a putut fi actualizat în același mod - a fost nevoie de o reîmprospătare completă a documentului pentru a funcționa. Utilizatorii trebuiau să redeschidă e-mailul sau să reîmprospăteze versiunea web pentru a vedea tweet-urile actualizate. Deși nu este ideal, s-a dovedit de fapt a fi foarte captivant!

Pentru ca fluxul twitter live să funcționeze, am folosit HTML și CSS care s-ar afișa numai în clienții WebKit. Pentru a realiza acest lucru, am creat <div> și <span> goale și am folosit proprietatea CSS de conținut pentru a adăuga conținutul numelor utilizatorilor Twitter, mânerelor, marcajelor de timp și copiei tweet-ului.

Iată codul 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>

Pentru a suprascrie în mod dinamic CSS-ul, ne-am bazat pe o foaie de stil externă care a fost actualizată la fiecare 10 secunde și inclusă în e-mailul nostru astfel:

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

Iată CSS-ul corespunzător, cu informațiile tweet în proprietatea conținutului:

 #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-ul pentru tweet-uri a fost împachetat într-o interogare media care ne-a permis să-l afișăm numai în clienții de e-mail bazați pe WebKit:

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

Folosind <div>-uri goale pentru structura implicită, conținutul nu a apărut pentru clienții de e-mail non-WebKit. Am revenit apoi la o imagine a fluxului de Twitter dinamic pentru abonații care nu fac parte din WebKit.

Singurul dezavantaj al utilizării direcționării WebKit și a proprietății de conținut este că unii clienți de e-mail, cum ar fi Airmail și aplicația Outlook iOS și Android, ar accepta interogarea media vizată de WebKit, dar nu și proprietatea conținutului, făcând tweet-urile invizibile. Dar, având în vedere că acești clienți de e-mail reprezintă o parte foarte mică a audienței noastre (mai puțin de 1%), acesta a fost un sacrificiu care merită făcut.

Imagini dinamice pentru clienții de e-mail non-WebKit

Pentru clienții de e-mail non-WebKit, am folosit metoda mai tradițională de afișare a imaginii dinamice, deoarece proprietatea de conținut CSS nu este bine acceptată în clienții de e-mail din afara WebKit.

În e-mail, am făcut referire la o imagine dinamică a fluxului 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 pentru a apărea în fluxul live!

Am creat o pagină web simplă din feedul Twitter folosind același HTML și CSS din e-mail. Pur și simplu am făcut o captură de ecran a fluxului la aceleași dimensiuni de 600×902 prin utilitarul de linie de comandă wkhtmltoimage și am actualizat dinamic aceeași imagine la fiecare 10 secunde.

Deoarece folosim HTML și CSS pentru vizualizarea WebKit, am ascuns imaginea în WebKit pentru a evita fluxurile duplicate:

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

Cu această tehnică, fluxul Twitter live a funcționat chiar și la cei mai supărați clienți (ahem, Outlook) și a permis majorității abonaților noștri să se alăture distracției!

Singurul dezavantaj major al acestei implementări de imagini dinamice este că Gmail își păstrează imaginile în cache. Drept urmare, utilizatorii Gmail nu au experimentat fluxul Twitter live. În schimb, au văzut opt ​​dintre cele mai recente tweet-uri și un mesaj special pentru a vedea versiunea web a e-mailului pentru efectul complet:

gmail-twitter-feed

Cum am construit integrarea dinamică a Twitter

Kevin Thompson, dezvoltatorul nostru de marketing, a fost creierul din spatele integrării propriu-zise Twitter. A creat o aplicație foarte simplă construită pe framework-ul Sinatra și găzduită pe Heroku. Puteți verifica codul și încercați singuri urmând instrucțiunile de pe Github. Acest test inițial a dovedit că este posibil să se genereze tweet-urile în CSS, să se încarce foaia de stil externă într-o mână de clienți de e-mail și că acești clienți ar putea prelua cel mai recent CSS de fiecare dată când e-mailul a fost deschis.

De acolo, aplicația a început să devină puțin mai complexă. Deoarece Twitter impune limite pentru numărul de solicitări pe care le faci către API, trebuia să ne asigurăm că nu vom depăși limita de 150 de solicitări pe 15 minute alocate interogărilor de căutare. Pentru a rezolva această problemă, am adăugat un al doilea proces la aplicația noastră Heroku. Acest proces a rulat în fundal, preluând tweet-uri la fiecare 10 secunde și stocându-le într-o cache. Procesul principal de aplicare ar încărca apoi tweet-urile din cache, în loc să le caute direct prin Twitter.

De asemenea, Kevin a trebuit să ia în considerare scalabilitatea și viteza. Deși aveam o soluție pentru a rămâne în limitele API-ului Twitter, serverul nostru unic probabil nu ar fi capabil să proceseze numărul așteptat de solicitări de la cei peste 200.000 de destinatari ai e-mailului nostru. Pentru a rezolva acest lucru, am implementat Amazon CloudFront CDN, permițându-ne să acceptăm mult mai multe solicitări pentru activele noastre și, de asemenea, să le distribuim la nivel global pentru a ne asigura că fișierele sunt încărcate rapid pentru întregul nostru public. În aplicația noastră Sinatra, Kevin a adăugat și anteturi Cache-Control, care au instruit CloudFront să expire activele după 10 secunde. Acest lucru a forțat-o să solicite mai des conținut nou din aplicația noastră.

Pentru a menține rezultatele cât mai proaspete, fără a depăși limitele de rată ale API-ului Twitter, am randat și stocat în cache fișierele CSS și imagine dinamice la fiecare 10 secunde cu rezultatele căutării noastre pe Twitter.

Pentru a gestiona conținutul tweet-urilor, atât termenii de căutare Twitter, cât și conținutul/utilizatorii blocați au fost controlați folosind variabile de mediu. Deși schimbarea variabilelor de mediu pe Heroku a însemnat că aplicația noastră ar trebui să se repornească, deoarece activele erau distribuite prin CDN și aplicația era atât de simplă, o repornire a durat doar câteva secunde și ar fi complet inobservabilă. De asemenea, deoarece Heroku oferă o interfață de utilizator pentru editarea variabilelor de mediu, echipa noastră de marketing a reușit să modifice termenii de căutare și să blocheze conținutul după cum este necesar.

Dacă aceste metode vi se par prea complicate sau consumatoare de timp, există companii terțe precum Movable Ink, LiveClicker, PowerInbox și Avari care sunt specializate în conținut dinamic pentru e-mail.

Filtrarea tweeturilor proaste

O mare îngrijorare pentru noi, în timp ce încorporăm un flux de Twitter dinamic în direct, a fost renunțarea la controlul conținutului e-mailului nostru, ceea ce a dus la apariția unor „twe-uri proaste” în flux. Câțiva oameni de pe Twitter au subliniat acest lucru:

În același timp, am dorit să oferim un flux de tweet-uri cât mai aproape de un flux brut, nefiltrat, pentru a menține factorul „wow”. Ipoteza noastră a fost că tweet-urile proaste ar fi un scenariu marginal și ar fi eliminate din flux prin activitate constantă. Așadar, ne-am bazat inițial pe filtrele de căutare ale Twitter pentru a elimina conținutul mai puțin decât ideal.

Dar, am vrut să avem filtre suplimentare, așa că ne-am oferit și posibilitatea de a bloca anumite nume de utilizator și șiruri de text după preluarea rezultatelor de pe Twitter. În cele din urmă, ne-am hotărât să nu permitem deloc fotografiile pe Twitter să fie în flux, deoarece ar fi putut deveni indisciplinat și mai dăunător decât doar textul. De asemenea, este imposibil să injectați în mod dinamic link-uri prin proprietatea CSS de conținut, așa că nici niciun link din niciun tweet nu a funcționat - au fost pur și simplu afișate ca text. Toate tweet-urile au fost legate direct la fluxul de tweet #TEDC15.

Ca o ultimă siguranță, am avut opțiunea de a dezactiva în întregime rezultatele căutării Twitter în timp real, revenind la o listă filtrată de tweet-uri preferate din contul nostru Twitter @emaildesignconf. În cele din urmă, au fost doar câteva tweet-uri proaste care trebuiau eliminate. Și, deocamdată, nici nu am fost nevoiți să folosim sistemul de siguranță final de a trece la tweet-urile preferate - cinci #emailgeeks!

Cheia? Asigurându-ne că am testat totul de sus până jos. Asigurați-vă că desenele dvs. arată grozav în căsuțele de e-mail pe care le folosesc abonații dvs. cu Litmus.

Testează totul de sus până jos

Previzualizează e-mailurile pe 50+ și respiră ușurat atunci când încerci chiar și cele mai nebunești fapte prin e-mail, cum ar fi un flux Twitter live.

Încercați Litmus gratuit →

O reacție copleșitor de pozitivă

Publicul nostru a iubit cu siguranță această implementare distractivă și unică în e-mail. De fapt, a făcut din e-mail o experiență interactivă și comună la care ar putea participa toată lumea. Reacțiile de la Twitter au fost neprețuite și chiar au urmat câteva teme similare.

Unii oameni s-au întrebat dacă este cu adevărat real:

Mulți s-au uitat la el:

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

O grămadă i-a salutat pe alții:

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

Au existat mai multe mențiuni despre magie, vrăjitorie și Harry Potter:

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

Au urmat și o grămadă de prostii și șmecherii:

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

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

În plus, mulți oameni au fost uimiți:

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

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

O privire asupra performanței

Am fost uimiti de rezultatele acestei campanii! Peste 53% dintre deschiderile noastre au venit într-un client de e-mail WebKit, așa că mulți dintre utilizatorii noștri au văzut versiunea îmbunătățită progresiv. În total, au existat peste 750 de tweet-uri despre #TEDC15 în primele 24 de ore de la trimiterea e-mailului. În plus, e-mailul a ajutat la atragerea a peste 4.000 de vizitatori noi pe site-ul nostru web și a generat peste 1.000 de prospecti noi în aceeași perioadă de timp! Ca să nu mai vorbim de faptul că acest e-mail a înregistrat cea mai bună implicare pe care am văzut-o din orice e-mail pe care l-am trimis vreodată – aproape 60% dintre utilizatori au văzut e-mailul timp de peste 18 secunde!

Captură de ecran 2015-05-26 la 15.48.42

Dacă aveți întrebări, vă rugăm să nu ezitați să întrebați în comentariile de mai jos, să vă alăturați firului comunității Litmus pe acest subiect sau să scrieți pe Twitter @KevinMandeville și @KevinThompson!

Primiți e-mailuri grozave

Nu ratați următorul nostru e-mail uluitor - înscrieți-vă pentru a primi știri și informații despre tot ce se întâmplă la Litmus.