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

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

כשמוסיפים הערות לאימיילים, משתמשי 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, כותבים את ההודעה לאימייל.

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

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

השלבים הבאים