تضفي التعليقات التوضيحية على الرسائل الإلكترونية الحيوية على الرسائل الإلكترونية في علامة التبويب "العروض الترويجية" من خلال ميزات مثل الصور والصفقات وتواريخ انتهاء الصلاحية.
عند إضافة تعليقات توضيحية إلى الرسائل الإلكترونية، يمكن لمستخدمي Gmail الاطّلاع على عروضك الترويجية والتفاعل معها مباشرةً من صندوق البريد الوارد. من علامة التبويب "العروض الترويجية"، يمكن للمستخدمين النقر على النص أو الصورة التي تتضمّن تعليقًا توضيحيًا لمعرفة المزيد عن العرض الترويجي، بدون الحاجة إلى فتح الرسالة الإلكترونية.
توضّح هذه الصفحة كيفية إضافة تعليقات توضيحية إلى الرسائل الإلكترونية باستخدام JSON-LD والبيانات الجزئية. لمزيد من المعلومات حول ترميز البريد الإلكتروني، راجِع دليل البدء. للاطّلاع على قائمة بحقول الترميز التي يمكنك استخدامها في التعليقات التوضيحية ضمن الرسائل الإلكترونية، يُرجى الانتقال إلى المستندات المرجعية.
إنشاء تعليقات توضيحية في الرسائل الإلكترونية
يمكنك إضافة تعليقات توضيحية إلى الرسائل الإلكترونية لعرض الميزات التالية في علامة التبويب "العروض الترويجية":
توضّح الأقسام التالية كيفية إنشاء كل نوع من أنواع التعليقات التوضيحية في الرسائل الإلكترونية.
إنشاء تعليق توضيحي للصفقة
تعرض التعليقات التوضيحية الخاصة بالصفقات تفاصيل مستندة إلى النصوص حول عرض ترويجي، مثل رمز ترويجي أو تاريخ انتهاء الصلاحية.
لإنشاء تعليق توضيحي خاص بالصفقات، اتّبِع الخطوات التالية:
- في منصة الرسائل الإلكترونية التسويقية، أنشئ رسالة إلكترونية وافتح أداة تعديل HTML الخاصة بها.
في قسم
head
، أضِف علامةscript
تتضمّن نوع البياناتDiscountOffer
:JSON-LD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="application/ld+json"> [{ "@context": "http://schema.org/", "@type": "DiscountOffer", "description": "DESCRIPTION", "discountCode": "DISCOUNT_CODE", "availabilityStarts": "START_DATE_TIME", "availabilityEnds": "END_DATE_TIME" }] </script> </head> <body> // The message of your email </body> </html>
البيانات الجزئية
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <div itemscope itemtype="http://schema.org/DiscountOffer"> <meta itemprop="description" content="DESCRIPTION"/> <meta itemprop="discountCode" content="DISCOUNT_CODE"/> <meta itemprop="availabilityStarts" content="START_DATE_TIME"/> <meta itemprop="availabilityEnds" content="END_DATE_TIME"/> </div> </head> <body> // The message of your email. </body> </html>
استبدِل القيم التالية. جميع السمات اختيارية. بالنسبة إلى كل سمة، يمكنك إما تضمين قيمة أو حذف السمة من الرمز.
DESCRIPTION
(اختياري): النص الذي يظهر مع شارة الصفقة، مثل20% off
أوFree shipping
.DISCOUNT_CODE
(اختياري): الرمز الترويجي أو رمز الخصم الخاص بالعرض، مثل20TODAY
START_DATE_TIME
(اختيارية): تمثّل هذه السمة تاريخ ووقت بدء العرض بتنسيق ISO 8601، مثل2023-09-25T18:44:37-07:00
.END_DATE_TIME
(اختيارية): تمثّل هذه السمة تاريخ انتهاء العرض الترويجي ووقته بتنسيق ISO 8601، مثل2023-10-25T18:44:37-07:00
.
في علامة
body
، اكتب رسالة بريدك الإلكتروني.
إنشاء رف عرض دوّار للمنتجات
تعرض منصّات العرض الدوّارة للمنتجات معاينات متعددة للصور الخاصة بعرض ترويجي، مثل ما يلي:
يمكنك تضمين ما يصل إلى 10 معاينات للصور في لوحة عرض دوّارة، ويجب أن تكون كل صورة فريدة.
لإنشاء لوحة عرض دوّارة للمنتجات، اتّبِع الخطوات التالية:
- في منصة الرسائل الإلكترونية التسويقية، أنشئ رسالة إلكترونية وافتح أداة تعديل HTML الخاصة بها.
في القسم
head
، أضِف علامةscript
. لكل صورة في لوحة عرض المنتجات الدوّارة، أضِف عنصرPromotionCard
:JSON-LD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="application/ld+json"> [ // Build the first image preview in your product carousel: { "@context": "http://schema.org/", "@type": "PromotionCard", "image": "IMAGE_URL1", "url": "PROMO_URL1", // Optionally, include the following PromotionCard properties: "headline": "HEADLINE1", "price": PRICE1, "priceCurrency": "PRICE_CURRENCY1", "discountValue": DISCOUNT_VALUE1, "position": POSITION }, // Build the second image preview in your product carousel: { "@context": "http://schema.org/", "@type": "PromotionCard", "image": "IMAGE_URL2", "url": "PROMO_URL2", // Optionally, include the following PromotionCard properties: "headline": "HEADLINE2", "price": PRICE2, "priceCurrency": "PRICE_CURRENCY2", "discountValue": DISCOUNT_VALUE2, "position": POSITION } // To include more image previews, add additional PromotionCard objects. // You can include up to 10 image previews in a product carousel. ] </script> </head> <body> // The message of your email </body> </html>
البيانات الجزئية
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> // Build the first image preview in your product carousel: <div itemscope itemtype="http://schema.org/PromotionCard"> <meta itemprop="image" content="IMAGE_URL1"/> <meta itemprop="url" content="PROMO_URL1"/> // Optionally, include the following PromotionCard properties: <meta itemprop="headline" content="HEADLINE1"/> <meta itemprop="price" content="PRICE1"/> <meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/> <meta itemprop="discountValue" content="DISCOUNT_VALUE1"/> <meta itemprop="position" content="POSITION"/> </div> // Build the second image preview in your product carousel: <div itemscope itemtype="http://schema.org/PromotionCard"> <meta itemprop="image" content="IMAGE_URL2"/> <meta itemprop="url" content="PROMO_URL2"/> // Optionally, include the following PromotionCard properties: <meta itemprop="headline" content="HEADLINE2"/> <meta itemprop="price" content="PRICE2"/> <meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/> <meta itemprop="discountValue" content="DISCOUNT_VALUE2"/> <meta itemprop="position" content="POSITION"/> </div> // To include more image previews, add additional PromotionCard objects. // You can include up to 10 image previews in a product carousel. </head> <body> // The message of your email </body> </html>
بالنسبة إلى كل عنصر
PromotionCard
، استبدِل القيم التالية. بالنسبة إلى الخصائص الاختيارية، يمكنك إما تضمين قيمة أو حذف الخاصية من الرمز.IMAGE_URL
: عنوان URL للصورة بتنسيق PNG أو JPEG، مثلhttps://www.example.com/image.png
ونِسب العرض إلى الارتفاع المتوافقة هي 4:5 و1:1 و1.91:1. بالنسبة إلى دوّارات عرض المنتجات، يجب أن يكون لكل صورة عنوان URL فريد وأن تستخدم نسبة العرض إلى الارتفاع نفسها.PROMO_URL
: عنوان URL للعرض الترويجي. عندما ينقر المستخدمون على الصورة من علامة التبويب "العروض الترويجية"، ينتقلون إلى عنوان URL هذا.HEADLINE
(اختياري): وصف من سطر واحد أو سطرَين للعرض الترويجي يظهر أسفل صورة المعاينة.-
PRICE
(اختياري): سعر العرض الترويجي. PRICE_CURRENCY
(اختيارية): تمثّل هذه السمة عملة السعر بتنسيق ISO 4217 المكوّن من 3 أحرف، مثلUSD
. تحدّد هذه السمة رمز العملة المعروض معprice
.DISCOUNT_VALUE
(اختياري): المبلغ المخصوم منprice
لعرض سعر معدَّل. يظهر السعر المعدَّل بجانب السعر الأصلي.على سبيل المثال، إذا كانت قيمة
discountValue
هي25
، وقيمةprice
هي100
، وقيمةpriceCurrency
هيUSD
، سيظهر السعر المعدَّل على النحو التالي:$75
.
POSITION
(اختياري): موضع البطاقة في لوحة العرض الدوّارة
في علامة
body
، اكتب رسالة بريدك الإلكتروني.
إنشاء معاينة لصورة واحدة
تعرض التعليقات التوضيحية لمعاينة صورة واحدة صورة واحدة لعرض منتج مهم في علامة التبويب "العروض الترويجية" في Gmail، مثل ما يلي:
يمكنك استخدام هذه الميزة لصورة واحدة. يجب أن يتلقّى جميع المستلِمين الصورة نفسها وعنوان URL نفسه الخاص بالصورة. يمكنك الاطّلاع على الأسئلة الشائعة للحصول على مزيد من المعلومات.
لإنشاء معاينة لصورة واحدة، اتّبِع الخطوات التالية:
- في منصة الرسائل الإلكترونية التسويقية، أنشئ رسالة إلكترونية وافتح محرِّر HTML الخاص بها.
في قسم
head
، أضِف علامةscript
تتضمّن نوع البياناتPromotionCard
:JSON-LD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="application/ld+json"> [{ "@context": "http://schema.org/", "@type": "PromotionCard", "image": "IMAGE_URL", "url": "PROMO_URL", // Optionally, include the following PromotionCard properties: "headline": "HEADLINE", "price": PRICE, "priceCurrency": "PRICE_CURRENCY", "discountValue": DISCOUNT_VALUE }] </script> </head> <body> // The message of your email </body> </html>
البيانات الجزئية
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> // Build the first image preview in your product carousel: <div itemscope itemtype="http://schema.org/PromotionCard"> <meta itemprop="image" content="IMAGE_URL"/> <meta itemprop="url" content="PROMO_URL"/> // Optionally, include the following PromotionCard properties: <meta itemprop="headline" content="HEADLINE"/> <meta itemprop="price" content="PRICE"/> <meta itemprop="priceCurrency" content="PRICE_CURRENCY"/> <meta itemprop="discountValue" content="DISCOUNT_VALUE"/> </div> </head> <body> // The message of your email </body> </html>
استبدِل القيم التالية. بالنسبة إلى السمات الاختيارية، يمكنك إما تضمين قيمة أو حذف السمة من الرمز.
IMAGE_URL
: عنوان URL الخاص بصورة المعاينة بتنسيق PNG أو JPEG، مثلhttps://www.example.com/image.png
نسبة العرض إلى الارتفاع المتوافقة هي 1.91:1.PROMO_URL
: عند النقر علىimage
، يتم الانتقال إلى عنوان URL الذي يوجّه إلى العرض الترويجي.HEADLINE
(اختياري): وصف من سطر واحد أو سطرَين للعرض الترويجي يظهر أسفل صورة المعاينة.-
PRICE
(اختياري): سعر العرض الترويجي. PRICE_CURRENCY
(اختيارية): تمثّل هذه السمة عملة السعر بتنسيق ISO 4217 المكوّن من 3 أحرف، مثلUSD
. تحدّد هذه السمة رمز العملة المعروض معprice
.DISCOUNT_VALUE
(اختياري): المبلغ المخصوم منprice
لعرض سعر معدَّل. يظهر السعر المعدَّل بجانب السعر الأصلي.على سبيل المثال، إذا كانت قيمة
discountValue
هي25
، وقيمةprice
هي100
، وقيمةpriceCurrency
هيUSD
، سيظهر السعر المعدَّل على النحو التالي:$75
.
في علامة
body
، اكتب رسالة بريدك الإلكتروني.
الخطوات التالية
- يمكنك الاطّلاع على المستندات المرجعية للتعرّف على حقول الترميز المتاحة في الرسائل الإلكترونية.
- مزيد من المعلومات حول أفضل الممارسات المتعلّقة بالتعليقات التوضيحية في الرسائل الإلكترونية