डेटा लेयर

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

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

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

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

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

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

सेट करो

ऐब्स्ट्रैक्ट डेटा मॉडल पर मौजूद 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();
});