So codieren Sie einen dynamischen Live-Twitter-Feed in HTML-E-Mail

Veröffentlicht: 2015-05-26

Als wir 2015 damit begannen, die Logistik für Litmus Live (ehemals Email Design Conference) festzunageln, begannen Gespräche darüber, unsere Einführungs-E-Mail größer und besser zu gestalten als im letzten Jahr. Wie verbessern wir die HTML5-Videohintergrundtechnik in E-Mails? Durch die Verwendung dynamischer Inhalte: ein Live-Twitter-Feed.

Ja, ein Twitter-Feed in einer E-Mail .

Unsere Ziele waren zweierlei: Interesse an der Konferenz zu wecken und dafür eine innovative – und inspirierende – Technik in der E-Mail zu nutzen. Nach vielen Brainstorming-Sitzungen haben wir uns für den üblichen Ansatz dynamischer Inhalte entschieden, aber mit einer Wendung.

tedc15-E-Mail

Vollständige E-Mail im Browser anzeigen →

Sie können auch den vollständigen Code hier und die Ergebnisse des Litmus-Tests hier anzeigen, um zu sehen, wie er in über 40 E-Mail-Clients angezeigt wird.

Dynamischer Inhalt in E-Mails

Dynamischer Inhalt in E-Mails ist kein neues Konzept. Tatsächlich wird es häufig verwendet, um personalisierte, zielgerichtete E-Mails zu erstellen. In der Vergangenheit wurden dynamische Inhalte ausschließlich durch die Verwendung von Text oder Bildern implementiert und über ein ESP durch Merge-Tags oder -Variablen gezogen. Dynamische Bilder werden mit einer einzigen Quelldatei verknüpft, die dynamisch überschrieben wird, um ein neues Bild für eine bestimmte Untergruppe von Abonnenten basierend auf vordefinierten Personalisierungsparametern anzuzeigen. Beide Methoden ermöglichen es Ihnen, ein einzigartiges, personalisiertes E-Mail-Erlebnis für Ihre Abonnenten zu schaffen.

Wir haben dynamische Bilder in unserer Einführungs-E-Mail verwendet, damit der dynamische Live-Twitter-Feed für mehrere beliebte E-Mail-Clients funktioniert. Wir haben jedoch auch eine völlig neue Methode verwendet, um dynamische Inhalte zu implementieren: dynamisches CSS.

Während das dynamische CSS für WebKit-Clients funktionierte, mussten wir für unsere Abonnenten, die Nicht-WebKit-Clients verwenden, einen geeigneten Fallback mit dynamischen Bildern implementieren. Davon abgesehen wurde der Live-Twitter-Feed (auf die eine oder andere Weise!) in den folgenden Posteingängen unterstützt:

  • AOL-Mail
    Dynamisches Bild
  • Apple-Mail
    Dynamisches CSS
  • iOS (native E-Mail-App)
    Dynamisches CSS
  • Ausblick (2000-2013)
    Dynamisches Bild
  • Outlook für Mac (2011 & 2016)
    Dynamisches CSS
  • Outlook.com
    Dynamisches Bild
  • Donnervogel
    Dynamisches Bild
  • Windows Phone
    Dynamisches Bild
  • Windows-Mail
    Dynamisches Bild
  • Windows Live Mail
    Dynamisches Bild
  • Yahoo! E-Mail
    Dynamisches Bild

Dynamischer CSS-Inhalt für WebKit-E-Mail-Clients

Während wir dynamische Bilder für alle E-Mail-Clients hätten verwenden können, haben wir uns entschieden, dynamisches CSS zur progressiven Verbesserung in WebKit-E-Mail-Clients, wie den nativen E-Mail-Clients für iPhone und iPad, zu verwenden, damit sich der Twitter-Feed realistischer anfühlt.

Also, wie haben wir es geschafft? Unter Verwendung der fünfzehn neuesten Tweets, die den Hashtag #TEDC15 enthielten, zeigten wir standardmäßig die ersten fünf Tweets an und animierten dann die verbleibenden Tweets nacheinander über einen Zeitraum von einer Minute. Dies ermöglichte es uns, den Tweet-Stream in Echtzeit erscheinen zu lassen und hatte den zusätzlichen Vorteil, dass die Leute länger beschäftigt waren.

