أسس AMP للبريد الإلكتروني

Important: this documentation is not applicable to your currently selected format stories!

إذا كان AMP مألوفًا لديك، فهذه أخبار رائعة! حيث إن AMP لرسائل البريد الإلكتروني مجرد مجموعة فرعية من مكتبة AMP HTML. وإذا لم تكن كذلك، فهذه أخبار رائعة أيضًا! حيث سيوفر لك هذا الدليل كل ما تحتاج معرفته للبدء في كتابة رسائل بريد إلكتروني بتنسيق AMP صالحة!

لغة الترميز المطلوبة

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

<!DOCTYPE html>
<html ⚡4email data-css-strict>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    Hello, AMP4EMAIL world.
  </body>
</html>

قام مزودو البريد الإلكتروني الذين يدعمون رسائل البريد الإلكتروني بتنسيق AMP بإعداد فحوصات أمنية لضمان حصول المستخدمين على تجربة ممتعة وآمنة. ويجب أن يفي إنشاء بريد إلكتروني بتنسيق AMP بجميع المتطلبات:

ابدأ بنوع وثيقة <!doctype html>. وهذا معيار لـ HTML أيضًا.
قم بتضمين علامة <html amp4email> من المستوى الأعلى، أو علامة <html ⚡4email> لإضفاء سمات رائعة لبريدك الإلكتروني. إذ يحدد هذا الأمر المستند على أنه بريد إلكتروني بتنسيق AMP لكي يتسنى معاملته على هذا النحو.
حدد كلاً من علامتي <head> و<body>. هذا الأمر اختياري في HTML، لكن AMP تحافظ على أصالة الأشياء!
قم بتضمين العلامة <meta charset="utf-8> على أنها التابع الأول للعلامة <head>. حيث يحدد هذا الأمر الترميز للصفحة.
يتم استيراد مكتبة AMP من خلال علامة <script async src="https://cdn.ampproject.org/v0.js"></script> التي يتم وضعها في <head>. ولن تعمل بدونها أي من الوظائف الرائعة والديناميكية المكتسبة من خلال AMP! كأفضل ممارسة، يجب تضمين هذا الأمر في أقرب وقت ممكن في <head>، مباشرة أسفل العلامة <meta charset="utf-8">.
قم في البداية بإخفاء محتوى البريد الإلكتروني حتى يتم تحميل مكتبة AMP عن طريق وضع معيار AMP للبريد الإلكتروني في <head>.

<head>
  ...
  <style amp4email-boilerplate>
    body {
      visibility: hidden;
    }
  </style>
</head>

عمليات استبدال علامات AMP المحددة

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

الصور

لوضع رسومات في الصفحة على نحو فعال، يتم استبدال كل علامات <img> بـ <amp-img>. حيث تتطلب العلامة <amp-img> عرضًا وارتفاعًا محددين وتدعم نظام مخططات AMP

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

تأتي العلامة <amp-img> مع وسائل قوية ومدمجة للتحكم في التصميم سريع الاستجابة وتعيين العناصر الاحتياطية.

اقرأ المزيد حول استعلامات المخطط والوسائل الخاصة بـ AMP وطريقة تعيين عناصر احتياطية للصور.

صور GIF المتحركة

ابتكرت AMP <amp-anim>، وهي عبارة عن علامة محددة لصور GIF المتحركة من شأنها السماح لوقت تشغيل AMP بتقليل استخدام وحدة المعالجة المركزية عندما تكون الرسوم المتحركة خارج الشاشة. وعلى غرار <amp-img> يتم تحديد العرض والارتفاع، ويجب أن يتضمن العنصر علامة إغلاق.

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

بالإضافة إلى ذلك، فإنه يدعم placeholder تابعًا اختياريًا أثناء تحميل ملف src، ويدعم نظام تخطيط AMP.

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

رسائل البريد الإلكتروني بأسلوب مبتكر

مثل كل عملاء البريد الإلكتروني، يسمح AMP بسمات style الضمنية، ولكنه يدعم CSS ضمن العلامة <style amp-custom> داخل رأس البريد الإلكتروني.

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

ومثل البريد الإلكتروني بلغة HTML، يدعم AMP للبريد الإلكتروني مجموعة فرعية محدودة من محددات CSS وخصائصها.

راجع CSS المدعومة من AMP للبريد الإلكتروني للحصول على قائمة كاملة من CSS المسموح بها عبر عملاء البريد الإلكتروني الذين يدعمون AMP.

يفرض AMP حدًا لحجم التصميم يبلغ 75000 بايت.

