डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है. इसका इस्तेमाल Google Tag Manager और gtag.js, टैग को जानकारी भेजने के लिए करते हैं. डेटा लेयर का इस्तेमाल करके, इवेंट या वैरिएबल पास किए जा सकते हैं. साथ ही, वैरिएबल की वैल्यू के आधार पर ट्रिगर सेट अप किए जा सकते हैं.

उदाहरण के लिए, अगर purchase_total की वैल्यू 100 डॉलर से ज़्यादा होने पर या किसी खास इवेंट के आधार पर, जैसे कि किसी बटन पर क्लिक करने पर, रीमार्केटिंग टैग ट्रिगर किया जाता है, तो आपके डेटा लेयर को इस तरह कॉन्फ़िगर किया जा सकता है कि वह डेटा आपके टैग के लिए उपलब्ध हो. डेटा लेयर ऑब्जेक्ट को JSON के तौर पर स्ट्रक्चर किया जाता है. उदाहरण के लिए:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

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

इंस्टॉल करना

Tag Manager को वेब पेज पर इंस्टॉल करने के लिए, आपको डेटा लेयर बनानी होगी. नीचे दिए गए कोड के उदाहरण से पता चलता है कि Tag Manager के लोड होने से पहले, डेटा लेयर कहां सेट अप की गई है.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

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

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

ध्यान दें: स्निपेट सोर्स यूआरएल (जैसे, GTM- बनाम G- या AW-) में मौजूद कंटेनर आईडी से, स्क्रिप्ट को लागू करने की अनुमतियों और क्षमताओं का पता चलता है. ज़्यादा जानकारी के लिए, कंटेनर के टाइप और आईडी के प्रीफ़िक्स देखें.

डेटा लेयर की जानकारी को प्रोसेस करने का तरीका

कंटेनर लोड होने पर, Tag Manager सूची में मौजूद सभी डेटा लेयर पुश मैसेज को प्रोसेस करना शुरू कर देगा. Tag Manager, मैसेज को पहले आओ, पहले पाओ के आधार पर प्रोसेस करता है: हर मैसेज को एक-एक करके, उसके मिलने के क्रम में प्रोसेस किया जाता है. अगर मैसेज एक इवेंट है, तो ट्रिगर की शर्तों को पूरा करने वाले सभी टैग, Tag Manager के अगले मैसेज पर जाने से पहले ट्रिगर हो जाएंगे.

अगर किसी पेज पर, कस्टम टेंप्लेट में या कस्टम एचटीएमएल टैग में कोड के ज़रिए gtag() या dataLayer.push() कॉल किया जाता है, तो उससे जुड़े मैसेज को सूची में डाल दिया जाता है. साथ ही, बाकी सभी मैसेज का आकलन होने के बाद, उसे प्रोसेस किया जाता है. इसका मतलब है कि इस बात की कोई गारंटी नहीं है कि डेटा लेयर की अपडेट की गई वैल्यू, अगले इवेंट के लिए उपलब्ध होंगी. इन मामलों को मैनेज करने के लिए, आपको मैसेज में इवेंट का नाम जोड़ना चाहिए, क्योंकि इसे डेटा लेयर में पुश किया जाता है. इसके बाद, कस्टम इवेंट ट्रिगर की मदद से, उस इवेंट के नाम को सुनें.

अहम जानकारी: gtag.js पर आधारित कोड को डिप्लॉय करने के लिए, कस्टम एचटीएमएल टैग का इस्तेमाल न करें. इसके बजाय, Google Ads, Analytics, और Floodlight के लिए Tag Manager के नेटिव टैग टेंप्लेट इस्तेमाल करें.

अहम जानकारी: Tag Manager में सहमति की सेटिंग कॉन्फ़िगर करने के लिए, कस्टम एचटीएमएल टैग का इस्तेमाल न करें. सहमति की सेटिंग, Tag Manager कंटेनर में काम के टैग ट्रिगर होने से पहले लागू होनी चाहिए. इसलिए, आपको डिफ़ॉल्ट और अपडेट के व्यवहार को कॉन्फ़िगर करने के लिए, सहमति मोड के लिए इस्तेमाल होने वाले Tag Manager के एपीआई लागू करने होंगे. Tag Manager के सहमति एपीआई का इस्तेमाल करके, पक्का करें कि सहमति के अपडेट, डेटा लेयर में मौजूद किसी भी आइटम से पहले प्रोसेस हों. इससे, एक ही इवेंट से ट्रिगर होने वाले सभी टैग को सहमति की एक जैसी स्थिति दिखेगी.

अहम जानकारी: Google Tag Assistant का इस्तेमाल करके, इवेंट की चेन में किसी भी समय डेटा लेयर की स्थिति देखी जा सकती है.

इवेंट हैंडलर के साथ डेटा लेयर का इस्तेमाल करना

