הוספת הערות להודעות אימייל בכרטיסייה 'קידומי מכירות'

הערות באימייל מוסיפות לאימיילים בכרטיסייה 'מבצעים' תכונות כמו תמונות, מבצעים ותאריכי תפוגה.

כשמוסיפים הערות לאימיילים, משתמשי Gmail יכולים לראות את המבצעים שלכם ולקיים איתם אינטראקציה ישירות מתיבת הדואר הנכנס שלהם. בכרטיסייה 'מבצעים', המשתמשים יכולים ללחוץ על הטקסט או על התמונה עם ההערות כדי לקבל מידע נוסף על המבצע, בלי לפתוח את האימייל.

בדף הזה מוסבר איך להוסיף הערות לאימיילים באמצעות JSON-LD ומיקרו-נתונים. מידע נוסף על תגי עיצוב לאימייל זמין במדריך Getting Started. רשימה של שדות התיוג שאפשר להשתמש בהם בהערות באימייל מופיעה במאמרי העזרה.

יצירת אנוטציות לאימייל

אתם יכולים להוסיף הערות לאימיילים כדי להציג את התכונות הבאות בכרטיסיית המבצעים:

בקטעים הבאים מוסבר איך ליצור כל סוג של הערה לאימייל.

קרוסלות של מוצרים מציגות כמה תצוגות מקדימות של תמונות של קידום מכירות, כמו הדוגמאות הבאות:

אימייל שיווקי שבו מוצגת קרוסלה של שלוש תצוגות מקדימות של תמונות של מבצעים על גרביים.

אפשר לכלול בקרוסלה עד 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.

יצירת תצוגה מקדימה של תמונה אחת

הערות לתצוגה מקדימה של תמונה יחידה מציגות תמונה אחת כדי להציג מוצר חשוב בכרטיסייה 'קידומי מכירות' ב-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.

יצירת הערה לעסקה

כדי שהאימייל יבלוט, אפשר להוסיף לו הערה על מבצע. התכונה הזו מוסיפה תג קידום מכירות ישירות לאימייל בתיבת הדואר הנכנס, ומציגה מידע חשוב כמו קוד הנחה או פרטי מבצע, ממש ליד שורת הנושא.

אימייל שיווקי עם תצוגה מקדימה של תג מבצע עם הנחה של 20% וקוד המבצע 20TODAY.

כדי להפעיל את התכונה 'הערות על עסקאות':

  1. מוסיפים את הסכימה לקוד ה-HTML של האימייל: בפלטפורמה לשיווק באימייל, פותחים את עורך ה-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>
    
  2. התאמה אישית של מאפייני הערת המבצע: מעדכנים את הערכים בסקריפט כך שיתאימו למבצע הספציפי.

    מאפייני חובה: כדי ליצור הערה על עסקה, צריך לכלול לפחות אחד מהמאפיינים הבאים:

    • DESCRIPTION: סיכום קצר ומשכנע של המבצע.

      • לדוגמה: "20% הנחה על כל המוצרים באתר" או "קונים פריט אחד ומקבלים אחד חינם".
    • DISCOUNT_CODE: קוד ההטבה שהמשתמש צריך להזין בשלב התשלום.

      • דוגמה: 20TODAY.
    • END_DATE_TIME: תאריך הסיום והשעה של המבצע בפורמט ISO 8601.

      • דוגמה: 2025-09-23T18:44:37-07:00.

    מאפיינים מומלצים מאוד:

    • START_DATE_TIME: תאריך ושעת ההתחלה של המבצע בפורמט ISO 8601.

      • דוגמה: 2025-08-24T18:44:37-07:00.
  3. כותבים את הודעת האימייל: בתג <body>, כותבים את ההודעה ומעצבים את הפריסה של האימייל כרגיל.

  4. אימות ותצוגה מקדימה של הכרטיס: לפני ששולחים את הקמפיין, מאמתים את הקוד ורואים תצוגה מקדימה של האופן שבו הערת המבצע תיראה.

יצירת כרטיס עסקה

כרטיסי מבצע הם סיכומים ויזואליים של המבצעים שלכם שנוצרים על ידי Gmail. הן יכולות להופיע בכרטיסייה 'מבצעים' ובתוך האימייל עצמו, וכך להעניק למבצעים שלכם חשיפה מקסימלית.

אימייל שיווקי עם תצוגה מקדימה של מבצע על רכב עם הנחה של 25% וקוד המבצע MAY2024.

כדי להפעיל את כרטיסי העסקאות:

  1. מוסיפים את הסכימה לקוד ה-HTML של האימייל: בפלטפורמה לשיווק באימייל, פותחים את עורך ה-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"
            "offerPageUrl": "OFFER_PAGE_URL"
            "merchantHomepageUrl": "MERCHANT_HOMEPAGE_URL"
          }]
        </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"/>
          <meta itemprop="offerpageurl" content="OFFER_PAGE_URL"/>
          <meta itemprop="merchantHomepageUrl" content="MERCHANT_HOMEPAGE_URL"/>
        </div>
      </head>
    
      <body>
        // The message of your email.
      </body>
    </html>
    
  2. התאמה אישית של מאפייני כרטיס המבצע: מעדכנים את הערכים בסקריפט בהתאם למבצע הספציפי שלכם.

    מאפייני חובה:

    • DESCRIPTION: סיכום קצר ומשכנע של המבצע.

      • לדוגמה: "20% הנחה על כל המוצרים באתר" או "קונים פריט אחד ומקבלים אחד חינם".
    • לפחות אחת מכתובות ה-URL הבאות: מומלץ לספק כתובת URL של דף מבצע.

      • OFFER_PAGE_URL: כתובת ה-URL של דף הנחיתה של המבצע הספציפי הזה. כך ייצור לחצן 'קנייה עכשיו' (או לחצן דומה) בכרטיס המבצע. אם כתובת ה-URL הזו מסופקת, היא תקבל עדיפות על פני כתובת ה-URL של דף המוצר.

      • MERCHANT_HOMEPAGE_URL: משתמשים במאפיין הזה רק אם אין דף מבצע ספציפי. הקישור יוביל לדף הבית הראשי.

    מאפיינים מומלצים מאוד:

    • DISCOUNT_CODE: קוד ההטבה שהמשתמש צריך להזין בשלב התשלום.

      • דוגמה: 20TODAY.
    • START_DATE_TIME: תאריך ושעת ההתחלה של המבצע בפורמט ISO 8601.

      • דוגמה: 2025-08-24T18:44:37-07:00.
    • END_DATE_TIME: תאריך הסיום והשעה של המבצע בפורמט ISO 8601.

      • דוגמה: 2025-09-23T18:44:37-07:00.
  3. כותבים את הודעת האימייל: בתג <body>, כותבים את ההודעה ומעצבים את הפריסה של האימייל כרגיל.

  4. אימות ותצוגה מקדימה של הכרטיס: לפני ששולחים את הקמפיין, מאמתים את הקוד ורואים תצוגה מקדימה של האופן שבו הערת המבצע תיראה.

השלבים הבאים