如何在 HTML 電子郵件中編寫實時動態 Twitter 提要

已發表: 2015-05-26

當我們在 2015 年開始確定 Litmus Live（前身為電子郵件設計會議）的後勤工作時，關於讓我們的發布電子郵件比去年更大更好的討論開始了。 我們如何在電子郵件中使用 HTML5 視頻背景技術？ 通過使用動態內容：實時 Twitter 提要。

是的，電子郵件中的 Twitter 提要。

我們的目標是雙重的：激發對會議的興趣，並在電子郵件中使用創新和鼓舞人心的技術來做到這一點。 經過多次頭腦風暴會議，我們決定使用動態內容的常見方法，但有所不同。

tedc15-email

在瀏覽器中查看完整電子郵件 →

您還可以在此處查看完整代碼和在此處查看 Litmus 測試結果，以了解它在 40 多個電子郵件客戶端中的顯示情況。

電子郵件中的動態內容

電子郵件中的動態內容並不是一個新概念。 事實上，它經常用於創建個性化、有針對性的電子郵件。 從歷史上看，動態內容嚴格通過使用文本或圖像來實現，並通過 ESP 拉取合併標籤或變量。 動態圖像鏈接到單個源文件，該文件被動態覆蓋以根據預定義的個性化參數為特定訂閱者子集顯示新圖像。 這兩種方法都使您能夠為訂閱者創建獨特的個性化電子郵件體驗。

我們在發布電子郵件中使用了動態圖像，使實時動態 Twitter 提要在多個流行的電子郵件客戶端上運行。 但是，我們還使用了一種全新的方法來實現動態內容：動態 CSS。

雖然動態 CSS 適用於 WebKit 客戶端，但我們需要使用動態圖像為使用非 WebKit 客戶端的訂閱者實現適當的回退。 話雖如此，以下收件箱支持實時 Twitter 提要（以一種或另一種方式！）：

  • 美國在線郵件
    動態圖像
  • 蘋果郵箱
    動態 CSS
  • iOS（本機電子郵件應用程序）
    動態 CSS
  • 展望（2000-2013）
    動態圖像
  • Mac 版 Outlook（2011 年和 2016 年）
    動態 CSS
  • 展望網
    動態圖像
  • 雷鳥
    動態圖像
  • 視窗電話
    動態圖像
  • 視窗郵件
    動態圖像
  • Windows Live 郵件
    動態圖像
  • 雅虎！ 郵件
    動態圖像

WebKit 電子郵件客戶端的動態 CSS 內容

雖然我們可以為所有電子郵件客戶端使用動態圖像，但我們選擇使用動態 CSS 在 WebKit 電子郵件客戶端（如 iPhone 和 iPad 原生電子郵件客戶端）中進行漸進式增強，以使 Twitter 提要感覺更逼真。

那麼我們是如何讓它發揮作用的呢？ 使用包含#TEDC15 主題標籤的 15 條最新推文，我們默認顯示前 5 條推文，然後在一分鐘內對其餘推文進行動畫處理。 這使我們能夠使推文流感覺實時，並具有讓人們參與更長時間的額外好處。

雖然我們每 10 秒更新一次 CSS 文件，但電子郵件中的實際內容無法以同樣的方式更新——它需要完全刷新文檔才能工作。 用戶需要重新打開電子郵件或刷新網絡版本才能看到更新的推文。 雖然不理想，但事實證明它非常引人入勝！

為了讓實時 twitter 提要工作，我們使用了只能在 WebKit 客戶端中顯示的 HTML 和 CSS。 為了實現這一點，我們創建了空的 <div> 和 <span> 並使用 content CSS 屬性來添加 Twitter 用戶姓名、句柄、時間戳和推文副本的內容。

這是 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，我們依賴於每 10 秒更新一次並包含在我們的電子郵件中的外部樣式表，如下所示：

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

這是相應的 CSS，在 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"; }

