מסחר אלקטרוני משופר עבור Tag Manager

מדריך זה מתאר כיצד ליישם תכונות של מסחר אלקטרוני משופר של Universal Analytics באמצעות Google Tag Manager באתר.

סקירה

מסחר אלקטרוני משופר ב-Google Analytics מאפשר שליחה של נתוני חשיפות, קידום מכירות ומכירות של מוצר עם כל אחת מהצפיות והאירועים שלך ב-Google Analytics. אפשר להשתמש בצפיות בדפים כדי לעקוב אחר חשיפות של מוצרים ורכישות של מוצרים, ולהשתמש באירועים כדי לעקוב אחר שלבי התשלום וקליקים על מוצרים.

לפני שתתחיל

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

הפעלת מסחר אלקטרוני משופר

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

  • הטמעה באמצעות שכבת הנתונים (מומלץ)
  • הטמעה באמצעות מאקרו JavaScript מותאם אישית

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

שימוש בשכבת הנתונים

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

הסרת האובייקט של מסחר אלקטרוני

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

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

מדידת חשיפות של מוצרים

  • מדידת מסחר אלקטרוני: impressions
  • מקבל נתונים: מערך של impressionFieldObjects

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

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

מדידת קליקים על מוצרים

  • מדידת מסחר אלקטרוני: click
  • מקבלים נתונים: list, מערך של productFieldObjects

כדי למדוד קליקים על קישורי מוצרים, מבצעים את הפעולה click לשכבת הנתונים לצד productFieldObject כדי לייצג את המוצר שעליו בוצעה לחיצה, כמו בדוגמה הזו:

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

מדידת צפיות בפרטי מוצרים

  • מדידת מסחר אלקטרוני: detail
  • מקבלים נתונים: list, מערך של productFieldObjects

כדי למדוד צפייה של פרטי מוצרים, אפשר להעביר פעולה detail לשכבת הנתונים, יחד עם productFieldObjects אחד או יותר שמייצגים את המוצרים שצופים:

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

מדידה של תוספות או הסרות מעגלת קניות

  • מדידת מסחר אלקטרוני: add, remove
  • מקבלים נתונים: list, מערך של productFieldObjects

באופן דומה, אפשר למדוד הוספות או הסרות מעגלת קניות באמצעות add או remove actionFieldObject ורשימה של productFieldObjects:

הוספת מוצר לעגלת קניות

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

הסרת מוצר מעגלת קניות

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

מדידת קידומי מכירות

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

מדידת חשיפות של קידום מכירות

  • מדידת מסחר אלקטרוני: promoView
  • מקבל נתונים: מערך של promoFieldObjects

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

<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

מדידת קליקים בקידום מכירות

כדי למדוד קליק על מבצע, צריך לדחוף את הפעולה promoClick לשכבת הנתונים עם מערך שמכיל promoFieldObject שמתאר את הקידום שעליו לחץ המשתמש:

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

מדידת מצב התשלום

כדי למדוד כל שלב בתהליך התשלום צריך:

  1. מודדים כל שלב בתהליך התשלום באמצעות הפעולה checkout.
  2. אם רלוונטי, מודדים את האפשרויות בקופה באמצעות הפעולה checkout_option.
  3. אופציונלי: אתם יכולים להגדיר שמות של שלבים ידידותיים למשתמש לדוח משפך התשלום על ידי קביעת הגדרות למסחר אלקטרוני בקטע ניהול בממשק האינטרנט.

‫1. מדידת שלבי התשלום

  • מדידת מסחר אלקטרוני: checkout
  • מקבלים נתונים: step, מערך של productFieldObjects

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

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2. אפשרויות מדידה של תהליך התשלום

  • מדידת מסחר אלקטרוני: checkout_option
  • יתקבלו נתונים: step, option

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

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. הגדרת משפך התשלום

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

הגדרת מסחר אלקטרוני בממשק הניהול של Google Analytics. משפך התשלום מוגדר עם ארבעה שלבים: 1. בדיקת עגלת קניות, 2. איסוף פרטי תשלום, 3. מאשרים את פרטי הרכישה, 4. קבלה.
איור1: הגדרת מסחר אלקטרוני, משפך התשלום.

מדידת רכישות

  • מדידת מסחר אלקטרוני: purchase
  • מתקבלים נתונים: id (מזהה עסקה), מערך של productFieldObjects

דחוף את פרטי הטרנזקציות לשכבת הנתונים באמצעות הפעולה purchase, יחד עם event שיפעיל תג התומך במסחר אלקטרוני משופר. בדוגמה הזו, פרטי העסקה ידועים בזמן שהדף נטען, והם יישלחו יחד עם צפייה בדף כשהסקריפט gtm.js יחזיר:

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

מדידת החזרים כספיים

  • מדידת מסחר אלקטרוני: refund
  • מתקבלים נתונים: id (מזהה עסקה), מערך של productFieldObjects

כדי למדוד החזר כספי מלא על עסקה, יש לשלוח refund actionFieldObject יחד עם מזהה העסקה של העסקה שעליה בוצע החזר כספי:

<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

כדי למדוד החזר כספי חלקי, צריך להוסיף רשימה של productFieldObjects, כולל מזהי המוצרים והכמויות שמקבלים החזר כספי:

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

העברת מאפיינים מותאמים אישית ברמת המוצר

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

  dimensionn

כאשר n הוא מספר טבעי, לדוגמה: 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>

העברת מדדים מותאמים אישית ברמת המוצר

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

  metricn

כאשר n הוא מספר טבעי, לדוגמה: 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>

שילוב של חשיפות ופעולות

במקרים שבהם יש לך גם חשיפות של מוצרים וגם פעולה, אפשר לשלב ולמדוד אותן בהיט אחד.

הדוגמה הבאה מראה איך מודדים תצוגה של פרטי מוצר עם חשיפות של מוצרים בקטע של מוצרים קשורים:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

שימוש במאקרו JavaScript מותאם אישית

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

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

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