Obwohl wir die CSS-Datei alle 10 Sekunden aktualisiert haben, konnte der eigentliche Inhalt der E-Mail nicht auf die gleiche Weise aktualisiert werden – es war eine vollständige Aktualisierung des Dokuments erforderlich, um zu funktionieren. Benutzer mussten die E-Mail erneut öffnen oder die Webversion aktualisieren, um aktualisierte Tweets anzuzeigen. Obwohl es nicht ideal war, erwies es sich als sehr ansprechend!

Damit der Live-Twitter-Feed funktioniert, haben wir HTML und CSS verwendet, die nur in WebKit-Clients angezeigt werden. Um dies zu erreichen, haben wir leere <div>'s und <span>'s erstellt und die content-CSS-Eigenschaft verwendet, um den Inhalt der Namen, Handles, Zeitstempel und Tweet-Kopien von Twitter-Benutzern hinzuzufügen.

Hier ist der HTML-Code:

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

Um das CSS dynamisch zu überschreiben, haben wir uns auf ein externes Stylesheet verlassen, das alle 10 Sekunden aktualisiert und wie folgt in unsere E-Mail aufgenommen wurde:

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

Hier ist das entsprechende CSS mit den Tweet-Informationen in der Content-Eigenschaft:

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

Das CSS für die Tweets wurde in eine Medienabfrage verpackt, die es uns ermöglichte, es nur in WebKit-basierten E-Mail-Clients anzuzeigen:

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

Durch die Verwendung von leeren <div>'s für die Standardstruktur wurde der Inhalt für Nicht-WebKit-E-Mail-Clients nicht angezeigt. Wir griffen dann auf ein Bild des dynamischen Twitter-Feeds für Nicht-WebKit-Abonnenten zurück.

Der einzige Nachteil bei der Verwendung von WebKit-Targeting und der Inhaltseigenschaft besteht darin, dass einige E-Mail-Clients wie Airmail und die Outlook iOS- und Android-App die WebKit-bezogene Medienabfrage unterstützen, aber nicht die Inhaltseigenschaft, wodurch die Tweets unsichtbar werden. Aber da diese E-Mail-Clients nur einen sehr kleinen Teil unseres Publikums ausmachen (weniger als 1%), war dies ein Opfer, das es wert war, gemacht zu werden.

Dynamische Bilder für Nicht-WebKit-E-Mail-Clients

Für Nicht-WebKit-E-Mail-Clients haben wir die traditionellere Methode zum Anzeigen dynamischer Bilder verwendet, da die CSS-Inhaltseigenschaft in E-Mail-Clients außerhalb von WebKit nicht gut unterstützt wird.

In der E-Mail haben wir auf ein dynamisches Bild des Twitter-Feeds verwiesen:

 <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!"/>
twittere #TEDC15, um im Live-Feed aufzutauchen!

Wir haben eine einfache Webseite nur aus dem Twitter-Feed erstellt, indem wir dasselbe HTML und CSS wie in der E-Mail verwendet haben. Wir haben einfach einen Screenshot des Feeds mit denselben Abmessungen von 600 × 902 über das Befehlszeilendienstprogramm wkhtmltoimage erstellt und dasselbe Bild alle 10 Sekunden dynamisch aktualisiert.

Da wir HTML und CSS für die WebKit-Ansicht verwendet haben, haben wir das Bild in WebKit versteckt, um doppelte Feeds zu vermeiden:

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

Mit dieser Technik funktionierte der Live-Twitter-Feed selbst bei den schwierigsten Clients (ähem, Outlook) und ermöglichte es der Mehrheit unserer Abonnenten, am Spaß teilzunehmen!

Der einzige große Nachteil dieser dynamischen Bildimplementierung besteht darin, dass Gmail seine Bilder zwischenspeichert. Infolgedessen sahen Gmail-Benutzer den Live-Twitter-Feed nicht. Stattdessen sahen sie acht der neuesten Tweets und eine spezielle Nachricht, um die Webversion der E-Mail für den vollen Effekt anzuzeigen:

Google Mail-Twitter-Feed

Wie wir die dynamische Twitter-Integration aufgebaut haben