推文的 CSS 被封裝在一個媒體查詢中，允許我們僅在基於 WebKit 的電子郵件客戶端中顯示它：

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

通過將空的 <div> 用於默認結構，非 WebKit 電子郵件客戶端不會顯示內容。 然後，我們回到了非 WebKit 訂閱者的動態 Twitter 提要的圖像。

使用 WebKit-targeting 和 content 屬性的唯一缺點是一些電子郵件客戶端，例如 Airmail 和 Outlook iOS 和 Android 應用程序，將支持 WebKit-targeted 媒體查詢而不是 content 屬性，從而使推文不可見。 但是，鑑於這些電子郵件客戶端只占我們受眾的很小一部分（不到 1%），這是值得做出的犧牲。

非 WebKit 電子郵件客戶端的動態圖像

對於非 WebKit 電子郵件客戶端，我們使用了更傳統的顯示動態圖像的方法，因為 WebKit 之外的電子郵件客戶端不支持 CSS 內容屬性。

在電子郵件中，我們引用了 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!"/>
推特#TEDC15 出現在實時提要中！

我們使用電子郵件中的相同 HTML 和 CSS 創建了一個僅包含 Twitter 提要的簡單網頁。 我們只是通過命令行實用程序 wkhtmltoimage 截取了相同尺寸 600×902 的提要截圖，並每 10 秒動態更新相同的圖像。

由於我們在 WebKit 視圖中使用 HTML 和 CSS，我們將圖像隱藏在 WebKit 中以避免重複提要：

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

使用這種技術，即使是最麻煩的客戶（咳咳，Outlook），實時 Twitter 提要也能工作，並允許我們的大多數訂閱者加入其中！

這種動態圖像實現的唯一主要缺點是 Gmail 會緩存其圖像。 因此，Gmail 用戶無法體驗實時 Twitter 提要。 相反，他們看到了 8 條最新的推文和一條特殊信息，用於查看電子郵件的網絡版本以獲得完整效果：

gmail-twitter-feed

我們如何構建動態 Twitter 集成

我們的營銷開發人員凱文·湯普森 (Kevin Thompson) 是實際 Twitter 集成背後的策劃者。 他創建了一個基於 Sinatra 框架並託管在 Heroku 上的非常簡單的應用程序。 您可以按照 Github 上的說明查看代碼並親自試用。 這個初始測試證明可以在 CSS 中生成推文，在少數電子郵件客戶端加載外部樣式表，並且這些客戶端可以在每次打開電子郵件時獲取最新的 CSS。

從那時起，應用程序開始變得稍微複雜一些。 由於 Twitter 對您向 API 發出的請求數量施加了限制，因此我們需要確保不會超過分配給搜索查詢的每 15 分鐘 150 個請求的限制。 為了解決這個問題，我們在 Heroku 應用程序中添加了第二個進程。 這個過程在後台運行，每 10 秒獲取一次推文，並將它們存儲在緩存中。 然後，主應用程序進程將從緩存中加載推文，而不是直接通過 Twitter 搜索它們。

Kevin 還必須考慮可擴展性和速度。 雖然我們有一個保持在 Twitter 的 API 限制內的解決方案，但我們的單個服務器可能無法處理來自我們電子郵件的 200,000 多個收件人的預期數量的請求。 為了解決這個問題，我們實施了 Amazon CloudFront CDN，使我們能夠支持對我們資產的更多請求，並將它們分發到全球，以確保為我們的所有受眾快速加載文件。 在我們的 Sinatra 應用程序中，Kevin 還添加了 Cache-Control 標頭，指示 CloudFront 在 10 秒後使資產過期。 這迫使它更頻繁地從我們的應用程序請求新內容。

為了在不超過 Twitter 的 API 速率限制的情況下保持結果盡可能新鮮，我們每 10 秒渲染和緩存一次動態 CSS 和圖像文件以及我們的 Twitter 搜索結果。

