परचेज़ इवेंट सेट अप करना

इस ट्यूटोरियल में, अपनी वेबसाइट पर purchase इवेंट सेट अप करने का तरीका बताया गया है. इससे यह मेज़र किया जा सकता है कि कोई व्यक्ति कब खरीदारी करता है. ट्यूटोरियल में ऐसे डाइमेंशन, मेट्रिक, और रिपोर्ट शामिल होती हैं जिन्हें Analytics, इवेंट के डेटा से अपने-आप भरता है. ई-कॉमर्स इवेंट के बारे में ज़्यादा जानने के लिए, ई-कॉमर्स को मेज़र करना लेख पढ़ें.

शुरू करने से पहले

यह ट्यूटोरियल मानता है कि आपने ये काम कर लिए हैं:

इसमें यह भी माना गया है कि आपके पास ये मौजूद हैं:

  • अपनी वेबसाइट के सोर्स कोड का ऐक्सेस
  • Google Analytics खाते के लिए एडिटर या इससे ऊपर की भूमिका

पहला चरण: इवेंट को अपनी वेबसाइट में जोड़ना

आपको purchase इवेंट को अपनी वेबसाइट के उस पेज पर रखना चाहिए जहां से कोई व्यक्ति खरीदारी करता है. उदाहरण के लिए, इवेंट को पुष्टि पेज पर जोड़ा जा सकता है. यह पेज तब दिखता है, जब कोई व्यक्ति खरीदारी की प्रोसेस को पूरा करता है. इस ट्यूटोरियल में, उस पेज पर इवेंट जोड़ने का तरीका बताया गया है जिस पर कोई व्यक्ति "खरीदें" बटन पर क्लिक करता है.

इवेंट को, <body> टैग के आखिर में <script> टैग में जोड़ें. इवेंट को सीधे तौर पर <script> टैग में जोड़ने से, पेज लोड होने पर इवेंट ट्रिगर होता है. अगले सेक्शन में, यह बताया गया है कि जब कोई व्यक्ति "खरीदें" पर क्लिक करता है, तब इवेंट को कैसे ट्रिगर किया जाए.

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button>Submit</button>
    <script>
    gtag("event", "purchase", {
        transaction_id: "T_12345_1",
        value: 30.03,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
        // If someone purchases more than one item, 
        // you can add those items to the items array
         {
          item_id: "SKU_12345",
          item_name: "Stan and Friends Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          discount: 2.22,
          index: 0,
          item_brand: "Google",
          item_category: "Apparel",
          item_category2: "Adult",
          item_category3: "Shirts",
          item_category4: "Crew",
          item_category5: "Short sleeve",
          item_list_id: "related_products",
          item_list_name: "Related Products",
          item_variant: "green",
          location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 10.01,
          quantity: 3
        }]
    });
    </script>
</body>
</html>

दूसरा चरण: इवेंट को किसी बटन से जोड़ना

purchase इवेंट को सेट अप किया जा सकता है, ताकि जब कोई व्यक्ति "खरीदें" बटन पर क्लिक करे, तब यह इवेंट ट्रिगर हो. यह सुविधा, कई तरीकों से ट्रिगर की गई है. इवेंट सेट अप करने का एक तरीका यह है कि "खरीदें" बटन पर आईडी जोड़ें. इसके बाद, इवेंट लिसनर में इवेंट कोड जोड़ें. यहां दिए गए उदाहरण में, इवेंट सिर्फ़ तब भेजा जाएगा, जब कोई व्यक्ति purchase आईडी वाले बटन पर क्लिक करेगा.

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_2",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
          });
      });
    </script>
</body>
</html>

तीसरा चरण: पुष्टि करना कि डेटा इकट्ठा किया जा रहा है

DebugView रिपोर्ट आपकी वेबसाइट का रीयल टाइम डेटा दिखाती है, ताकि यह पक्का किया जा सके कि आपने इवेंट सही तरीके से सेट अप किए हैं. किसी वेब पेज पर डीबग मोड को चालू करने के लिए, config कमांड में यह debug_mode पैरामीटर जोड़ें:

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID',{ 'debug_mode': true });
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_3",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
        });
    });
    </script>
</body>
</html>

डीबग मोड चालू करने के बाद, जब लोग आपकी वेबसाइट का इस्तेमाल करेंगे, तो आपको DebugView रिपोर्ट में इवेंट दिखने लगेंगे. उदाहरण के लिए, अपनी वेबसाइट पर "खरीदें" बटन पर क्लिक करने से, रिपोर्ट में यह डेटा अपने-आप भर जाता है. किसी इवेंट को चुनकर, उससे जुड़े पैरामीटर, उपयोगकर्ता प्रॉपर्टी, और आइटम देखे जा सकते हैं.

DebugView रिपोर्ट का स्क्रीनशॉट

चौथा चरण: अपना ई-कॉमर्स डेटा देखना

करीब 24 घंटे बाद, purchase इवेंट के साथ भेजा गया डेटा आपकी रिपोर्ट, एक्सप्लोरेशन, और Google Analytics Data API में उपलब्ध हो जाता है. BigQuery Export सेट अप करते समय भी BigQuery में डेटा ऐक्सेस किया जा सकता है.

"purchase" इवेंट, पहले से बने कई डाइमेंशन और मेट्रिक का डेटा अपने-आप जनरेट करता है. इनका इस्तेमाल आपकी रिपोर्ट, एक्सप्लोरेशन (विश्लेषण के तरीके) वगैरह में किया जाता है. यहां कुछ ऐसे डाइमेंशन दिए गए हैं जिनमें पहले चरण में purchase इवेंट के डेटा का इस्तेमाल किया जाता है:

पैरामीटर डाइमेंशन वैल्यू
affiliation आइटम की संबद्धता Google व्यापारिक वस्तु स्टोर
currency मुद्रा डॉलर
discount आइटम पर छूट की रकम 78 जीबी में से
index आइटम की सूची की जगह 0
item_brand आइटम का ब्रैंड Google
item_category आइटम की कैटगरी कपड़े
item_id आइटम आईडी SKU_12345
item_list_id सामान की सूची का आईडी related_products
item_list_name आइटम की सूची का नाम मिलते-जुलते प्रॉडक्ट
item_name आइटम का नाम स्टैन एंड फ़्रेंड्स टी
item_variant आइटम का वैरिएंट हरा
location_id आइटम का लोकेशन आईडी ChIJIQBpAG2ahYAR_6128GcTUEo (सैन फ़्रांसिस्को के लिए Google का प्लेसमेंट आईडी)
shipping शिपिंग की रकम यूरो
tax टैक्स की रकम यूरो
transaction_id लेन-देन आईडी T_12345

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

  • आइटम से होने वाली आय मेट्रिक की वैल्यू 30.03 डॉलर है
  • कुल रेवेन्यू मेट्रिक की वैल्यू 30.03 डॉलर है
  • ई-कॉमर्स प्लैटफ़ॉर्म पर खरीदारी मेट्रिक की वैल्यू 1 है

एक्सप्लोरेशन और कस्टम रिपोर्ट बनाने के लिए, इन डाइमेंशन और मेट्रिक का इस्तेमाल किया जा सकता है. हालांकि, अपना ई-कॉमर्स डेटा देखने के लिए, पहले से बनी ई-कॉमर्स खरीदारी रिपोर्ट का भी इस्तेमाल किया जा सकता है:

ई-कॉमर्स प्लैटफ़ॉर्म पर खरीदारी की रिपोर्ट का स्क्रीनशॉट