Kevin Thompson, unser Marketingentwickler, war der Mastermind hinter der eigentlichen Twitter-Integration. Er hat eine sehr einfache Anwendung erstellt, die auf dem Sinatra-Framework basiert und auf Heroku gehostet wird. Sie können den Code überprüfen und selbst ausprobieren, indem Sie den Anweisungen auf Github folgen. Dieser erste Test bewies, dass es möglich war, die Tweets in CSS zu generieren, das externe Stylesheet in eine Handvoll E-Mail-Clients zu laden und dass diese Clients jedes Mal, wenn die E-Mail geöffnet wurde, das neueste CSS abrufen konnten.

Von da an wurde die Anwendung etwas komplexer. Da Twitter die Anzahl der Anfragen an die API begrenzt, mussten wir sicherstellen, dass wir das Limit von 150 Anfragen pro 15 Minuten für Suchanfragen nicht überschreiten. Um dieses Problem zu beheben, haben wir unserer Heroku-Anwendung einen zweiten Prozess hinzugefügt. Dieser Prozess lief im Hintergrund, holte alle 10 Sekunden Tweets und speicherte sie in einem Cache. Der Hauptanwendungsprozess würde dann Tweets aus dem Cache laden, anstatt sie direkt über Twitter zu suchen.

Kevin musste auch Skalierbarkeit und Geschwindigkeit berücksichtigen. Obwohl wir eine Lösung hatten, um innerhalb der API-Grenzen von Twitter zu bleiben, wäre unser einzelner Server wahrscheinlich nicht in der Lage, die erwartete Anzahl von Anfragen von den über 200.000 Empfängern unserer E-Mails zu verarbeiten. Um dies zu lösen, haben wir das Amazon CloudFront CDN implementiert, wodurch wir weit mehr Anfragen für unsere Assets unterstützen und sie auch global verteilen können, um sicherzustellen, dass die Dateien schnell für unser gesamtes Publikum geladen werden. In unserer Sinatra-Anwendung fügte Kevin außerdem Cache-Control-Header hinzu, die CloudFront anwiesen, Assets nach 10 Sekunden ablaufen zu lassen. Dies zwang sie dazu, häufiger neue Inhalte von unserer Anwendung anzufordern.

Um die Ergebnisse so aktuell wie möglich zu halten, ohne die Geschwindigkeitsbegrenzungen der Twitter-API zu überschreiten, haben wir die dynamischen CSS- und Bilddateien alle 10 Sekunden mit den Ergebnissen unserer Twitter-Suche gerendert und zwischengespeichert.

Um den Inhalt der Tweets zu verwalten, wurden sowohl die Twitter-Suchbegriffe als auch gesperrte Inhalte/Benutzer über Umgebungsvariablen gesteuert. Obwohl das Ändern von Umgebungsvariablen auf Heroku dazu führte, dass unsere Anwendung neu gestartet werden musste, da die Assets über das CDN verteilt wurden und die Anwendung so einfach war, dauerte ein Neustart nur wenige Sekunden und war völlig unbemerkt. Da Heroku außerdem eine Benutzeroberfläche zum Bearbeiten von Umgebungsvariablen bereitstellt, konnte unser Marketingteam bei Bedarf Änderungen an den Suchbegriffen vornehmen und Inhalte blockieren.

Wenn Ihnen diese Methoden zu kompliziert oder zeitaufwändig erscheinen, gibt es Drittanbieter wie Movable Ink, LiveClicker, PowerInbox und Avari, die sich auf dynamische Inhalte für E-Mails spezialisiert haben.

Filtern von schlechten Tweets

Ein großes Anliegen bei der Integration eines dynamischen Live-Twitter-Feeds war für uns, die Kontrolle über den Inhalt unserer E-Mail aufzugeben, was dazu führte, dass einige „schlechte Tweets“ im Stream auftauchten. Ein paar Leute auf Twitter haben darauf hingewiesen:

Gleichzeitig wollten wir einen möglichst rohen, ungefilterten Feed von Tweets bereitstellen, um den „Wow“-Faktor beizubehalten. Unsere Hypothese war, dass schlechte Tweets ein Randfall-Szenario wären und durch ständige Aktivität aus dem Feed entfernt würden. Daher haben wir uns zunächst auf die Suchfilter von Twitter verlassen, um weniger als ideale Inhalte auszusortieren.

