Comment coder un flux Twitter dynamique en direct dans un e-mail HTML

Publié: 2015-05-26

Alors que nous commencions à mettre au point la logistique pour Litmus Live (anciennement l'Email Design Conference) en 2015, les conversations sur la façon de rendre notre e-mail de lancement plus gros et meilleur que celui de l'année dernière ont commencé. Comment pouvons-nous améliorer la technique d'arrière-plan vidéo HTML5 dans les e-mails ? En utilisant du contenu dynamique : un fil Twitter en direct.

Oui, un fil Twitter dans un e-mail .

Nos objectifs étaient doubles : susciter l'intérêt pour la conférence et utiliser une technique innovante et inspirante dans l'e-mail pour le faire. Après de nombreuses sessions de brainstorming, nous avons décidé d'utiliser l'approche commune du contenu dynamique, mais avec une torsion.

tedc15-e-mail

Afficher l'e-mail complet dans le navigateur →

Vous pouvez également afficher le code complet ici et les résultats du test Litmus ici pour voir comment il s'affiche sur plus de 40 clients de messagerie.

Contenu dynamique dans les e-mails

Le contenu dynamique dans les e-mails n'est pas un nouveau concept. En fait, il est fréquemment utilisé pour créer des e-mails personnalisés et ciblés. Historiquement, le contenu dynamique a été mis en œuvre strictement par l'utilisation de texte ou d'images, et extrait par des balises de fusion ou des variables via un ESP. Les images dynamiques sont liées à un seul fichier source, qui est écrasé dynamiquement pour afficher une nouvelle image pour un certain sous-ensemble d'abonnés en fonction de paramètres de personnalisation prédéfinis. Ces deux méthodes vous permettent de créer une expérience de messagerie unique et personnalisée pour vos abonnés.

Nous avons utilisé des images dynamiques dans notre e-mail de lancement pour faire fonctionner le flux Twitter dynamique en direct sur plusieurs clients de messagerie populaires. Cependant, nous avons également utilisé une toute nouvelle méthode pour implémenter le contenu dynamique : le CSS dynamique.

Alors que le CSS dynamique fonctionnait pour les clients WebKit, nous devions implémenter une solution de secours appropriée à l'aide d'images dynamiques pour nos abonnés utilisant des clients non WebKit. Cela étant dit, le flux Twitter en direct était pris en charge (d'une manière ou d'une autre !) dans les boîtes de réception suivantes :

  • Courrier AOL
    Image dynamique
  • Courrier Apple
    CSS dynamique
  • iOS (application de messagerie native)
    CSS dynamique
  • Perspectives (2000-2013)
    Image dynamique
  • Outlook pour Mac (2011 et 2016)
    CSS dynamique
  • Outlook.com
    Image dynamique
  • Oiseau-tonnerre
    Image dynamique
  • Téléphone Windows
    Image dynamique
  • Courrier Windows
    Image dynamique
  • Courrier en direct Windows
    Image dynamique
  • Yahoo! Courrier
    Image dynamique

Contenu CSS dynamique pour les clients de messagerie WebKit

Alors que nous aurions pu utiliser des images dynamiques pour tous les clients de messagerie, nous avons choisi d'utiliser des CSS dynamiques pour une amélioration progressive des clients de messagerie WebKit, comme les clients de messagerie natifs iPhone et iPad, afin de rendre le flux Twitter plus réaliste.

Alors, comment l'avons-nous fait fonctionner? En utilisant les quinze tweets les plus récents qui incluaient le hashtag #TEDC15, nous avons affiché les 5 premiers tweets par défaut, puis animé les tweets restants un par un pendant une minute. Cela nous a permis de donner l'impression que le flux de tweets était en temps réel et avait l'avantage supplémentaire de garder les gens engagés plus longtemps.

Bien que nous ayons mis à jour le fichier CSS toutes les 10 secondes, le contenu réel de l'e-mail ne pouvait pas être mis à jour de la même manière : il nécessitait une actualisation complète du document pour fonctionner. Les utilisateurs devaient rouvrir l'e-mail ou actualiser la version Web pour voir les tweets mis à jour. Bien qu'il ne soit pas idéal, il s'est en fait avéré très engageant !

Pour faire fonctionner le flux Twitter en direct, nous avons utilisé HTML et CSS qui ne s'afficheraient que dans les clients WebKit. Pour y parvenir, nous avons créé des <div> et <span> vides et utilisé la propriété CSS content pour ajouter le contenu des noms, des identifiants, des horodatages et des tweets des utilisateurs Twitter.

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

Pour écraser dynamiquement le CSS, nous nous sommes appuyés sur une feuille de style externe qui était mise à jour toutes les 10 secondes et incluse dans notre e-mail comme suit :

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

Voici le CSS correspondant, avec les informations du tweet dans la propriété 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"; }

Le CSS pour les tweets a été enveloppé dans une requête média qui nous a permis de l'afficher uniquement dans les clients de messagerie WebKit :

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

En utilisant des <div> vides pour la structure par défaut, le contenu ne s'affichait pas pour les clients de messagerie non WebKit. Nous nous sommes ensuite rabattus sur une image du fil twitter dynamique pour les non abonnés à WebKit.

Le seul inconvénient de l'utilisation du ciblage WebKit et de la propriété de contenu est que certains clients de messagerie, tels que Airmail et les applications Outlook iOS et Android, prendraient en charge la requête multimédia ciblée par WebKit mais pas la propriété de contenu, rendant les tweets invisibles. Mais, étant donné que ces clients de messagerie ne représentent qu'une infime partie de notre audience (moins de 1 %), c'était un sacrifice qui en valait la peine.

Images dynamiques pour les clients de messagerie non WebKit

Pour les clients de messagerie non WebKit, nous avons utilisé la méthode plus traditionnelle d'affichage d'image dynamique, car la propriété de contenu CSS n'est pas bien prise en charge dans les clients de messagerie en dehors de WebKit.

Dans l'e-mail, nous avons référencé une image dynamique du fil 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!"/>
tweetez #TEDC15 pour apparaître dans le flux en direct !

Nous avons créé une simple page Web contenant uniquement le flux Twitter en utilisant les mêmes HTML et CSS de l'e-mail. Nous avons simplement pris une capture d'écran du flux aux mêmes dimensions de 600 × 902 via l'utilitaire de ligne de commande wkhtmltoimage et avons mis à jour dynamiquement cette même image toutes les 10 secondes.

Comme nous utilisions HTML et CSS pour la vue WebKit, nous avons masqué l'image dans WebKit pour éviter les flux en double :

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

Avec cette technique, le flux Twitter en direct a fonctionné même dans les clients les plus gênants (hum, Outlook) et a permis à la majorité de nos abonnés de se joindre à la fête !

Le seul inconvénient majeur de cette implémentation d'image dynamique est que Gmail met ses images en cache. Par conséquent, les utilisateurs de Gmail n'ont pas pu profiter du flux Twitter en direct. Au lieu de cela, ils ont vu huit des tweets les plus récents et un message spécial pour afficher la version Web de l'e-mail pour le plein effet :

gmail-twitter-feed

Comment nous avons construit l'intégration dynamique de Twitter

Kevin Thompson, notre développeur marketing, était le cerveau derrière l'intégration réelle de Twitter. Il a créé une application très simple construite sur le framework Sinatra et hébergée sur Heroku. Vous pouvez consulter le code et l'essayer par vous-même en suivant les instructions sur Github. Ce premier test a prouvé qu'il était possible de générer les tweets en CSS, de charger la feuille de style externe dans une poignée de clients de messagerie et que ces clients pouvaient récupérer le dernier CSS à chaque ouverture de l'e-mail.

À partir de là, l'application a commencé à devenir un peu plus complexe. Étant donné que Twitter impose des limites sur le nombre de requêtes que vous faites à l'API, nous devions nous assurer que nous ne dépasserions pas la limite de 150 requêtes toutes les 15 minutes allouées pour les requêtes de recherche. Pour résoudre ce problème, nous avons ajouté un deuxième processus à notre application Heroku. Ce processus s'est exécuté en arrière-plan, récupérant les tweets toutes les 10 secondes et les stockant dans un cache. Le processus de candidature principal chargerait alors les tweets à partir du cache au lieu de les rechercher directement via Twitter.

Kevin a également dû prendre en compte l'évolutivité et la vitesse. Bien que nous disposions d'une solution pour rester dans les limites de l'API de Twitter, notre serveur unique ne serait probablement pas en mesure de traiter le nombre attendu de demandes des plus de 200 000 destinataires de notre e-mail. Pour résoudre ce problème, nous avons implémenté le CDN Amazon CloudFront, ce qui nous permet de prendre en charge beaucoup plus de demandes pour nos actifs et de les distribuer à l'échelle mondiale pour garantir que les fichiers sont chargés rapidement pour l'ensemble de notre public. Dans notre application Sinatra, Kevin a également ajouté des en-têtes Cache-Control, qui ont demandé à CloudFront d'expirer les actifs après 10 secondes. Cela l'a obligé à demander plus fréquemment de nouveaux contenus à notre application.

Afin de garder les résultats aussi récents que possible sans dépasser les limites de débit de l'API de Twitter, nous avons rendu et mis en cache les fichiers CSS et image dynamiques toutes les 10 secondes avec les résultats de notre recherche Twitter.

Pour gérer le contenu des tweets, les termes de recherche Twitter et le contenu/utilisateurs bloqués ont été contrôlés à l'aide de variables d'environnement. Bien que la modification des variables d'environnement sur Heroku signifiait que notre application devait redémarrer, car les actifs étaient distribués via le CDN et l'application était si simple, un redémarrage ne prenait que quelques secondes et serait complètement imperceptible. De plus, comme Heroku fournit une interface utilisateur pour l'édition des variables d'environnement, notre équipe marketing a pu apporter des modifications aux termes de recherche et bloquer le contenu si nécessaire.

Si ces méthodes vous semblent trop compliquées ou chronophages, il existe des sociétés tierces telles que Movable Ink, LiveClicker, PowerInbox et Avari qui se spécialisent dans le contenu dynamique pour les e-mails.

Filtrage des mauvais tweets

Lors de l'intégration d'un flux Twitter dynamique en direct, une grande préoccupation pour nous était de renoncer au contrôle du contenu de notre e-mail, ce qui a entraîné l'apparition de «mauvais tweets» dans le flux. Quelques personnes sur Twitter l'ont souligné :

Dans le même temps, nous voulions fournir le plus possible un flux de tweets bruts et non filtrés pour maintenir le facteur « wow ». Notre hypothèse était que les mauvais tweets seraient un scénario limite et seraient supprimés du flux grâce à une activité constante. Ainsi, nous nous sommes initialement appuyés sur les filtres de recherche de Twitter pour éliminer le contenu moins qu'idéal.

Mais nous voulions mettre en place des filtres supplémentaires, nous nous sommes donc également donné la possibilité de bloquer des noms d'utilisateur et des chaînes de texte spécifiques après avoir récupéré les résultats sur Twitter. Nous avons finalement décidé de ne pas autoriser du tout les photos de tweet dans le flux, car cela aurait pu devenir indiscipliné et plus dangereux qu'un simple texte. De plus, il est impossible d'injecter dynamiquement des liens via la propriété CSS content, donc aucun lien dans les tweets n'a fonctionné non plus - ils étaient simplement affichés sous forme de texte. Tous les tweets étaient directement liés au flux de tweets #TEDC15.

En guise de sécurité ultime, nous avions la possibilité de désactiver complètement les résultats de recherche Twitter en temps réel, en revenant à une liste filtrée de tweets favoris de notre compte Twitter @emaildesignconf. En fin de compte, il n'y avait que quelques mauvais tweets qui devaient être supprimés. Et, pour l'instant, nous n'avons pas du tout eu besoin d'utiliser la sécurité finale de basculement vers les tweets favoris non plus : cinq #emailgeeks !

La clé? S'assurer que nous avons tout testé de haut en bas. Assurez-vous que vos conceptions ont fière allure dans les boîtes de réception que vos abonnés utilisent avec Litmus.

Testez tout de haut en bas

Prévisualisez les e-mails sur 50 + et poussez un soupir de soulagement lorsque vous tentez les exploits de messagerie les plus fous, comme un fil Twitter en direct.

Essayez Litmus gratuitement →

Une réaction extrêmement positive

Notre public a définitivement adoré cette implémentation amusante et unique dans le courrier électronique. Cela a en fait fait de l'e-mail une expérience interactive et commune à laquelle tout le monde pouvait participer. Les réactions de Twitter étaient inestimables et suivaient même des thèmes similaires.

Certaines personnes se sont demandé si c'était réellement réel :

Beaucoup l'ont juste regardé :

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

Un groupe a dit bonjour aux autres :

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

Il y a eu plusieurs mentions de magie, de sorcellerie et d'Harry Potter :

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

Une flopée de bêtises et de manigances s'ensuivit également :

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

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

Pour couronner le tout, beaucoup de gens ont été époustouflés :

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

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

Un regard sur les performances

Nous avons été bluffés par les résultats de cette campagne ! Plus de 53 % de nos ouvertures ont eu lieu dans un client de messagerie WebKit, de sorte que beaucoup de nos utilisateurs ont vu la version progressivement améliorée. Au total, il y a eu plus de 750 tweets sur #TEDC15 dans les 24 heures suivant l'envoi de l'e-mail. De plus, l'e-mail a permis d'attirer plus de 4 000 nouveaux visiteurs sur notre site Web et de générer plus de 1 000 nouveaux prospects dans le même laps de temps ! Sans oublier que cet e-mail a enregistré le meilleur engagement que nous ayons vu parmi tous les e-mails que nous ayons jamais envoyés : près de 60 % des utilisateurs ont consulté l'e-mail pendant plus de 18 secondes !

Capture d'écran 26/05/2015 à 15h48

Si vous avez des questions, n'hésitez pas à les poser dans les commentaires ci-dessous, à rejoindre le fil de discussion de la communauté Litmus sur le sujet ou à tweeter @KevinMandeville et @KevinThompson !

Recevez des e-mails impressionnants

Ne manquez pas notre prochain e-mail époustouflant : inscrivez-vous pour recevoir des nouvelles et des informations sur tout ce qui se passe chez Litmus.