Tag Manager के लिए बेहतर ई-कॉमर्स

इस गाइड में बताया गया है कि Google Tag Manager का इस्तेमाल करके, किसी वेबसाइट पर Universal Analytics की बेहतर ई-कॉमर्स सुविधाओं को कैसे लागू किया जाता है.

खास जानकारी

Google Analytics की बेहतर ई-कॉमर्स सुविधा की मदद से, प्रॉडक्ट इंप्रेशन, प्रमोशन, और बिक्री का डेटा, Google Analytics के किसी भी पेज व्यू और इवेंट के साथ भेजा जा सकता है. प्रॉडक्ट को मिले इंप्रेशन और प्रॉडक्ट की खरीदारी को ट्रैक करने के लिए, पेज व्यू का इस्तेमाल करें. साथ ही, चेकआउट के चरणों और प्रॉडक्ट पर मिले क्लिक को ट्रैक करने के लिए, इवेंट का इस्तेमाल करें.

आरंभ करने से पहले

हमारा सुझाव है कि आप बेहतर ई-कॉमर्स डेवलपर की गाइड के बेहतर ई-कॉमर्स डेटा टाइप और कार्रवाइयां सेक्शन पर जाएं. इससे आपको लागू करने की योजना बनाने में मदद मिलेगी. इस गाइड से आपको यह समझने में मदद मिलेगी कि आपको जिन ई-कॉमर्स इंटरैक्शन को मेज़र करना है उनमें से हर एक के लिए कौनसे फ़ील्ड ज़रूरी हैं और कौनसे नहीं.

बेहतर ई-कॉमर्स चालू करना

ज़्यादातर इंप्लीमेंटेशन में आपको अपने हर Universal Analytics पेज व्यू या इवेंट टैग पर बेहतर ई-कॉमर्स चालू करना चाहिए. वेब इंटरफ़ेस की टैग एडिटर स्क्रीन में, बेहतर ई-कॉमर्स को चालू करने के लिए आपके पास दो विकल्प होते हैं:

  • डेटा लेयर का इस्तेमाल करके लागू करना (सुझाया गया)
  • कस्टम JavaScript मैक्रो का इस्तेमाल करके लागू करना

हालांकि, दोनों तरीकों से ई-कॉमर्स की सुविधाएं एक जैसी मिलती हैं, लेकिन हम उन सभी वेबसाइटों को डेटा लेयर के तरीके का इस्तेमाल करने का सुझाव देते हैं जो डेटा लेयर के साथ काम करती हैं. इस गाइड में डेटा लेयर वाले तरीके को डिफ़ॉल्ट के तौर पर दिखाया गया है, जबकि कस्टम 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

चेकआउट विकल्प उन मामलों में मददगार होता है जहां आपने चेकआउट के चरण को पहले ही मेज़र कर लिया है, लेकिन आपको उस चरण के बारे में ज़्यादा जानकारी चाहिए. उदाहरण के लिए, उपयोगकर्ता का चुना हुआ शिपिंग का तरीका. इसे मेज़र करने के लिए, step और option फ़ील्ड के साथ-साथ checkout_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. रसीद.
पहली इमेज: ई-कॉमर्स सेटअप, चेकआउट फ़नल.

खरीदारी का आकलन करना

  • ई-कॉमर्स मेज़रमेंट: 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 मैक्रो का इस्तेमाल करना है, तो बेहतर ई-कॉमर्स सुविधाएं चालू करें चुनें. इसके बाद, मैक्रो से डेटा पढ़ें विकल्प सेट करें.