HTML E-postasında Canlı Dinamik Twitter Akışı Nasıl Kodlanır

Yayınlanan: 2015-05-26

2015 yılında Litmus Live (eski adıyla E-posta Tasarım Konferansı) için lojistiği çivilemeye başladığımızda, lansman e-postamızı geçen yıldan daha büyük ve daha iyi hale getirme konusundaki konuşmalar başladı. E-postada HTML5 video arka plan tekniğini nasıl üstleniriz? Dinamik içerik kullanarak: canlı bir Twitter beslemesi.

Evet, bir e-postadaki bir Twitter beslemesi .

Hedeflerimiz iki yönlüydü: konferansa ilgi uyandırmak ve bunu yapmak için e-postada yenilikçi ve ilham verici bir teknik kullanmak. Pek çok beyin fırtınası seansından sonra, dinamik içeriğin ortak yaklaşımını kullanmaya karar verdik, ancak bir değişiklikle.

tedc15-e-posta

E-postanın tamamını tarayıcıda görüntüle →

Ayrıca, 40'tan fazla e-posta istemcisinde nasıl görüntülendiğini görmek için tam kodu buradan ve Litmus test sonuçlarını buradan görüntüleyebilirsiniz.

E-postada Dinamik İçerik

E-postadaki dinamik içerik yeni bir kavram değildir. Aslında, kişiselleştirilmiş, hedeflenmiş e-postalar oluşturmak için sıklıkla kullanılır. Tarihsel olarak, dinamik içerik kesinlikle metin veya görüntülerin kullanımı yoluyla uygulandı ve bir ESP aracılığıyla birleştirme etiketleri veya değişkenler aracılığıyla çekildi. Dinamik görüntüler, önceden tanımlanmış kişiselleştirme parametrelerine dayalı olarak belirli bir abone alt kümesi için yeni bir görüntünün görüntülenmesi için dinamik olarak üzerine yazılan tek bir kaynak dosyaya bağlanır. Bu yöntemlerin her ikisi de aboneleriniz için benzersiz, kişiselleştirilmiş bir e-posta deneyimi oluşturmanıza olanak tanır.

Canlı dinamik Twitter akışının birkaç popüler e-posta istemcisinde çalışmasını sağlamak için lansman e-postamızda dinamik resimler kullandık. Bununla birlikte, dinamik içeriği uygulamak için tamamen yeni bir yöntem de kullandık: dinamik CSS.

Dinamik CSS, WebKit istemcileri için çalışırken, WebKit olmayan istemcileri kullanan abonelerimiz için dinamik görüntüleri kullanarak uygun bir yedek uygulamamız gerekiyordu. Bununla birlikte, canlı Twitter beslemesi (şu ya da bu şekilde!) aşağıdaki gelen kutularında desteklendi:

  • AOL Postası
    Dinamik Görüntü
  • elma postası
    Dinamik CSS
  • iOS (Yerel e-posta uygulaması)
    Dinamik CSS
  • Görünüm (2000-2013)
    Dinamik Görüntü
  • Mac için Outlook (2011 ve 2016)
    Dinamik CSS
  • Outlook.com
    Dinamik Görüntü
  • yıldırım kuşu
    Dinamik Görüntü
  • Windows Telefon
    Dinamik Görüntü
  • Windows Posta
    Dinamik Görüntü
  • Windows Canlı Posta
    Dinamik Görüntü
  • Yahoo! Posta
    Dinamik Görüntü

WebKit E-posta İstemcileri için Dinamik CSS İçeriği

Tüm e-posta istemcileri için dinamik görüntüler kullanabilirdik, ancak Twitter beslemesini daha gerçekçi hissettirmek için iPhone ve iPad yerel e-posta istemcileri gibi WebKit e-posta istemcilerinde aşamalı iyileştirme için dinamik CSS kullanmayı seçtik.