Aber wir wollten zusätzliche Filter haben, also haben wir uns auch die Möglichkeit gegeben, bestimmte Benutzernamen und Textzeichenfolgen zu blockieren, nachdem wir die Ergebnisse von Twitter abgerufen haben. Letztendlich haben wir uns entschieden, Tweet-Fotos überhaupt nicht im Stream zuzulassen, da dies widerspenstig und schädlicher sein könnte als nur Text. Außerdem ist es unmöglich, Links über die Content-CSS-Eigenschaft dynamisch einzufügen, daher funktionierten auch keine Links in Tweets – sie wurden einfach als Text angezeigt. Alle Tweets wurden direkt mit dem #TEDC15-Tweetstream verlinkt.

Als letzte Sicherheitsmaßnahme hatten wir die Möglichkeit, die Echtzeit-Twitter-Suchergebnisse vollständig zu deaktivieren und auf eine gefilterte Liste mit Favoriten-Tweets von unserem Twitter-Konto @emaildesignconf zurückzugreifen. Am Ende gab es nur ein paar schlechte Tweets, die entfernt werden mussten. Und bis jetzt mussten wir auch noch nicht den letzten Failsafe nutzen, um zu favorisierten Tweets zu wechseln – High Five #emailgeeks!

Der Schlüssel? Stellen Sie sicher, dass wir alles von oben bis unten getestet haben. Stellen Sie sicher, dass Ihre Designs in den Posteingängen, die Ihre Abonnenten mit Litmus verwenden, gut aussehen.

Teste alles von oben nach unten

Sehen Sie sich E-Mails auf 50+ in der Vorschau an und atmen Sie erleichtert auf, wenn Sie selbst die verrücktesten E-Mail-Tipps wie einen Live-Twitter-Feed versuchen.

Testen Sie Lackmus kostenlos →

Eine überwältigend positive Reaktion

Unser Publikum hat diese lustige und einzigartige Implementierung in E-Mail definitiv geliebt. Es machte die E-Mail tatsächlich zu einem interaktiven und gemeinschaftlichen Erlebnis, an dem jeder teilnehmen konnte. Die Reaktionen von Twitter waren unbezahlbar und folgten sogar einigen ähnlichen Themen.

Einige Leute fragten sich, ob es wirklich echt war:

Viele starrten es nur an:

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

Ein Haufen sagte Hallo zu anderen:

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

Es gab mehrere Erwähnungen von Magie, Hexerei und Harry Potter:

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

Es folgten auch eine Reihe von Dummheiten und Spielereien:

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

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

Um das Ganze abzurunden, wurden viele Leute umgehauen:

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

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

Ein Blick auf die Leistung

Wir waren überwältigt von den Ergebnissen dieser Kampagne! Über 53 % unserer Öffnungen erfolgten in einem WebKit-E-Mail-Client, sodass viele unserer Benutzer die schrittweise verbesserte Version sahen. Insgesamt gab es in den ersten 24 Stunden nach dem Versenden der E-Mail über 750 Tweets zu #TEDC15. Darüber hinaus hat die E-Mail dazu beigetragen, über 4.000 neue Besucher auf unsere Website zu bringen und in derselben Zeit über 1.000 neue Interessenten zu generieren! Ganz zu schweigen davon, dass diese E-Mail die beste Interaktion mit allen E-Mails verzeichnete, die wir je gesendet haben – fast 60 % der Benutzer haben die E-Mail länger als 18 Sekunden angesehen!

Screenshot 2015-05-26 um 15.48.42 Uhr

Wenn Sie Fragen haben, zögern Sie bitte nicht, diese in den Kommentaren unten zu stellen, dem Litmus-Community-Thread zu diesem Thema beizutreten oder @KevinMandeville und @KevinThompson zu twittern!

Erhalten Sie tolle E-Mails

Verpassen Sie nicht unsere nächste überwältigende E-Mail – melden Sie sich an, um Neuigkeiten und Informationen über alles, was bei Litmus passiert, zu erhalten.