डेटा लेयर एक ऑब्जेक्ट है, जिसका इस्तेमाल 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() API को कॉल करके पूरा किया जाता है. डाइनैमिक डेटा लेयर वैरिएबल सेट करने का बुनियादी सिंटैक्स यहां दिया गया है:
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 फ़ंक्शन की मदद से, गेट थ्रू को फिर से पाने के लिए वैल्यू सेट की जा सकती हैं.
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();
})