كيفية ترميز موجز Twitter الديناميكي المباشر في بريد إلكتروني بتنسيق HTML

نشرت: 2015-05-26

عندما بدأنا في تحديد الخدمات اللوجستية لـ Litmus Live (مؤتمر تصميم البريد الإلكتروني سابقًا) في عام 2015 ، بدأت المحادثات حول جعل بريدنا الإلكتروني الذي تم إطلاقه أكبر وأفضل من العام الماضي. كيف نتصدر تقنية خلفية فيديو HTML5 في البريد الإلكتروني؟ باستخدام المحتوى الديناميكي: موجز Twitter المباشر.

نعم ، تغذية Twitter في بريد إلكتروني .

كانت أهدافنا ذات شقين: إثارة الاهتمام بالمؤتمر واستخدام تقنية مبتكرة وملهمة في البريد الإلكتروني للقيام بذلك. بعد العديد من جلسات العصف الذهني ، قررنا استخدام النهج المشترك للمحتوى الديناميكي ، ولكن مع بعض التغيير.

tedc15- البريد الإلكتروني

عرض البريد الإلكتروني بالكامل في المتصفح →

يمكنك أيضًا عرض الكود الكامل هنا ونتائج اختبار Litmus هنا لمعرفة كيفية عرضها عبر أكثر من 40 عميل بريد إلكتروني.

المحتوى الديناميكي في البريد الإلكتروني

المحتوى الديناميكي في البريد الإلكتروني ليس مفهومًا جديدًا. في الواقع ، يتم استخدامه بشكل متكرر لإنشاء رسائل بريد إلكتروني مخصصة وموجهة. تاريخيًا ، تم تنفيذ المحتوى الديناميكي بشكل صارم من خلال استخدام النص أو الصور ، وتم سحبه من خلال علامات أو متغيرات الدمج عبر ESP. ترتبط الصور الديناميكية بملف مصدر واحد ، يتم الكتابة فوقه ديناميكيًا لعرض صورة جديدة لمجموعة فرعية معينة من المشتركين استنادًا إلى معلمات التخصيص المحددة مسبقًا. تتيح لك هاتان الطريقتان إنشاء تجربة بريد إلكتروني فريدة ومخصصة للمشتركين لديك.

استخدمنا صورًا ديناميكية في بريدنا الإلكتروني للإطلاق لجعل موجز Twitter الديناميكي المباشر يعمل عبر العديد من عملاء البريد الإلكتروني المشهورين. ومع ذلك ، فقد استخدمنا أيضًا طريقة جديدة تمامًا لتنفيذ المحتوى الديناميكي: CSS الديناميكي.

أثناء عمل CSS الديناميكي لعملاء WebKit ، كنا بحاجة إلى تنفيذ احتياطي مناسب باستخدام الصور الديناميكية لمشتركينا الذين يستخدمون عملاء ليسوا من WebKit. ومع ذلك ، تم دعم موجز Twitter المباشر (بطريقة أو بأخرى!) في صناديق البريد الوارد التالية:

  • بريد أميريكا أون لاين
    صورة ديناميكية
  • بريد أبل
    ديناميكي CSS
  • iOS (تطبيق البريد الإلكتروني الأصلي)
    ديناميكي CSS
  • التوقعات (2000-2013)
    صورة ديناميكية
  • Outlook لنظام التشغيل Mac (2011 و 2016)
    ديناميكي CSS
  • Outlook.com
    صورة ديناميكية
  • ثندربيرد
    صورة ديناميكية
  • هاتف ويندوز
    صورة ديناميكية
  • بريد Windows
    صورة ديناميكية
  • الايميل الالكتروني الخاص بميكروسوفت
    صورة ديناميكية
  • ياهو! بريد
    صورة ديناميكية

محتوى CSS الديناميكي لعملاء البريد الإلكتروني لـ WebKit

بينما كان بإمكاننا استخدام الصور الديناميكية لجميع عملاء البريد الإلكتروني ، فقد اخترنا استخدام CSS الديناميكي للتحسين التدريجي في عملاء البريد الإلكتروني WebKit ، مثل عملاء البريد الإلكتروني الأصليين لـ iPhone و iPad ، لجعل موجز Twitter يبدو أكثر واقعية.

فكيف جعلناها تعمل؟ باستخدام أحدث خمس عشرة تغريدة تتضمن هاشتاج # TEDC15 ، قمنا بعرض أول 5 تغريدات بشكل افتراضي ، ثم قمنا بتحريك التغريدات المتبقية واحدة تلو الأخرى على مدى دقيقة. سمح لنا ذلك بجعل دفق التغريدات يشعر بالوقت الحقيقي وكان له فائدة إضافية تتمثل في الحفاظ على مشاركة الأشخاص لفترة أطول.

