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

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

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

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

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

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

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

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

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

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

  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 (اختيارية): عملة السعر بالتنسيق المكوّن من 3 أحرف بالتنسيق ISO 4217، مثل USD. لتحديد رمز العملة المعروض مع price.
    • DISCOUNT_VALUE (اختياري): المبلغ الذي تم تخفيضه من price لعرض سعر معدّل. يظهر السعر المعدَّل بجانب السعر الأصلي.

      على سبيل المثال، إذا كانت قيمة السمة discountValue هي 25 وقيمة السمة price هي 100 وقيمة السمة priceCurrency هي USD، يظهر السعر المعدَّل على أنّه $75.

    • POSITION (اختياري): موضع البطاقة في لوحة العرض الدوّارة.

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

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

  • يمكنك مراجعة المستندات المرجعية للاطّلاع على معلومات حول حقول ترميز البريد الإلكتروني المتاحة.
  • تعرّف على أفضل الممارسات المتعلقة بالتعليقات التوضيحية عبر البريد الإلكتروني.