Cara Mengodekan Umpan Twitter Dinamis Langsung dalam Email HTML

Diterbitkan: 2015-05-26

Saat kami mulai menyiapkan logistik untuk Litmus Live (sebelumnya Konferensi Desain Email) pada tahun 2015, percakapan tentang membuat email peluncuran kami lebih besar dan lebih baik dari tahun lalu dimulai. Bagaimana cara membuat teknik latar belakang video HTML5 teratas dalam email? Dengan menggunakan konten dinamis: umpan Twitter langsung.

Ya, umpan Twitter dalam email .

Tujuan kami ada dua: membangkitkan minat dalam konferensi dan menggunakan teknik inovatif—dan menginspirasi—dalam email untuk melakukannya. Setelah banyak sesi brainstorming, kami memutuskan untuk menggunakan pendekatan umum konten dinamis, tetapi dengan twist.

tedc15-email

Lihat email lengkap di browser →

Anda juga dapat melihat kode lengkapnya di sini dan hasil tes Litmus di sini untuk melihat bagaimana kode tersebut ditampilkan di 40+ klien email.

Konten Dinamis di Email

Konten dinamis dalam email bukanlah konsep baru. Bahkan, ini sering digunakan untuk membuat email yang dipersonalisasi dan ditargetkan. Secara historis, konten dinamis telah diterapkan secara ketat melalui penggunaan teks atau gambar, dan ditarik melalui tag atau variabel gabungan melalui ESP. Gambar dinamis ditautkan ke file sumber tunggal, yang ditimpa secara dinamis untuk menampilkan gambar baru untuk subset pelanggan tertentu berdasarkan parameter personalisasi yang telah ditentukan sebelumnya. Kedua metode ini memungkinkan Anda untuk membuat pengalaman email yang unik dan dipersonalisasi untuk pelanggan Anda.

Kami menggunakan gambar dinamis dalam email peluncuran kami untuk membuat umpan Twitter dinamis langsung berfungsi di beberapa klien email populer. Namun, kami juga menggunakan metode yang sama sekali baru untuk menerapkan konten dinamis: CSS dinamis.

Sementara CSS dinamis berfungsi untuk klien WebKit, kami perlu menerapkan penggantian yang tepat menggunakan citra dinamis untuk pelanggan kami yang menggunakan klien non-WebKit. Meskipun demikian, umpan Twitter langsung didukung (dalam satu atau lain cara!) di kotak masuk berikut:

  • Surat AOL
    Gambar Dinamis
  • Apple Mail
    CSS Dinamis
  • iOS (Aplikasi email asli)
    CSS Dinamis
  • Pandangan (2000-2013)
    Gambar Dinamis
  • Outlook untuk Mac (2011 & 2016)
    CSS Dinamis
  • Outlook.com
    Gambar Dinamis
  • Thunderbird
    Gambar Dinamis
  • Windows Phone
    Gambar Dinamis
  • Windows Mail
    Gambar Dinamis
  • Windows Live Mail
    Gambar Dinamis
  • Yahoo! Surat
    Gambar Dinamis

Konten CSS Dinamis untuk Klien Email WebKit

Meskipun kami dapat menggunakan gambar dinamis untuk semua klien email, kami memilih untuk menggunakan CSS dinamis untuk peningkatan progresif di klien email WebKit, seperti klien email asli iPhone dan iPad, untuk membuat umpan Twitter terasa lebih realistis.

Jadi bagaimana kita membuatnya bekerja? Menggunakan lima belas tweet terbaru yang menyertakan tagar #TEDC15, kami menampilkan 5 tweet pertama secara default, lalu menganimasikan tweet yang tersisa satu per satu selama rentang satu menit. Ini memungkinkan kami untuk membuat aliran tweet terasa waktu nyata dan memiliki manfaat tambahan untuk membuat orang tetap terlibat lebih lama.

Meskipun kami memperbarui file CSS setiap 10 detik, konten sebenarnya dalam email tidak dapat diperbarui dengan cara yang sama—ini membutuhkan penyegaran lengkap dokumen agar berfungsi. Pengguna perlu membuka kembali email atau menyegarkan versi web untuk melihat tweet yang diperbarui. Meskipun tidak ideal, itu sebenarnya terbukti sangat menarik!

Agar umpan Twitter langsung berfungsi, kami menggunakan HTML dan CSS yang hanya akan ditampilkan di klien WebKit. Untuk mencapai ini, kami membuat <div> dan <span> kosong dan menggunakan properti CSS konten untuk menambahkan konten nama pengguna Twitter, pegangan, stempel waktu, dan salinan tweet.

Berikut HTMLnya:

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

Untuk menimpa CSS secara dinamis, kami mengandalkan lembar gaya eksternal yang diperbarui setiap 10 detik dan disertakan dalam email kami seperti:

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