dataLayer ऑब्जेक्ट, इवेंट भेजने की प्रोसेस शुरू करने के लिए, event कमांड का इस्तेमाल करता है.

Google टैग और Tag Manager, event नाम के एक खास डेटा लेयर वैरिएबल का इस्तेमाल करते हैं. इसका इस्तेमाल JavaScript इवेंट लिसनर, टैग ट्रिगर करने के लिए करते हैं. ऐसा तब होता है, जब कोई उपयोगकर्ता वेबसाइट के एलिमेंट के साथ इंटरैक्ट करता है. उदाहरण के लिए, हो सकता है कि आप कन्वर्ज़न ट्रैकिंग टैग को तब ट्रिगर करना चाहें, जब कोई उपयोगकर्ता खरीदारी की पुष्टि करने वाले बटन पर क्लिक करे. जब भी कोई उपयोगकर्ता वेबसाइट के एलिमेंट, जैसे कि लिंक, बटन, स्क्रोल वगैरह के साथ इंटरैक्ट करता है, तो इवेंट को कॉल किया जा सकता है.

यह सुविधा, कोई इवेंट होने पर dataLayer.push() को कॉल करके काम करती है. dataLayer.push() के साथ इवेंट भेजने का सिंटैक्स इस तरह है:

dataLayer.push({'event': 'event_name'});

जहां event_name एक स्ट्रिंग है, जो इवेंट के बारे में बताती है. जैसे, 'login', 'purchase' या 'search'.

जब कोई ऐसी कार्रवाई होती है जिसे आपको मेज़र करना है, तो इवेंट डेटा भेजने के लिए dataLayer.push() का इस्तेमाल करें. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी बटन पर क्लिक करे, तब इवेंट भेजने के लिए, बटन के onclick हैंडलर में बदलाव करें, ताकि dataLayer.push() को कॉल किया जा सके:

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

डेटा लेयर वैरिएबल को डाइनैमिक तौर पर डेटा लेयर में पुश किया जा सकता है. इससे, फ़ॉर्म में डाली गई या चुनी गई वैल्यू, विज़िटर के चलाए जा रहे वीडियो से जुड़ा मेटाडेटा, विज़िटर के मुताबिक ढाले गए प्रॉडक्ट (जैसे, कार) का रंग, क्लिक किए गए लिंक के डेस्टिनेशन यूआरएल वगैरह जैसी जानकारी कैप्चर की जा सकती है.

इवेंट की तरह ही, यह सुविधा भी डेटा लेयर में डेटा लेयर वैरिएबल जोड़ने या बदलने के लिए, push() एपीआई को कॉल करके काम करती है. डाइनैमिक डेटा लेयर वैरिएबल सेट करने का बुनियादी सिंटैक्स इस तरह है:

dataLayer.push({'variable_name': 'variable_value'});

जहां 'variable_name' एक स्ट्रिंग है, जो सेट किए जाने वाले डेटा लेयर वैरिएबल का नाम बताती है. साथ ही, 'variable_value' एक स्ट्रिंग है, जो सेट या बदले जाने वाले डेटा लेयर वैरिएबल की वैल्यू बताती है.

उदाहरण के लिए: जब कोई विज़िटर प्रॉडक्ट को पसंद के मुताबिक बनाने वाले टूल का इस्तेमाल करता है, तो रंग की प्राथमिकता के साथ डेटा लेयर वैरिएबल सेट करने के लिए, यह डाइनैमिक डेटा लेयर वैरिएबल पुश किया जा सकता है:

dataLayer.push({'color': 'red'});

एक पुश, कई वैरिएबल

एक साथ कई वैरिएबल और इवेंट पुश किए जा सकते हैं:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

अहम जानकारी: अगर डेटा लेयर में किसी मौजूदा वैरिएबल के नाम वाले वैरिएबल को पुश किया जाता है, तो मौजूदा वैल्यू की जगह नई वैल्यू ले लेगी.

डेटा लेयर के वैरिएबल बनाए रखना

वेब पेजों के बीच डेटा लेयर वैरिएबल को बनाए रखने के लिए, हर पेज लोड पर डेटा लेयर को इंस्टैंशिएट करने के बाद dataLayer.push() को कॉल करें. साथ ही, वैरिएबल को डेटा लेयर में पुश करें. अगर आपको कंटेनर लोड होने पर, Tag Manager के लिए ये डेटा लेयर वैरिएबल उपलब्ध कराने हैं, तो Tag Manager कंटेनर कोड के ऊपर dataLayer.push() कॉल जोड़ें. इसके लिए, यहां दिया गया उदाहरण देखें:

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
  'event': 'Pageview',
  'pagePath': 'https://www.googleanalytics.dev/pancakes',
  'pageTitle': 'Pancake Event Signup',
  'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