مكونات AMP المسموح بها

إن الميزات الديناميكية والمرئية والتفاعلية لمكونات AMP هي الجوانب التي تنقل رسائل البريد الإلكتروني من AMP إلى مستقبل البريد الإلكتروني.

وتكون القائمة الكاملة للمكونات المدعومة في AMP للبريد الإلكتروني متاحة كجزء من مواصفات AMP للبريد الإلكتروني.

المصادقة على الطلبات

غالبًا ما يتطلب محتوى البريد الإلكتروني الديناميكي المخصص مصادقة المستخدم. ومع ذلك، ولحماية بيانات المستخدم؛ قد تكون جميع طلبات HTTP التي يتم إجراؤها من داخل رسائل البريد الإلكتروني في AMP منتمية إلى وكيل ومجردة من ملفات تعريف الارتباط.

ولمصادقة الطلبات المقدمة من رسائل البريد الإلكتروني بتنسيق AMP، يمكنك استخدام رموز الوصول المميزة.

رموز الوصول المميزة

يمكنك استخدام رموز الوصول المميزة لمصادقة المستخدم. إذ يتم توفير رموز الوصول المميزة والتحقق منها عن طريق مرسل البريد الإلكتروني. ويستخدم المرسل الرموز المميزة لضمان أن الأشخاص الذين لديهم حق الوصول إلى البريد الإلكتروني لصفحات AMP هم فقط من يمكنهم تقديم الطلبات الواردة في هذا البريد الإلكتروني. ويجب أن تكون رموز الوصول آمنة على نحو مشفر ومحدودة الوقت والنطاق. حيث تم تضمينها في عنوان URL للطلب.

ويوضح هذا المثال استخدام <amp-list> لعرض البيانات التي تمت المصادقة عليها:

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache"> ... </template>
</amp-list>

وعلى غرار استخدام <amp-form>، قم بوضع رمز الوصول المميز لديك في عنوان URL الخاص بـ action-xhr.

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

مثال

يضع المثال التالي في الحسبان خدمة تدوين ملاحظات افتراضية من شأنها أن تتيح للمستخدمين الذين قاموا بتسجيل الدخول إضافة ملاحظات إلى حساباتهم وعرضها لاحقًا. وترغب الخدمة في إرسال بريد إلكتروني إلى مستخدم، jane@example.com، يتضمن قائمة بالملاحظات التي تم تدوينها مسبقًا. وتتوفر قائمة ملاحظات المستخدم الحالية في نقطة النهاية https://example.com/personal-notes بتنسيق JSON.

وقبل إرسال البريد الإلكتروني تقوم الخدمة بإنشاء رمز وصول مميز محدود الاستخدام وآمن من خلال التشفير إلى jane@example.com: A3a4roX9x. وقد تم تضمين رمز الدخول في اسم الحقل exampletoken داخل طلب الاستعلام عن عنوان URL:

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

وتقع على عاتق https://example.com/personal-notes مسؤولية التحقق من صحة معلمة الرمز المميز التجريبي والعثور على المستخدم المرتبط بالرمز المميز.

رموز وصول مميزة محدودة الاستخدام

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

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

فيما يجب إرسال رموز الوصول المميزة إلى المستخدم كجزء من خاصية url الخاصة بـ HttpActionHandler. على سبيل المثال، إذا كان تطبيقك يتعامل مع طلبات الموافقة على http://www.example.com/approve?requestId=123، فيجب أن تفكر في تضمين معلمة accessToken إضافية إليه والاستماع إلى الطلبات المرسلة إلى http://www.example.com/approve?requestId=123&accessToken=xyz.

ويكون الدمج requestId=123 وaccessToken=xyz هو الواجب عليك إنشائه مسبقًا، مع التأكد من أنه لا يمكن استنتاج accessToken من requestId. ويجب رفض أي طلب موافقة مع requestId=123 ولا accessToken أو مع accessToken لا يساوي xyz. وبمجرد أن يتم تنفيذ هذا الطلب، يجب رفض أي طلب مستقبلي بالمعرِّف نفسه ورمز الوصول المميز أيضًا.

الاختبار في عملاء بريد إلكتروني مختلفين

يوفر عملاء البريد الإلكتروني الذين يدعمون AMP للبريد الإلكتروني أدواتهم الخاصة بالمستندات والاختبار لمساعدتك في التكامل.

راجع اختبار رسائل البريد الإلكتروني من AMP لمزيد من المعلومات والروابط إلى المستندات الخاصة بعميل البريد الإلكتروني.

Written by @CrystalOnScript