HTMLメールでライブダイナミックTwitterフィードをコーディングする方法

公開: 2015-05-26

2015年にLitmusLive（以前のEmail Design Conference）のロジスティクスを特定し始めたとき、ローンチEメールを昨年よりも大きくより良いものにすることについての会話が始まりました。 電子メールでHTML5ビデオの背景技術をどのように上回っていますか？ 動的コンテンツを使用する：ライブTwitterフィード。

はい、メールでのTwitterフィード。

私たちの目標は2つありました。それは、会議への関心を高め、メールで革新的で刺激的な手法を使用することです。 多くのブレーンストーミングセッションの後、動的コンテンツの一般的なアプローチを使用することにしましたが、ひねりを加えました。

tedc15-メール

メール全体をブラウザで表示→

ここで完全なコードを表示し、ここでLitmusテスト結果を表示して、40を超える電子メールクライアントでどのように表示されるかを確認することもできます。

電子メールの動的コンテンツ

電子メールの動的コンテンツは新しい概念ではありません。 実際、パーソナライズされたターゲットを絞った電子メールを作成するために頻繁に使用されます。 歴史的に、動的コンテンツはテキストまたは画像を使用して厳密に実装され、ESPを介してマージタグまたは変数を介してプルされてきました。 動的画像は単一のソースファイルにリンクされ、動的に上書きされて、事前定義されたパーソナライズパラメーターに基づいてサブスクライバーの特定のサブセットの新しい画像が表示されます。 これらの方法はどちらも、サブスクライバー向けに独自のパーソナライズされた電子メールエクスペリエンスを作成することを可能にします。

起動メールで動的画像を使用して、いくつかの人気のあるメールクライアントでライブの動的Twitterフィードを機能させました。 ただし、動的コンテンツを実装するためにまったく新しい方法である動的CSSも使用しました。

動的CSSはWebKitクライアントで機能しましたが、非WebKitクライアントを使用するサブスクライバーの動的画像を使用して適切なフォールバックを実装する必要がありました。 そうは言っても、ライブTwitterフィードは次の受信トレイで（何らかの形で！）サポートされていました。

  • AOLメール
    ダイナミックイメージ
  • アップルメール
    動的CSS
  • iOS（ネイティブメールアプリ）
    動的CSS
  • 展望（2000-2013）
    ダイナミックイメージ
  • Outlook for Mac（2011＆2016）
    動的CSS
  • Outlook.com
    ダイナミックイメージ
  • サンダーバード
    ダイナミックイメージ
  • ウインドウズの電話
    ダイナミックイメージ
  • Windowsメール
    ダイナミックイメージ
  • WindowsLiveメール
    ダイナミックイメージ
  • Yahoo! 郵便
    ダイナミックイメージ

WebKit電子メールクライアント用の動的CSSコンテンツ

すべての電子メールクライアントに動的画像を使用することもできましたが、iPhoneやiPadのネイティブ電子メールクライアントなどのWebKit電子メールクライアントのプログレッシブエンハンスメントに動的CSSを使用して、Twitterフィードをよりリアルに感じさせることを選択しました。

では、どのようにしてそれを機能させたのでしょうか？ ＃TEDC15ハッシュタグを含む最新の15のツイートを使用して、デフォルトで最初の5つのツイートを表示し、残りのツイートを1分間に1つずつアニメーション化しました。 これにより、ツイートストリームをリアルタイムで感じさせることができ、人々のエンゲージメントをより長く維持できるという追加のメリットがありました。

10秒ごとにCSSファイルを更新しましたが、電子メールの実際のコンテンツを同じ方法で更新することはできませんでした。機能するには、ドキュメントを完全に更新する必要がありました。 更新されたツイートを表示するには、ユーザーは電子メールを再度開くか、Webバージョンを更新する必要がありました。 理想的ではありませんが、実際には非常に魅力的であることが証明されました。

ライブ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以外の電子メールクライアントの場合、CSSコンテンツプロパティはWebKit以外の電子メールクライアントでは十分にサポートされていないため、動的画像を表示する従来の方法を使用しました。

メールでは、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フィードだけの簡単なWebページを作成しました。 コマンドラインユーティリティwkhtmltoimageを使用して、600×902の同じサイズでフィードのスクリーンショットを撮り、同じ画像を10秒ごとに動的に更新しました。

WebKitビューにHTMLとCSSを使用していたため、フィードの重複を避けるためにWebKitで画像を非表示にしました。

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

この手法を使用すると、ライブTwitterフィードは、最も厄介なクライアント（ええと、Outlook）でも機能し、サブスクライバーの大多数が楽しみに参加できるようになりました。

この動的な画像の実装の唯一の大きな欠点は、Gmailが画像をキャッシュすることです。 その結果、GmailユーザーはライブTwitterフィードを体験しませんでした。 代わりに、最新の8つのツイートと特別なメッセージを見て、電子メールのWebバージョンを表示して完全な効果を確認しました。

gmail-twitter-feed

動的なTwitter統合を構築した方法