為了管理推文的內容，推特蒐索詞和被阻止的內容/用戶都使用環境變量進行控制。 雖然更改 Heroku 上的環境變量意味著我們的應用程序需要重新啟動，但由於資產是通過 CDN 分發的，並且應用程序非常簡單，因此重新啟動只需幾秒鐘，並且完全不會引起注意。 此外，由於 Heroku 提供了用於編輯環境變量的用戶界面，我們的營銷團隊能夠根據需要更改搜索詞並阻止內容。

如果這些方法對您來說太複雜或太耗時，那麼有專門從事電子郵件動態內容的第三方公司，例如 Movable Ink、LiveClicker、PowerInbox 和 Avari。

過濾不良推文

在合併實時動態 twitter 提要時，我們的一個大問題是放棄對我們電子郵件內容的控制——導致一些“糟糕的推文”出現在信息流中。 Twitter 上的一些人指出了這一點：

與此同時，我們希望提供盡可能接近原始、未經過濾的推文提要，以保持“哇”的因素。 我們的假設是，糟糕的推文將是一種邊緣情況，並且會通過不斷的活動從提要中清除。 因此，我們最初依靠 Twitter 的搜索過濾器來剔除不太理想的內容。

但是，我們希望有額外的過濾器，因此我們還讓自己能夠在從 Twitter 獲取結果後阻止特定的用戶名和文本字符串。 我們最終決定完全不允許推文照片出現在流中，因為這可能會變得不守規矩，而且比文字更有害。 此外，不可能通過內容 CSS 屬性動態注入鏈接，因此任何推文中的鏈接也無法正常工作——它們只是顯示為文本。 所有推文都直接鏈接到#TEDC15 推文流。

作為最後的故障保護，我們可以選擇完全禁用實時 Twitter 搜索結果，從我們的 @emaildesignconf Twitter 帳戶返回到過濾後的收藏推文列表。 最後，只有幾條糟糕的推文需要刪除。 而且，到目前為止，我們根本不必使用切換到最喜歡的推文的最終故障保護措施 - 高 5 #emailgeeks！

鑰匙？ 確保我們從上到下測試了所有內容。 確保您的設計在訂閱者使用 Litmus 的收件箱中看起來很棒。

從上到下測試一切

在 50 + 上預覽電子郵件並在嘗試最瘋狂的電子郵件功能時鬆一口氣，例如實時 Twitter 提要。

免費試用 Litmus →

壓倒性的積極反應

我們的聽眾絕對喜歡這種有趣且獨特的電子郵件實現方式。 它實際上使電子郵件成為一種每個人都可以參與的交互式和公共體驗。Twitter 的反應是無價的，甚至遵循了一些類似的主題。

有些人質疑它是否真的存在：

許多人只是盯著它：

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

一群人跟別人打招呼：

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

有幾次提到魔法、巫術和哈利波特：

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

一系列的愚蠢和惡作劇也隨之而來：

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

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

最重要的是，很多人的頭腦都被吹走了：

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

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

性能概覽

我們對這次活動的結果感到震驚！ 我們超過 53% 的打開來自 WebKit 電子郵件客戶端，因此我們的許多用戶看到了逐步增強的版本。 在發送電子郵件後的前 24 小時內，總共有 750 多條關於#TEDC15 的推文。 此外，這封電子郵件幫助我們的網站吸引了 4,000 多名新訪問者，並在相同的時間內產生了 1,000 多名新潛在客戶！ 更不用說，這封電子郵件在我們發送過的任何電子郵件中都獲得了最好的參與度——幾乎 60% 的用戶查看了這封電子郵件超過 18 秒！

屏幕截圖 2015-05-26 at 3.48.42 PM

如果您有任何問題，請隨時在下面的評論中提問，加入 Litmus 社區主題主題，或推特 @KevinMandeville 和 @KevinThompson！

收到很棒的電子郵件

不要錯過我們的下一封令人興奮的電子郵件 - 註冊以接收有關 Litmus 發生的一切的新聞和信息。