डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है, जिसका इस्तेमाल 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 (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>

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

जब कोई कंटेनर लोड होता है, तो 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() का इस्तेमाल करें. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है, तब इवेंट भेजने के लिए, dataLayer.push() को कॉल करने के लिए बटन के onclick हैंडलर में बदलाव करें:

<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 कंटेनर स्निपेट में डेटा लेयर पैरामीटर की वैल्यू में बदलाव करके ऐसा किया जा सकता है.

gtag.js

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

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

  gtag('config', 'TAG_ID');
</script>

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 -->

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

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

ध्यान दें: हर पेज पर सिर्फ़ एक dataLayer ऑब्जेक्ट इस्तेमाल किया जा सकता है.

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

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

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

सेट करो

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

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();
})