إضافة تعليقات توضيحية إلى الرسائل الإلكترونية في علامة التبويب "الرسائل الترويجية"

تضفي التعليقات التوضيحية للبريد الإلكتروني الحيوية على الرسائل الإلكترونية في علامة التبويب "الرسائل الترويجية" من خلال ميزات مثل الصور والصفقات وتواريخ انتهاء الصلاحية.

عند إضافة تعليقات توضيحية إلى الرسائل الإلكترونية، يمكن لمستخدمي Gmail عرض عروضك الترويجية والتفاعل معها مباشرةً من البريد الوارد. من علامة التبويب "الرسائل الترويجية"، يمكن للمستخدمين النقر على النص أو الصورة التوضيحية لمعرفة المزيد من المعلومات حول العرض الترويجي، بدون الحاجة إلى فتح الرسالة الإلكترونية.

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

إنشاء تعليقات توضيحية عبر البريد الإلكتروني

يمكنك إضافة تعليقات توضيحية إلى الرسائل الإلكترونية لعرض الميزات التالية في علامة التبويب "الرسائل الترويجية":

توضح الأقسام التالية كيفية إنشاء كل نوع من أنواع تعليقات البريد الإلكتروني.

إنشاء تعليق توضيحي للصفقة

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

لإنشاء تعليق توضيحي للصفقة:

  1. في منصة البريد الإلكتروني التسويقية، أنشئ رسالة إلكترونية وافتح محرر HTML للرسالة الإلكترونية.

  2. في القسم 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.

  3. في العلامة body، اكتب رسالة بريدك الإلكتروني.

تعرض لوحات العرض الدوّارة للمنتجات عدة معاينات للصور لعرض ترويجي، مثل ما يلي:

رسالة إلكترونية ترويجية تعرض لوحة عرض دوّارة لثلاث معاينات صور لصفقات الجوارب.

يمكنك تضمين ما يصل إلى 10 معاينات للصور في لوحة عرض دوّارة، ويجب أن تكون كلّ صورة فريدة من نوعها.

لإنشاء لوحة عرض دوّارة للمنتجات:

  1. في منصة البريد الإلكتروني التسويقية، أنشئ رسالة إلكترونية وافتح محرر HTML للرسالة الإلكترونية.

  2. في القسم 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 (اختياري): موضع البطاقة في لوحة العرض الدوّارة.

  3. في العلامة body، اكتب رسالة بريدك الإلكتروني.

الخطوات التالية