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

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

عند إضافة تعليقات توضيحية إلى الرسائل الإلكترونية، يمكن لمستخدمي 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، اكتب رسالة بريدك الإلكتروني.

إنشاء معاينة لصورة واحدة

تعرض التعليقات التوضيحية لمعاينة صورة واحدة صورة واحدة لعرض منتج مهم في علامة التبويب &quot;العروض الترويجية&quot; في Gmail، مثل ما يلي:

رسالة إلكترونية ترويجية تعرض صورة أحذية وشارة صفقة بنسبة %20 والرمز الترويجي 20TODAY

يمكنك استخدام هذه الميزة لصورة واحدة. يجب أن يتلقّى جميع المستلِمين الصورة نفسها وعنوان URL نفسه الخاص بالصورة. يمكنك الاطّلاع على الأسئلة الشائعة للحصول على مزيد من المعلومات.

لإنشاء معاينة لصورة واحدة، اتّبِع الخطوات التالية:

  1. في منصة الرسائل الإلكترونية التسويقية، أنشئ رسالة إلكترونية وافتح محرِّر HTML الخاص بها.
  2. في قسم 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.

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

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