Peki nasıl çalıştırdık? #TEDC15 hashtag'ini içeren en son on beş tweet'i kullanarak, varsayılan olarak ilk 5 tweet'i gösterdik, ardından kalan tweetleri bir dakika boyunca tek tek canlandırdık. Bu, tweet akışını gerçek zamanlı hissettirmemizi sağladı ve insanları daha uzun süre meşgul tutmanın ek avantajına sahipti.

CSS dosyasını her 10 saniyede bir güncellerken, e-postadaki asıl içerik aynı şekilde güncellenemedi; çalışması için belgenin tamamen yenilenmesi gerekiyordu. Kullanıcıların güncel tweetleri görmek için e-postayı yeniden açması veya web sürümünü yenilemesi gerekiyordu. İdeal olmasa da, aslında oldukça ilgi çekici olduğunu kanıtladı!

Canlı twitter akışının çalışmasını sağlamak için yalnızca WebKit istemcilerinde görüntülenen HTML ve CSS kullandık. Bunu başarmak için, boş <div>'ler ve <span>'ler oluşturduk ve Twitter kullanıcılarının adlarının, tanıtıcılarının, zaman damgalarının ve tweet kopyalarının içeriğini eklemek için içerik CSS özelliğini kullandık.

İşte 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>

CSS'nin üzerine dinamik olarak yazmak için, her 10 saniyede bir güncellenen ve e-postamıza şu şekilde dahil edilen harici bir stil sayfasına güvendik:

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

Content özelliğindeki tweet bilgileriyle ilgili CSS:

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

Tweet'lerin CSS'si, yalnızca WebKit tabanlı e-posta istemcilerinde görüntülememize izin veren bir medya sorgusuna sarılmıştı:

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

Varsayılan yapı için boş <div>'ler kullanıldığında, içerik WebKit dışı e-posta istemcileri için görünmüyordu. Daha sonra WebKit olmayan aboneler için dinamik twitter beslemesinin bir görüntüsüne geri döndük.

WebKit hedeflemesini ve içerik özelliğini kullanmanın tek dezavantajı, Airmail ve Outlook iOS ve Android uygulaması gibi bazı e-posta istemcilerinin WebKit hedefli medya sorgusunu desteklemesi, ancak içerik özelliğini desteklememesi ve tweet'leri görünmez hale getirmesidir. Ancak, bu e-posta istemcilerinin hedef kitlemizin çok küçük bir kısmı (%1'den az) olduğu göz önüne alındığında, bu, yapmaya değer bir fedakarlıktı.

WebKit Olmayan E-posta İstemcileri için Dinamik Görüntüler

WebKit olmayan e-posta istemcileri için, CSS içerik özelliği WebKit dışındaki e-posta istemcilerinde iyi desteklenmediğinden, daha geleneksel dinamik görüntü görüntüleme yöntemini kullandık.

E-postada, Twitter akışının dinamik bir görüntüsüne atıfta bulunduk:

 <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!"/>
Canlı yayında görünmek için #TEDC15 tweet'ini atın!

E-postadaki aynı HTML ve CSS'yi kullanarak yalnızca Twitter beslemesinden oluşan basit bir web sayfası oluşturduk. Basitçe, wkhtmltoimage komut satırı yardımcı programı aracılığıyla aynı 600×902 boyutlarında beslemenin ekran görüntüsünü aldık ve aynı görüntüyü her 10 saniyede bir dinamik olarak güncelledik.

WebKit görünümü için HTML ve CSS kullandığımızdan, yinelenen beslemeleri önlemek için görüntüyü WebKit'e sakladık:

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

Bu teknikle, canlı Twitter akışı en sorunlu istemcilerde (ahem, Outlook) bile çalıştı ve abonelerimizin çoğunun eğlenceye katılmasına izin verdi!

Bu dinamik resim uygulamasının tek büyük dezavantajı, Gmail'in resimlerini önbelleğe almasıdır. Sonuç olarak, Gmail kullanıcıları canlı Twitter beslemesini deneyimlemedi. Bunun yerine, en son sekiz tweet'i ve tam etki için e-postanın web sürümünü görüntülemek için özel bir mesaj gördüler:

gmail-twitter-feed

Dinamik Twitter Entegrasyonunu Nasıl Oluşturduk?