Inilah CSS yang sesuai, dengan informasi tweet di properti konten:

 #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 untuk tweet dibungkus dengan kueri media yang memungkinkan kami untuk menampilkannya hanya di klien email berbasis WebKit:

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

Dengan menggunakan <div> kosong untuk struktur default, konten tidak muncul untuk klien email non-WebKit. Kami kemudian kembali ke gambar umpan twitter dinamis untuk pelanggan non-WebKit.

Satu-satunya kelemahan menggunakan penargetan WebKit dan properti konten adalah bahwa beberapa klien email, seperti Airmail dan aplikasi Outlook iOS dan Android, akan mendukung kueri media bertarget WebKit tetapi bukan properti konten, membuat tweet tidak terlihat. Namun, mengingat bahwa klien email ini adalah bagian yang sangat kecil dari audiens kami (kurang dari 1%), ini adalah pengorbanan yang layak dilakukan.

Gambar Dinamis untuk Klien Email Non-WebKit

Untuk klien email non-WebKit, kami menggunakan metode yang lebih tradisional untuk menampilkan gambar dinamis karena properti konten CSS tidak didukung dengan baik di klien email di luar WebKit.

Dalam email tersebut, kami mereferensikan gambar dinamis dari umpan 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 untuk muncul di umpan langsung!

Kami membuat halaman web sederhana hanya dari umpan Twitter menggunakan HTML dan CSS yang sama dari email. Kami hanya mengambil tangkapan layar umpan pada dimensi yang sama 600×902 melalui utilitas baris perintah wkhtmltoimage dan memperbarui gambar yang sama secara dinamis setiap 10 detik.

Karena kami menggunakan HTML dan CSS untuk tampilan WebKit, kami menyembunyikan gambar di WebKit untuk menghindari duplikat feed:

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

Dengan teknik ini, umpan Twitter langsung bekerja bahkan di klien yang paling bermasalah (ahem, Outlook) dan memungkinkan sebagian besar pelanggan kami untuk bergabung dalam kesenangan!

Satu-satunya kelemahan utama dari implementasi gambar dinamis ini adalah bahwa Gmail menyimpan gambar-gambarnya. Akibatnya, pengguna Gmail tidak mengalami umpan Twitter langsung. Sebagai gantinya, mereka melihat delapan tweet terbaru dan pesan khusus untuk melihat versi web email untuk efek penuh:

gmail-twitter-feed

Bagaimana Kami Membangun Integrasi Twitter Dinamis

Kevin Thompson, pengembang pemasaran kami, adalah dalang di balik integrasi Twitter yang sebenarnya. Dia membuat aplikasi yang sangat sederhana yang dibangun di atas kerangka kerja Sinatra dan dihosting di Heroku. Anda dapat memeriksa kode dan mencobanya sendiri dengan mengikuti petunjuk di Github. Tes awal ini membuktikan bahwa mungkin untuk menghasilkan tweet dalam CSS, memuat stylesheet eksternal di beberapa klien email, dan bahwa klien tersebut dapat mengambil CSS terbaru setiap kali email dibuka.

Dari sana, aplikasi mulai menjadi sedikit lebih kompleks. Karena Twitter memberlakukan batasan pada jumlah permintaan yang Anda buat ke API, kami perlu memastikan bahwa kami tidak akan melebihi batas 150 permintaan per 15 menit yang dialokasikan untuk kueri penelusuran. Untuk mengatasi masalah ini, kami menambahkan proses kedua ke aplikasi Heroku kami. Proses ini berjalan di latar belakang, mengambil tweet setiap 10 detik, dan menyimpannya dalam cache. Proses aplikasi utama kemudian akan memuat tweet dari cache alih-alih mencarinya secara langsung melalui Twitter.

Kevin juga harus mempertimbangkan skalabilitas dan kecepatan. Meskipun kami memiliki solusi untuk tetap berada dalam batas API Twitter, server tunggal kami kemungkinan besar tidak akan dapat memproses jumlah permintaan yang diharapkan dari 200.000+ penerima email kami. Untuk mengatasi ini, kami menerapkan Amazon CloudFront CDN, memungkinkan kami untuk mendukung lebih banyak permintaan untuk aset kami dan juga mendistribusikannya secara global untuk memastikan file dimuat dengan cepat untuk seluruh audiens kami. Dalam aplikasi Sinatra kami, Kevin juga menambahkan header Cache-Control, yang menginstruksikan CloudFront untuk mengakhiri aset setelah 10 detik. Ini memaksanya untuk meminta konten baru dari aplikasi kami lebih sering.

Untuk menjaga hasil sesegar mungkin tanpa melebihi batas kecepatan API Twitter, kami merender dan meng-cache file CSS dan gambar dinamis setiap 10 detik dengan hasil pencarian Twitter kami.

