Come codificare un feed Twitter dinamico dal vivo in e-mail HTML

Pubblicato: 2015-05-26

Quando abbiamo iniziato a definire la logistica per Litmus Live (ex Email Design Conference) nel 2015, sono iniziate le conversazioni su come rendere la nostra e-mail di lancio più grande e migliore di quella dell'anno scorso. Come superiamo la tecnica di sfondo video HTML5 nelle e-mail? Utilizzando contenuti dinamici: un feed Twitter live.

Sì, un feed Twitter in un'e-mail .

I nostri obiettivi erano duplici: generare interesse per la conferenza e utilizzare una tecnica innovativa e stimolante nell'e-mail per farlo. Dopo molte sessioni di brainstorming, abbiamo deciso di utilizzare l'approccio comune del contenuto dinamico, ma con una svolta.

tedc15-e-mail

Visualizza l'email completa nel browser →

Puoi anche visualizzare il codice completo qui e i risultati del test di tornasole qui per vedere come viene visualizzato su oltre 40 client di posta elettronica.

Contenuto dinamico nell'e-mail

Il contenuto dinamico nell'e-mail non è un concetto nuovo. In effetti, viene spesso utilizzato per creare e-mail personalizzate e mirate. Storicamente, il contenuto dinamico è stato implementato rigorosamente attraverso l'uso di testo o immagini e tirato attraverso tag di unione o variabili tramite un ESP. Le immagini dinamiche sono collegate a un singolo file sorgente, che viene sovrascritto dinamicamente per visualizzare una nuova immagine per un determinato sottoinsieme di abbonati in base a parametri di personalizzazione predefiniti. Entrambi questi metodi ti consentono di creare un'esperienza di posta elettronica unica e personalizzata per i tuoi abbonati.

Abbiamo utilizzato immagini dinamiche nella nostra e-mail di lancio per far funzionare il feed dinamico di Twitter su diversi client di posta elettronica popolari. Tuttavia, abbiamo anche utilizzato un metodo completamente nuovo per implementare il contenuto dinamico: CSS dinamico.

Mentre il CSS dinamico funzionava per i client WebKit, dovevamo implementare un fallback appropriato utilizzando immagini dinamiche per i nostri abbonati che utilizzavano client non WebKit. Detto questo, il feed Twitter live è stato supportato (in un modo o nell'altro!) nelle seguenti caselle di posta:

  • Posta AOL
    Immagine dinamica
  • Posta Apple
    CSS dinamico
  • iOS (app di posta elettronica nativa)
    CSS dinamico
  • Prospettive (2000-2013)
    Immagine dinamica
  • Outlook per Mac (2011 e 2016)
    CSS dinamico
  • Outlook.com
    Immagine dinamica
  • Thunderbird
    Immagine dinamica
  • Windows Phone
    Immagine dinamica
  • Windows Mail
    Immagine dinamica
  • Windows Live Mail
    Immagine dinamica
  • Yahoo! posta
    Immagine dinamica

Contenuto CSS dinamico per client di posta WebKit

Sebbene avremmo potuto utilizzare immagini dinamiche per tutti i client di posta elettronica, abbiamo optato per l'utilizzo di CSS dinamici per il miglioramento progressivo nei client di posta WebKit, come i client di posta elettronica nativi di iPhone e iPad, per rendere il feed di Twitter più realistico.

Allora come l'abbiamo fatto funzionare? Utilizzando i quindici tweet più recenti che includevano l'hashtag #TEDC15, abbiamo visualizzato i primi 5 tweet per impostazione predefinita, quindi abbiamo animato i tweet rimanenti uno per uno nell'arco di un minuto. Questo ci ha permesso di far sembrare il flusso dei tweet in tempo reale e ha avuto l'ulteriore vantaggio di mantenere le persone coinvolte più a lungo.

Sebbene abbiamo aggiornato il file CSS ogni 10 secondi, il contenuto effettivo dell'e-mail non poteva essere aggiornato allo stesso modo: era necessario un aggiornamento completo del documento per funzionare. Gli utenti dovevano riaprire l'e-mail o aggiornare la versione web per visualizzare i tweet aggiornati. Sebbene non sia l'ideale, in realtà si è rivelato molto coinvolgente!

Per far funzionare il feed Twitter live, abbiamo utilizzato HTML e CSS che sarebbero stati visualizzati solo nei client WebKit. Per ottenere ciò, abbiamo creato <div> e <span> vuoti e abbiamo utilizzato la proprietà CSS del contenuto per aggiungere il contenuto dei nomi degli utenti di Twitter, degli handle, dei timestamp e della copia del tweet.

Ecco l'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>

Per sovrascrivere dinamicamente il CSS, ci siamo affidati a un foglio di stile esterno che veniva aggiornato ogni 10 secondi e incluso nella nostra email in questo modo:

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

Ecco il CSS corrispondente, con le informazioni del tweet nella proprietà del contenuto:

 #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"; }

Il CSS per i tweet è stato racchiuso in una media query che ci ha permesso di visualizzarlo solo nei client di posta basati su WebKit:

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

Utilizzando <div> vuoti per la struttura predefinita, il contenuto non è stato visualizzato per i client di posta elettronica non WebKit. Siamo quindi tornati a un'immagine del feed twitter dinamico per gli abbonati non WebKit.

L'unico aspetto negativo dell'utilizzo del targeting WebKit e della proprietà del contenuto è che alcuni client di posta elettronica, come Airmail e l'app Outlook per iOS e Android, supportano la media query mirata a WebKit ma non la proprietà del contenuto, rendendo invisibili i tweet. Ma, dato che questi client di posta elettronica sono una parte molto piccola del nostro pubblico (meno dell'1%), questo è stato un sacrificio che valeva la pena fare.