أثناء قيامنا بتحديث ملف CSS كل 10 ثوانٍ ، لا يمكن تحديث المحتوى الفعلي في البريد الإلكتروني بنفس الطريقة - فقد احتاج إلى تحديث كامل للمستند حتى يعمل. يحتاج المستخدمون إلى إعادة فتح البريد الإلكتروني أو تحديث إصدار الويب لمشاهدة التغريدات المحدثة. على الرغم من أنها ليست مثالية ، إلا أنها أثبتت بالفعل أنها جذابة للغاية!

لتشغيل موجز Twitter المباشر ، استخدمنا HTML و CSS التي لن يتم عرضها إلا في عملاء WebKit. لتحقيق ذلك ، أنشأنا ملفات <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 المقابل ، مع معلومات التغريدة في خاصية المحتوى:

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

الجانب السلبي الوحيد لاستخدام استهداف WebKit وخاصية المحتوى هو أن بعض عملاء البريد الإلكتروني ، مثل Airmail وتطبيق Outlook iOS و Android ، سيدعمون استعلام الوسائط الذي يستهدف WebKit وليس خاصية المحتوى ، مما يجعل التغريدات غير مرئية. ولكن نظرًا لأن عملاء البريد الإلكتروني هؤلاء هم جزء صغير جدًا من جمهورنا (أقل من 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 لتظهر في البث المباشر!

لقد أنشأنا صفحة ويب بسيطة من موجز Twitter فقط باستخدام نفس HTML و CSS من البريد الإلكتروني. لقد التقطنا ببساطة لقطة شاشة من الخلاصة بنفس الأبعاد 600 × 902 من خلال الأداة المساعدة لسطر الأوامر wkhtmltoimage وقمنا بتحديث نفس الصورة ديناميكيًا كل 10 ثوانٍ.

نظرًا لأننا كنا نستخدم HTML و CSS لعرض WebKit ، فقد أخفنا الصورة في WebKit لتجنب الخلاصات المكررة:

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

باستخدام هذه التقنية ، نجحت خلاصة Twitter المباشرة في العمل حتى مع العملاء الأكثر إزعاجًا (مهم ، Outlook) وسمحت لغالبية مشتركينا بالانضمام إلى المرح!

الجانب السلبي الوحيد لتطبيق الصورة الديناميكي هو أن Gmail يخزن صوره مؤقتًا. نتيجة لذلك ، لم يختبر مستخدمو Gmail موجز Twitter المباشر. بدلاً من ذلك ، رأوا ثمانية من أحدث التغريدات ورسالة خاصة لعرض نسخة الويب الخاصة بالبريد الإلكتروني من أجل التأثير الكامل:

gmail-twitter-feed

كيف أنشأنا التكامل الديناميكي للتويتر

كان Kevin Thompson ، مطور التسويق لدينا ، العقل المدبر وراء تكامل Twitter الفعلي. لقد أنشأ تطبيقًا بسيطًا جدًا مبنيًا على إطار عمل سيناترا وتم استضافته على Heroku. يمكنك التحقق من الكود وتجربته بنفسك باتباع الإرشادات الموجودة على Github. أثبت هذا الاختبار الأولي أنه من الممكن إنشاء تغريدات في CSS ، وتحميل ورقة الأنماط الخارجية في حفنة من عملاء البريد الإلكتروني ، وأن هؤلاء العملاء يمكنهم جلب أحدث CSS في كل مرة يتم فيها فتح البريد الإلكتروني.

من هناك ، بدأ التطبيق يصبح أكثر تعقيدًا بعض الشيء. نظرًا لأن Twitter يفرض قيودًا على عدد الطلبات التي تجريها لواجهة برمجة التطبيقات ، فقد احتجنا إلى التأكد من أننا لن نتجاوز حد 150 طلبًا لكل 15 دقيقة مخصصًا لطلبات البحث. لمعالجة هذه المشكلة ، أضفنا عملية ثانية إلى تطبيق Heroku الخاص بنا. تم تنفيذ هذه العملية في الخلفية ، حيث يتم جلب التغريدات كل 10 ثوانٍ وتخزينها في ذاكرة تخزين مؤقت. ستقوم عملية التطبيق الرئيسية بعد ذلك بتحميل التغريدات من ذاكرة التخزين المؤقت بدلاً من البحث عنها مباشرةً عبر Twitter.

كان على كيفن أيضًا أن يأخذ قابلية التوسع والسرعة في الاعتبار. بينما كان لدينا حل للبقاء ضمن حدود واجهة برمجة تطبيقات Twitter ، فمن المحتمل ألا يكون خادمنا الفردي قادرًا على معالجة العدد المتوقع من الطلبات من أكثر من 200000 مستلم لبريدنا الإلكتروني. لحل هذه المشكلة ، قمنا بتطبيق Amazon CloudFront CDN ، مما يسمح لنا بدعم طلبات أكثر بكثير لأصولنا وتوزيعها أيضًا على مستوى العالم لضمان تحميل الملفات بسرعة لجمهورنا بأكمله. في تطبيق Sinatra الخاص بنا ، أضاف Kevin أيضًا رؤوس Cache-Control ، والتي طلبت من CloudFront انتهاء صلاحية الأصول بعد 10 ثوانٍ. أجبره هذا على طلب محتوى جديد من تطبيقنا بشكل متكرر.

من أجل الحفاظ على النتائج حديثة قدر الإمكان دون تجاوز حدود معدل واجهة برمجة تطبيقات Twitter ، قمنا بتقديم ملفات CSS وملفات الصور الديناميكية وتخزينها مؤقتًا كل 10 ثوانٍ مع نتائج بحث Twitter الخاص بنا.

لإدارة محتوى التغريدات ، تم التحكم في كل من مصطلحات بحث Twitter والمحتوى المحظور / المستخدمين باستخدام متغيرات البيئة. على الرغم من أن تغيير متغيرات البيئة في Heroku يعني أن تطبيقنا سيحتاج إلى إعادة التشغيل ، نظرًا لأنه تم توزيع الأصول من خلال CDN وكان التطبيق بسيطًا جدًا ، إلا أن إعادة التشغيل لم تستغرق سوى بضع ثوانٍ ولن تكون ملحوظة تمامًا. أيضًا ، نظرًا لأن Heroku يوفر واجهة مستخدم لتحرير متغيرات البيئة ، فقد تمكن فريق التسويق لدينا من إجراء تغييرات على مصطلحات البحث وحظر المحتوى حسب الضرورة.

إذا بدت هذه الأساليب معقدة للغاية أو تستغرق وقتًا طويلاً بالنسبة لك ، فهناك شركات خارجية مثل Movable Ink و LiveClicker و PowerInbox و Avari المتخصصة في المحتوى الديناميكي للبريد الإلكتروني.

تصفية التغريدات السيئة

كان مصدر قلقنا الكبير أثناء دمج موجز تويتر الديناميكي المباشر هو التخلي عن التحكم في محتوى بريدنا الإلكتروني - مما أدى إلى ظهور بعض "التغريدات السيئة" في البث. أشار عدد قليل من الأشخاص على Twitter إلى هذا:

في الوقت نفسه ، أردنا توفير أقرب تغذية خام غير مصفاة للتغريدات قدر الإمكان للحفاظ على عامل "نجاح باهر". كانت فرضيتنا أن التغريدات السيئة ستكون سيناريو حالة متطرفة وسيتم مسحها من الخلاصة من خلال النشاط المستمر. لذلك ، اعتمدنا في البداية على عوامل تصفية بحث Twitter لإزالة المحتوى الأقل من المحتوى المثالي.

لكننا أردنا أن يكون لدينا عوامل تصفية إضافية ، لذلك أعطينا أنفسنا أيضًا القدرة على حظر أسماء مستخدمين وسلاسل نصية محددة بعد جلب النتائج من Twitter. قررنا في النهاية عدم السماح بنشر صور التغريدات في الدفق على الإطلاق ، لأن ذلك قد يصبح جامحًا وأكثر ضررًا من مجرد نص. أيضًا ، من المستحيل حقن الروابط ديناميكيًا عبر خاصية content CSS ، لذلك لا تعمل أي روابط في أي تغريدات أيضًا - تم عرضها كنص. تم ربط جميع التغريدات مباشرة بتيار التغريدات # TEDC15.

كآمن أخير للفشل ، كان لدينا خيار تعطيل نتائج بحث Twitter في الوقت الفعلي تمامًا ، والعودة إلى قائمة مفلترة للتغريدات المفضلة من حسابنا على Twitteremaildesignconf. في النهاية ، لم يكن هناك سوى بضع تغريدات سيئة يجب إزالتها. وحتى الآن ، لم نضطر إلى استخدام الأمان النهائي للتبديل إلى التغريدات المفضلة على الإطلاق - خمسة #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 ، لذلك رأى العديد من مستخدمينا الإصدار المحسن بشكل تدريجي. في المجموع ، كان هناك أكثر من 750 تغريدة حول # TEDC15 في أول 24 ساعة بعد إرسال البريد الإلكتروني. بالإضافة إلى ذلك ، ساعد البريد الإلكتروني في جذب أكثر من 4000 زائر جديد إلى موقعنا الإلكتروني وولد أكثر من 1000 عميل محتمل جديد في نفس الفترة الزمنية! ناهيك عن أن هذا البريد الإلكتروني شهد أفضل تفاعل رأيناه من أي بريد إلكتروني أرسلناه على الإطلاق - شاهد 60٪ تقريبًا من المستخدمين البريد الإلكتروني لأكثر من 18 ثانية!

لقطة شاشة 2015-05-26 الساعة 3.48.42 مساءً

إذا كانت لديك أي أسئلة ، فالرجاء عدم التردد في طرحها في التعليقات أدناه ، أو الانضمام إلى سلسلة رسائل Litmus Community حول هذا الموضوع ، أو إرسال تغريدة علىKevinMandeville وKevinThompson!

احصل على رسائل بريد إلكتروني رائعة

لا تفوت بريدنا الإلكتروني التالي المذهل - اشترك لتلقي الأخبار والمعلومات حول كل ما يحدث في Litmus.