Pazarlama geliştiricimiz Kevin Thompson, gerçek Twitter entegrasyonunun arkasındaki beyindi. Sinatra çerçevesi üzerine inşa edilmiş ve Heroku'da barındırılan çok basit bir uygulama yarattı. Github'daki talimatları izleyerek kodu kontrol edebilir ve kendiniz deneyebilirsiniz. Bu ilk test, tweet'leri CSS'de oluşturmanın, harici stil sayfasını birkaç e-posta istemcisine yüklemenin mümkün olduğunu ve bu istemcilerin e-posta her açıldığında en son CSS'yi getirebileceğini kanıtladı.

Oradan, uygulama biraz daha karmaşık hale gelmeye başladı. Twitter, API'ye yaptığınız istek sayısına sınırlar getirdiğinden, arama sorguları için ayrılan 15 dakikada 150 istek sınırını aşmayacağımızdan emin olmamız gerekiyordu. Bu sorunu çözmek için Heroku uygulamamıza ikinci bir işlem ekledik. Bu işlem arka planda çalışıyor, her 10 saniyede bir tweet alıyor ve bunları bir önbellekte saklıyordu. Ana uygulama süreci, tweet'leri doğrudan Twitter üzerinden aramak yerine önbellekten yükler.

Kevin ayrıca ölçeklenebilirliği ve hızı da dikkate almak zorundaydı. Twitter'ın API sınırları içinde kalmak için bir çözümümüz olsa da, tek sunucumuz muhtemelen e-postamızın 200.000'den fazla alıcısından beklenen sayıda isteği işleyemezdi. Bunu çözmek için, varlıklarımız için çok daha fazla talebi desteklememize ve ayrıca dosyaların tüm hedef kitlemiz için hızlı bir şekilde yüklenmesini sağlamak için bunları küresel olarak dağıtmamıza olanak tanıyan Amazon CloudFront CDN'yi uyguladık. Kevin, Sinatra uygulamamızda, CloudFront'a varlıkların 10 saniye sonra süresinin dolması talimatını veren Cache-Control başlıklarını da ekledi. Bu, uygulamamızdan daha sık yeni içerik istemeye zorladı.

Twitter'ın API'sinin hız sınırlarını aşmadan sonuçları olabildiğince taze tutmak için, Twitter aramamızın sonuçlarıyla dinamik CSS ve resim dosyalarını her 10 saniyede bir render ettik ve önbelleğe aldık.

Tweetlerin içeriğini yönetmek için hem Twitter arama terimleri hem de engellenen içerik/kullanıcılar ortam değişkenleri kullanılarak kontrol edildi. Heroku'da ortam değişkenlerini değiştirmek, uygulamamızın yeniden başlatılması gerektiği anlamına gelse de, varlıklar CDN aracılığıyla dağıtıldığından ve uygulama çok basit olduğundan, yeniden başlatma yalnızca birkaç saniye sürdü ve tamamen farkedilemezdi. Ayrıca Heroku, ortam değişkenlerini düzenlemek için bir kullanıcı arabirimi sağladığından, pazarlama ekibimiz arama terimlerinde değişiklik yapabildi ve gerektiğinde içeriği engelledi.

Bu yöntemler sizin için çok karmaşık veya zaman alıcı görünüyorsa, e-posta için dinamik içerik konusunda uzmanlaşmış Movable Ink, LiveClicker, PowerInbox ve Avari gibi üçüncü taraf şirketler var.

Kötü Tweetleri Filtreleme

Canlı bir dinamik twitter beslemesini dahil ederken bizim için büyük bir endişe, e-postamızın içeriğinin kontrolünden vazgeçmekti ve bu da akışta bazı "kötü tweet'lerin" görünmesine neden oldu. Twitter'da birkaç kişi buna dikkat çekti:

