डेटा लेयर

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

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 फ़ंक्शन की मदद से, ऐसी वैल्यू सेट की जा सकती हैं जिन्हें 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();
})