Immagini dinamiche per client di posta elettronica non WebKit

Per i client di posta elettronica non WebKit, abbiamo utilizzato il metodo più tradizionale di visualizzazione dell'immagine dinamica poiché la proprietà del contenuto CSS non è ben supportata nei client di posta elettronica al di fuori di WebKit.

Nell'e-mail, abbiamo fatto riferimento a un'immagine dinamica del feed 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 per apparire nel feed live!

Abbiamo creato una semplice pagina web del solo feed Twitter utilizzando lo stesso HTML e CSS dell'e-mail. Abbiamo semplicemente preso uno screenshot del feed alle stesse dimensioni di 600×902 tramite l'utilità della riga di comando wkhtmltoimage e aggiornato dinamicamente quella stessa immagine ogni 10 secondi.

Poiché stavamo utilizzando HTML e CSS per la visualizzazione WebKit, abbiamo nascosto l'immagine in WebKit per evitare feed duplicati:

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

Con questa tecnica, il feed Twitter live ha funzionato anche nei client più problematici (ehm, Outlook) e ha permesso alla maggior parte dei nostri abbonati di unirsi al divertimento!

L'unico grande svantaggio di questa implementazione di immagini dinamiche è che Gmail memorizza nella cache le sue immagini. Di conseguenza, gli utenti di Gmail non hanno sperimentato il feed Twitter live. Invece, hanno visto otto dei tweet più recenti e un messaggio speciale per visualizzare la versione web dell'e-mail per l'effetto completo:

gmail-twitter-feed

Come abbiamo costruito l'integrazione dinamica di Twitter

Kevin Thompson, il nostro sviluppatore di marketing, era la mente dietro l'effettiva integrazione di Twitter. Ha creato un'applicazione molto semplice costruita sul framework Sinatra e ospitata su Heroku. Puoi controllare il codice e provarlo tu stesso seguendo le istruzioni su Github. Questo test iniziale ha dimostrato che era possibile generare i tweet in CSS, caricare il foglio di stile esterno in una manciata di client di posta elettronica e che quei client potevano recuperare l'ultimo CSS ogni volta che veniva aperta l'e-mail.

Da lì, l'applicazione ha iniziato a diventare leggermente più complessa. Poiché Twitter impone limiti al numero di richieste effettuate all'API, dovevamo essere sicuri di non superare il limite di 150 richieste ogni 15 minuti assegnati per le query di ricerca. Per risolvere questo problema, abbiamo aggiunto un secondo processo alla nostra applicazione Heroku. Questo processo è stato eseguito in background, recuperando i tweet ogni 10 secondi e archiviandoli in una cache. Il processo principale dell'applicazione caricherebbe quindi i tweet dalla cache invece di cercarli direttamente tramite Twitter.

Kevin ha dovuto prendere in considerazione anche la scalabilità e la velocità. Sebbene avessimo una soluzione per rimanere entro i limiti dell'API di Twitter, il nostro singolo server probabilmente non sarebbe stato in grado di elaborare il numero previsto di richieste dagli oltre 200.000 destinatari della nostra e-mail. Per risolvere questo problema abbiamo implementato il CDN di Amazon CloudFront, che ci consente di supportare molte più richieste per le nostre risorse e anche di distribuirle a livello globale per garantire che i file vengano caricati rapidamente per tutto il nostro pubblico. Nella nostra applicazione Sinatra, Kevin ha anche aggiunto le intestazioni Cache-Control, che hanno indicato a CloudFront di far scadere le risorse dopo 10 secondi. Ciò lo ha costretto a richiedere più frequentemente nuovi contenuti dalla nostra applicazione.

Per mantenere i risultati il ​​più aggiornati possibile senza superare i limiti di velocità dell'API di Twitter, abbiamo eseguito il rendering e memorizzato nella cache i file CSS dinamici e immagine ogni 10 secondi con i risultati della nostra ricerca su Twitter.

