डेटा लेयर

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

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

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

सेट करो

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