私たちのマーケティング開発者であるKevinThompsonは、実際のTwitter統合の背後にある首謀者でした。 彼は、Sinatraフレームワーク上に構築され、Herokuでホストされる非常に単純なアプリケーションを作成しました。 Githubの指示に従って、コードをチェックアウトして自分で試すことができます。 この最初のテストでは、CSSでツイートを生成し、少数の電子メールクライアントに外部スタイルシートをロードし、それらのクライアントが電子メールを開くたびに最新のCSSを取得できることを証明しました。

そこから、アプリケーションは少し複雑になり始めました。 TwitterはAPIに対して行うリクエストの数に制限を課しているため、検索クエリに割り当てられる15分あたり150リクエストの制限を超えないようにする必要がありました。 この問題に対処するために、Herokuアプリケーションに2番目のプロセスを追加しました。 このプロセスはバックグラウンドで実行され、10秒ごとにツイートをフェッチして、キャッシュに保存しました。 メインのアプリケーションプロセスは、Twitterから直接ツイートを検索するのではなく、キャッシュからツイートを読み込みます。

Kevinは、スケーラビリティと速度も考慮に入れる必要がありました。 TwitterのAPI制限内にとどまるためのソリューションはありましたが、単一のサーバーでは、メールの20万人以上の受信者からの予想数のリクエストを処理できない可能性があります。 これを解決するために、Amazon CloudFront CDNを実装しました。これにより、アセットに対するはるかに多くのリクエストをサポートし、それらをグローバルに分散して、オーディエンス全体にファイルがすばやく読み込まれるようにしました。 Sinatraアプリケーションでは、KevinはCache-Controlヘッダーも追加しました。これは、CloudFrontに10秒後にアセットを期限切れにするように指示しました。 これにより、アプリケーションから新しいコンテンツをより頻繁に要求する必要がありました。

TwitterのAPIのレート制限を超えずに結果を可能な限り新鮮に保つために、Twitter検索の結果を使用して動的CSSファイルと画像ファイルを10秒ごとにレンダリングしてキャッシュしました。

ツイートのコンテンツを管理するために、Twitterの検索用語とブロックされたコンテンツ/ユーザーの両方が環境変数を使用して制御されました。 Herokuで環境変数を変更すると、アプリケーションを再起動する必要がありますが、アセットはCDNを介して配布され、アプリケーションは非常に単純であったため、再起動には数秒しかかからず、まったく気付かれませんでした。 また、Herokuは環境変数を編集するためのユーザーインターフェイスを提供するため、マーケティングチームは必要に応じて検索用語を変更し、コンテンツをブロックすることができました。

これらの方法が複雑すぎたり、時間がかかったりする場合は、Movable Ink、LiveClicker、PowerInbox、Avariなどの電子メールの動的コンテンツを専門とするサードパーティ企業があります。

悪いツイートのフィルタリング

ライブの動的なTwitterフィードを組み込む際の大きな懸念は、電子メールのコンテンツの制御を放棄することでした。その結果、ストリームに「悪いツイート」が表示されました。 Twitterの何人かの人々はこれを指摘しました：

同時に、「すごい」要素を維持するために、フィルタリングされていない生のツイートのフィードにできるだけ近いものを提供したいと考えました。 私たちの仮説は、悪いツイートはエッジケースのシナリオであり、絶え間ない活動を通じてフィードから排除されるというものでした。 そのため、当初はTwitterの検索フィルターを使用して、理想的とは言えないコンテンツを排除していました。

ただし、追加のフィルターを配置したかったので、Twitterから結果を取得した後、特定のユーザー名とテキスト文字列をブロックする機能も提供しました。 最終的には、ツイート写真をストリームに含めることを許可しないことにしました。これは、テキストだけではなく、手に負えないほど有害になる可能性があるためです。 また、コンテンツのCSSプロパティを介してリンクを動的に挿入することは不可能であるため、ツイート内のリンクも機能せず、単にテキストとして表示されていました。 すべてのツイートは、＃TEDC15ツイートストリームに直接リンクされていました。

最後のフェイルセーフとして、リアルタイムのTwitter検索結果を完全に無効にし、@ emaildesignconfTwitterアカウントからのお気に入りのツイートのフィルターされたリストにフォールバックするオプションがありました。 結局、削除する必要のある悪いツイートは2、3しかありませんでした。 そして、今のところ、お気に入りのツイートに切り替えるという最終的なフェイルセーフを使用する必要はまったくありませんでした。ハイタッチの#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時間で、合計で＃TEDC15に関するツイートが750件以上ありました。 さらに、この電子メールは、4,000人を超える新規訪問者を当社のウェブサイトに誘導し、同じ時間内に1,000人を超える新規見込み客を生み出しました。 言うまでもなく、このメールは、これまでに送信したメールの中で最高のエンゲージメントを示しました。ユーザーのほぼ60％が18秒以上メールを閲覧しました。

スクリーンショット2015-05-26at 3.48.42 PM

ご不明な点がございましたら、お気軽に以下のコメントで質問するか、トピックに関するLitmus Communityスレッドに参加するか、@ KevinMandevilleと@KevinThompsonをツイートしてください。

素晴らしいメールを入手する

次の驚異的なメールをお見逃しなく。登録して、リトマスで起こっているすべてのことに関するニュースや情報を受け取りましょう。