Per gestire il contenuto dei tweet, sia i termini di ricerca di Twitter che i contenuti/utenti bloccati sono stati controllati utilizzando variabili di ambiente. Sebbene la modifica delle variabili d'ambiente su Heroku significasse che la nostra applicazione avrebbe dovuto riavviarsi, poiché le risorse erano distribuite tramite il CDN e l'applicazione era così semplice, un riavvio richiedeva solo pochi secondi e sarebbe stato completamente impercettibile. Inoltre, poiché Heroku fornisce un'interfaccia utente per la modifica delle variabili di ambiente, il nostro team di marketing è stato in grado di apportare modifiche ai termini di ricerca e bloccare i contenuti se necessario.

Se questi metodi ti sembrano troppo complicati o dispendiosi in termini di tempo, ci sono aziende di terze parti come Movable Ink, LiveClicker, PowerInbox e Avari specializzate in contenuti dinamici per la posta elettronica.

Filtraggio dei tweet errati

Una grande preoccupazione per noi durante l'incorporazione di un feed twitter dinamico dal vivo è stata la rinuncia al controllo del contenuto della nostra e-mail, con il risultato che alcuni "tweet errati" sono apparsi nello stream. Alcune persone su Twitter lo hanno fatto notare:

Allo stesso tempo, volevamo fornire un feed di tweet il più vicino possibile a un feed grezzo e non filtrato per mantenere il fattore "wow". La nostra ipotesi era che i tweet errati sarebbero stati uno scenario limite e sarebbero stati eliminati dal feed attraverso un'attività costante. Quindi, inizialmente ci siamo affidati ai filtri di ricerca di Twitter per eliminare i contenuti meno che ideali.

Ma volevamo disporre di filtri aggiuntivi, quindi ci siamo anche dati la possibilità di bloccare nomi utente e stringhe di testo specifici dopo aver recuperato i risultati da Twitter. Alla fine abbiamo deciso di non consentire affatto la presenza di foto di tweet nello stream, poiché ciò avrebbe potuto diventare indisciplinato e più dannoso del semplice testo. Inoltre, è impossibile iniettare dinamicamente collegamenti tramite la proprietà CSS del contenuto, quindi nessun collegamento in nessun tweet ha funzionato: sono stati semplicemente visualizzati come testo. Tutti i tweet sono stati collegati direttamente al flusso di tweet #TEDC15.

Come ultima sicurezza, abbiamo avuto la possibilità di disabilitare completamente i risultati di ricerca di Twitter in tempo reale, ricorrendo a un elenco filtrato di tweet preferiti dal nostro account Twitter @emaildesignconf. Alla fine, c'erano solo un paio di cattivi tweet che dovevano essere rimossi. E, per il momento, non abbiamo nemmeno dovuto usare l'ultimo tentativo di sicurezza di passare ai tweet preferiti: il cinque #emailgeeks!

Il tasto? Assicurandoci di aver testato tutto dall'alto verso il basso. Assicurati che i tuoi progetti abbiano un bell'aspetto nelle caselle di posta che i tuoi abbonati usano con Litmus.

Prova tutto dall'alto verso il basso

Visualizza in anteprima le e-mail su 50+ e tira un sospiro di sollievo quando tenti anche le imprese e-mail più folli, come un feed Twitter in diretta.

Prova il tornasole →

Una reazione straordinariamente positiva

Il nostro pubblico ha sicuramente adorato questa implementazione divertente e unica nelle e-mail. In realtà ha reso l'e-mail un'esperienza interattiva e comunitaria a cui tutti potevano partecipare. Le reazioni di Twitter sono state impagabili e hanno persino seguito alcuni temi simili.

Alcune persone si sono chiesti se fosse effettivamente reale:

Molti lo fissavano:

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

Un gruppo ha salutato gli altri:

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

C'erano diverse menzioni di magia, stregoneria e Harry Potter:

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

Ne seguì anche una sfilza di sciocchezze e imbrogli:

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

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

Per finire, le menti di molte persone sono rimaste senza fiato:

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

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

Uno sguardo alle prestazioni

Siamo rimasti stupefatti dai risultati di questa campagna! Oltre il 53% delle nostre aperture è avvenuto in un client di posta WebKit, quindi molti dei nostri utenti hanno visto la versione progressivamente migliorata. In totale, ci sono stati oltre 750 tweet su #TEDC15 nelle prime 24 ore dopo l'invio dell'e-mail. Inoltre, l'e-mail ha aiutato a portare oltre 4.000 nuovi visitatori al nostro sito Web e ha generato oltre 1.000 nuovi potenziali clienti nello stesso lasso di tempo! Per non parlare del fatto che questa e-mail ha visto il miglior coinvolgimento che abbiamo visto da qualsiasi e-mail che abbiamo mai inviato: quasi il 60% degli utenti ha visualizzato l'e-mail per oltre 18 secondi!

Schermata 2015-05-26 at 3.48.42 PM

Se hai domande, non esitare a chiedere nei commenti qui sotto, unisciti al thread della community di Litmus sull'argomento o twitta @KevinMandeville e @KevinThompson!

Ricevi email fantastiche

Non perdere la nostra prossima e-mail strabiliante: iscriviti per ricevere notizie e informazioni su tutto ciò che accade a Litmus.