डेटा लेयर ऑब्जेक्ट में एलान किया गया हर वैरिएबल, सिर्फ़ तब तक बना रहेगा, जब तक विज़िटर मौजूदा पेज पर रहेगा. सभी पेजों के लिए काम के डेटा लेयर वैरिएबल (उदाहरण के लिए, visitorType) को आपकी वेबसाइट के हर पेज पर डेटा लेयर में एलान किया जाना चाहिए. आपको हर पेज पर डेटा लेयर में वैरिएबल का एक ही सेट डालने की ज़रूरत नहीं है. हालांकि, आपको नाम रखने के लिए एक जैसे कन्वेंशन का इस्तेमाल करना चाहिए. दूसरे शब्दों में: अगर आपने pageCategory नाम के वैरिएबल का इस्तेमाल करके, साइनअप पेज पर पेज कैटगरी सेट की है, तो आपके प्रॉडक्ट और खरीदारी वाले पेजों पर भी pageCategory वैरिएबल का इस्तेमाल किया जाना चाहिए.

समस्या का हल

डेटा लेयर से जुड़ी समस्या हल करने के लिए, यहां कुछ सलाह दी गई हैं:

window.dataLayer वैरिएबल को ओवरराइट न करें: डेटा लेयर का सीधे तौर पर इस्तेमाल करने पर (उदाहरण के लिए, dataLayer = [{'item': 'value'}]), यह dataLayer में मौजूद किसी भी वैल्यू को ओवरराइट कर देगा. Tag Manager इंस्टॉलेशन को सोर्स कोड में डेटा लेयर को जितना हो सके उतना ऊपर इंस्टैंशिएट करना चाहिए. इसके लिए, कंटेनर स्निपेट के ऊपर window.dataLayer = window.dataLayer || []; का इस्तेमाल करें. dataLayer का एलान करने के बाद, उसमें अन्य वैल्यू जोड़ने के लिए dataLayer.push({'item': 'value'}) का इस्तेमाल करें. अगर पेज लोड होने पर, Tag Manager के लिए उन वैल्यू का उपलब्ध होना ज़रूरी है, तो dataLayer.push() कॉल को भी Tag Manager कंटेनर कोड के ऊपर होना चाहिए.

dataLayer ऑब्जेक्ट का नाम केस-सेंसिटिव होता है: अगर आपने किसी वैरिएबल या इवेंट को सही केसिंग के बिना पुश करने की कोशिश की, तो पुश काम नहीं करेगा.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push को मान्य JavaScript ऑब्जेक्ट के साथ कॉल किया जाना चाहिए. डेटा लेयर के सभी वैरिएबल के नाम, कोटेशन मार्क में होने चाहिए.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

सभी पेजों पर वैरिएबल के नाम एक जैसे रखें: अगर अलग-अलग पेजों पर एक ही कॉन्सेप्ट के लिए अलग-अलग वैरिएबल के नाम इस्तेमाल किए जाते हैं, तो आपके टैग सभी ज़रूरी जगहों पर लगातार ट्रिगर नहीं हो पाएंगे.

गलत:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

सही:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

डेटा लेयर का नाम बदलना

Google टैग या Tag Manager से शुरू किए गए डेटा लेयर ऑब्जेक्ट का डिफ़ॉल्ट नाम dataLayer है. अगर आपको डेटा लेयर के लिए कोई दूसरा नाम इस्तेमाल करना है, तो Google टैग या Tag Manager कंटेनर स्निपेट में डेटा लेयर पैरामीटर की वैल्यू में बदलाव करके, अपनी पसंद का नाम इस्तेमाल किया जा सकता है.

Tag Manager

अपने कंटेनर स्निपेट में, डेटा लेयर पैरामीटर की वैल्यू (नीचे हाइलाइट की गई है) को अपनी पसंद के नाम से बदलें.

अहम जानकारी: हाइलाइट न की गई पैरामीटर वैल्यू को न बदलें.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

gtag.js

डेटा लेयर का नया नाम सेट करने के लिए, यूआरएल में "l" नाम का क्वेरी पैरामीटर जोड़ें. उदाहरण के लिए, l=myNewName. Google टैग स्निपेट में, dataLayer के सभी इंस्टेंस को नए नाम से अपडेट करें.

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());
</script>

नाम बदलने के बाद, आपके डेटा लेयर के सभी रेफ़रंस (जैसे, स्निपेट के ऊपर डेटा लेयर का एलान करते समय या .push() कमांड की मदद से, डेटा लेयर में इवेंट या डाइनैमिक डेटा लेयर वैरिएबल को पुश करते समय) को आपके कस्टम डेटा लेयर के नाम के हिसाब से अडजस्ट किया जाना चाहिए:

<script>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

अहम जानकारी: हर पेज के लिए सिर्फ़ एक डेटा लेयर का इस्तेमाल करें