Untuk mengelola konten tweet, istilah pencarian Twitter dan konten/pengguna yang diblokir dikontrol menggunakan variabel lingkungan. Meskipun mengubah variabel lingkungan di Heroku berarti aplikasi kita harus dimulai ulang, karena aset didistribusikan melalui CDN dan aplikasinya sangat sederhana, memulai ulang hanya membutuhkan beberapa detik dan tidak akan terlalu mencolok. Juga, karena Heroku menyediakan antarmuka pengguna untuk mengedit variabel lingkungan, tim pemasaran kami dapat membuat perubahan pada istilah pencarian dan memblokir konten yang diperlukan.

Jika metode ini tampak terlalu rumit atau memakan waktu bagi Anda, ada perusahaan pihak ketiga seperti Movable Ink, LiveClicker, PowerInbox dan Avari yang mengkhususkan diri dalam konten dinamis untuk email.

Memfilter Tweet Buruk

Kekhawatiran besar bagi kami saat menggabungkan umpan twitter dinamis langsung adalah melepaskan kendali atas konten email kami—menghasilkan beberapa "tweet buruk" yang muncul di aliran. Beberapa orang di Twitter menunjukkan ini:

Pada saat yang sama, kami ingin menyediakan umpan tweet mentah yang tidak difilter sedekat mungkin untuk mempertahankan faktor "wow". Hipotesis kami adalah bahwa tweet yang buruk akan menjadi skenario kasus tepi dan akan dihapus dari umpan melalui aktivitas konstan. Jadi, awalnya kami mengandalkan filter pencarian Twitter untuk menyingkirkan konten yang kurang ideal.

Namun, kami ingin memiliki filter tambahan, jadi kami juga memberi diri kami kemampuan untuk memblokir nama pengguna dan string teks tertentu setelah mengambil hasil dari Twitter. Kami akhirnya memutuskan untuk tidak mengizinkan foto tweet untuk ada di aliran sama sekali, karena itu bisa menjadi sulit diatur dan lebih berbahaya daripada sekadar teks. Selain itu, tidak mungkin untuk memasukkan tautan secara dinamis melalui properti CSS konten, jadi tidak ada tautan di tweet mana pun yang berfungsi—tautan hanya ditampilkan sebagai teks. Semua tweet ditautkan langsung ke aliran tweet #TEDC15.

Sebagai failsafe terakhir, kami memiliki opsi untuk menonaktifkan hasil pencarian Twitter waktu nyata sepenuhnya, kembali ke daftar tweet favorit yang difilter dari akun Twitter @emaildesignconf kami. Pada akhirnya, hanya ada beberapa tweet buruk yang perlu dihapus. Dan, sampai sekarang, kami tidak harus menggunakan failsafe terakhir untuk beralih ke tweet favorit sama sekali—high five #emailgeeks!

Kunci? Memastikan kami menguji semuanya dari atas ke bawah. Pastikan desain Anda terlihat bagus di kotak masuk yang digunakan pelanggan Anda dengan Litmus.

Uji semuanya dari atas ke bawah

Pratinjau email di 50+ dan tarik napas lega saat mencoba fitur email paling gila sekalipun, seperti umpan Twitter langsung.

Coba Lakmus gratis →

Reaksi yang sangat positif

Audiens kami pasti menyukai implementasi yang menyenangkan dan unik ini dalam email. Itu benar-benar membuat email menjadi pengalaman interaktif dan komunal yang dapat diikuti oleh semua orang. Reaksi dari Twitter sangat berharga dan bahkan mengikuti beberapa tema serupa.

Beberapa orang mempertanyakan apakah itu benar-benar nyata:

Banyak yang hanya menatapnya:

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

Sekelompok orang menyapa orang lain:

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

Ada beberapa penyebutan tentang sihir, sihir, dan Harry Potter:

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

Serangkaian tindakan tolol dan kekejaman juga terjadi:

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

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

Untuk melengkapi semua ini, banyak pikiran orang terpesona:

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

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

Melihat kinerja

Kami terpesona oleh hasil dari kampanye ini! Lebih dari 53% dari pembukaan kami datang di klien email WebKit, begitu banyak pengguna kami melihat versi yang semakin ditingkatkan. Secara total, ada 750+ tweet tentang #TEDC15 dalam 24 jam pertama setelah mengirim email. Selain itu, email tersebut membantu mendorong lebih dari 4.000 pengunjung baru ke situs web kami dan menghasilkan lebih dari 1.000 prospek baru dalam waktu yang sama! Belum lagi, email ini mendapatkan interaksi terbaik yang pernah kami lihat dari email mana pun yang pernah kami kirim—hampir 60% pengguna melihat email tersebut selama lebih dari 18 detik!

Tangkapan Layar 26-05-2015 pukul 15.48.42

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di komentar di bawah, bergabung dengan utas Komunitas Litmus tentang topik tersebut, atau tweet @KevinMandeville dan @KevinThompson!

Dapatkan Email Luar Biasa

Jangan lewatkan email mengejutkan kami berikutnya—daftar untuk menerima berita dan informasi tentang segala sesuatu yang terjadi di Litmus.