डेटा लेयर एक ऑब्जेक्ट है. इसका इस्तेमाल 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 कंटेनर कोड के ऊपर भी होना चाहिए.
The 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();
})