Aynı zamanda, “vay” faktörünü korumak için mümkün olduğunca ham, filtrelenmemiş bir tweet akışı sağlamak istedik. Hipotezimiz, kötü tweet'lerin son durum senaryosu olacağı ve sürekli aktivite yoluyla beslemeden temizleneceğiydi. Bu nedenle, ideal içerikten daha azını ayıklamak için başlangıçta Twitter'ın arama filtrelerine güvendik.

Ancak, fazladan filtreler kullanmak istedik, bu nedenle kendimize Twitter'dan sonuçları aldıktan sonra belirli kullanıcı adlarını ve metin dizilerini engelleme yeteneği de verdik. Sonunda, asi ve metinden daha zararlı olabileceğinden, tweet fotoğraflarının akışta olmasına izin vermemeye karar verdik. Ayrıca, içerik CSS özelliği aracılığıyla bağlantıları dinamik olarak enjekte etmek imkansızdır, bu nedenle hiçbir tweet'teki bağlantı da işe yaramadı; bunlar yalnızca metin olarak görüntülendi. Tüm tweet'ler doğrudan #TEDC15 tweet akışına bağlandı.

Son bir güvenlik önlemi olarak, gerçek zamanlı Twitter arama sonuçlarını tamamen devre dışı bırakma seçeneğine sahip olduk ve @emaildesignconf Twitter hesabımızdan filtrelenmiş favori tweetler listesine geri döndük. Sonunda, kaldırılması gereken sadece birkaç kötü tweet vardı. Ve şimdiye kadar, favori tweet'lere geçmenin son güvenlik önlemini de kullanmak zorunda kalmadık - çak bir #emailgeeks!

Anahtar? Her şeyi yukarıdan aşağıya test ettiğimizden emin olmak. Abonelerinizin Litmus ile kullandığı gelen kutularında tasarımlarınızın harika görünmesini sağlayın.

Her şeyi yukarıdan aşağıya test edin

50 + üzerinde e-postaları önizleyin ve canlı bir Twitter beslemesi gibi en çılgın e-posta özelliklerini denerken rahat bir nefes alın.

Litmus'u ücretsiz deneyin →

Son derece olumlu bir tepki

İzleyicilerimiz e-postadaki bu eğlenceli ve benzersiz uygulamayı kesinlikle sevdi. Aslında e-postayı herkesin katılabileceği etkileşimli ve ortak bir deneyim haline getirdi. Twitter'dan gelen tepkiler paha biçilemezdi ve hatta bazı benzer temaları takip etti.

Bazı insanlar gerçekten gerçek olup olmadığını sorguladı:

Birçoğu ona baktı:

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

Bir grup diğerlerine merhaba dedi:

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

Büyü, büyücülük ve Harry Potter'dan birkaç söz vardı:

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

Bir dizi aptallık ve maskaralık da ortaya çıktı:

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

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

Hepsinden öte, birçok insanın aklı uçtu:

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

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

Performansa bir bakış

Bu kampanyanın sonuçlarına hayran kaldık! Açılışlarımızın %53'ünden fazlası bir WebKit e-posta istemcisinde geldi, pek çok kullanıcımız aşamalı olarak geliştirilmiş sürümü gördü. E-postayı gönderdikten sonraki ilk 24 saat içinde #TEDC15 hakkında toplamda 750'den fazla tweet atıldı. Ek olarak, e-posta, web sitemize 4.000'den fazla yeni ziyaretçinin çekilmesine yardımcı oldu ve aynı süre içinde 1.000'den fazla yeni potansiyel müşteri yarattı! Ayrıca bu e-posta, gönderdiğimiz herhangi bir e-postada gördüğümüz en iyi etkileşimi gördü; kullanıcıların neredeyse %60'ı e-postayı 18 saniyeden fazla görüntüledi!

Ekran Görüntüsü 2015-05-26, 3.48.42 PM

Herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlarda sormaktan çekinmeyin, konuyla ilgili Litmus Topluluğu konusuna katılın veya @KevinMandeville ve @KevinThompson'ı tweetleyin!

Harika E-postalar Alın

Bir sonraki akıllara durgunluk veren e-postamızı kaçırmayın—Litmus'ta olan her şey hakkında haber ve bilgi almak için kaydolun.