हर पेज पर सिर्फ़ एक dataLayer ऑब्जेक्ट इस्तेमाल किया जा सकता है. Google Tag Manager और gtag.js, window.dataLayer नाम के एक ग्लोबल JavaScript कलेक्शन पर निर्भर करते हैं. इससे सभी इवेंट और वैरिएबल को जोड़े जाने के क्रम में पाने, सूची में रखने, और प्रोसेस करने में मदद मिलती है. कंटेनर स्निपेट, अपने लिसनर और प्रोसेसिंग लॉजिक को खास तौर पर इस सिंगल कलेक्शन से अटैच करते हैं. एक से ज़्यादा डेटा लेयर इंस्टेंस का इस्तेमाल करने या डेटा लेयर को गलत तरीके से फिर से शुरू करने (उदाहरण के लिए, GTM लोड होने के बाद उसे window.dataLayer = [] से ओवरराइट करने) से, कई समस्याएं हो सकती हैं:

• ऐसा हो सकता है कि टैग ट्रिगर न हों: dataLayer के किसी ऐसे इंस्टेंस में पुश किए गए इवेंट और वैरिएबल आपके टैग ट्रिगर नहीं करेंगे जिसकी निगरानी Google Tag Manager या Google टैग नहीं कर रहा है.
• डेटा कलेक्शन में अंतर: आपके पेज के अलग-अलग हिस्से या अलग-अलग स्क्रिप्ट, डेटा को अलग-अलग dataLayer कलेक्शन में भेज सकती हैं. इससे आपके Analytics और मार्केटिंग टैग तक अधूरी या गलत जानकारी पहुंच सकती है.
• डेटा का नुकसान: अगर ट्रैकिंग के लिए इस्तेमाल की जाने वाली जानकारी को गलत dataLayer इंस्टेंस पर भेजा जाता है, तो हो सकता है कि वह जानकारी खो जाए.
• डीबग करने से जुड़ी चुनौतियां: टैगिंग से जुड़ी समस्याओं का पता लगाना मुश्किल होता है, क्योंकि ट्रैकिंग डेटा के फ़्लो का अनुमान नहीं लगाया जा सकता.

सबसे सही तरीका: हर पेज पर एक बार window.dataLayer = window.dataLayer || []; का इस्तेमाल करके, डेटा लेयर को हमेशा इंस्टैंशिएट करें. आम तौर पर, GTM या gtag.js स्निपेट से पहले, पेज के <head> में सबसे ऊपर. बाद के इवेंट या वैरिएबल जोड़ने के लिए, हमेशा dataLayer.push() का इस्तेमाल करें. window.dataLayer वैरिएबल को कभी भी ओवरराइट या फिर से असाइन न करें.

कस्टम डेटा लेयर के तरीके

अगर डेटा लेयर में कोई फ़ंक्शन पुश किया जाता है, तो उसे this के साथ शुरू किया जाएगा. इसे ऐब्स्ट्रैक्ट डेटा मॉडल पर सेट किया जाएगा. यह ऐब्स्ट्रैक्ट डेटा मॉडल, की-वैल्यू स्टोर में वैल्यू सेट कर सकता है और वैल्यू हासिल कर सकता है. साथ ही, डेटा लेयर को रीसेट करने का तरीका भी उपलब्ध कराता है.

अहम जानकारी: कस्टम डेटा लेयर के तरीकों का इस्तेमाल करने के लिए, आपको .push का इस्तेमाल करना होगा, ताकि डेटा को सीधे dataLayer वैरिएबल में भेजा जा सके. अगर gtag का इस्तेमाल किया जाता है, तो फ़ंक्शन को अमान्य निर्देश माना जाएगा और उसे अनदेखा कर दिया जाएगा.

सेट करो

ऐब्स्ट्रैक्ट डेटा मॉडल में set फ़ंक्शन की मदद से, वैल्यू सेट की जा सकती हैं. इन वैल्यू को get फ़ंक्शन की मदद से वापस पाया जा सकता है.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

सदस्यता लें

get फ़ंक्शन, ऐब्स्ट्रैक्ट डेटा मॉडल पर काम करता है. इसकी मदद से, सेट की गई वैल्यू को वापस पाया जा सकता है.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

रीसेट करें

ऐब्स्ट्रैक्ट डेटा मॉडल पर reset फ़ंक्शन की मदद से, डेटा लेयर में मौजूद डेटा को रीसेट किया जा सकता है. यह सुविधा, ऐसे पेज के लिए सबसे ज़्यादा काम की है जो खुला रहेगा और समय के साथ डेटा लेयर का साइज़ बढ़ता रहेगा. डेटा लेयर को रीसेट करने के लिए, इस कोड का इस्तेमाल करें:

window.dataLayer.push(function() {
  this.reset();
});