डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है. इसका इस्तेमाल 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() कॉल किया जाता है, तो इससे जुड़े मैसेज को प्रोसेस करने के लिए, सूची में डाल दिया जाता है. हालांकि, इसके लिए पहले उन सभी मैसेज का आकलन करना होगा जिन्हें मंज़ूरी मिलनी बाकी है. इसका मतलब यह है कि अपडेट की गई कोई भी डेटा लेयर वैल्यू, अगले इवेंट के लिए उपलब्ध होगी या नहीं, इस बात की गारंटी नहीं है. ऐसे मामलों में, मैसेज में कोई इवेंट नाम जोड़ें. ऐसा उस समय करें, जब इवेंट को डेटा लेयर में पुश किया जाता है. इसके बाद, उस इवेंट का नाम सुनने के लिए, कस्टम इवेंट ट्रिगर का इस्तेमाल करें.

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

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

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

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

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

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

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

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

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