डेटा लेयर एक ऑब्जेक्ट है, जिसका इस्तेमाल 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 के वेब पेज इंस्टॉलेशन के लिए, आपको डेटा लेयर बनाना होगा. कॉन्टेंट बनाने नीचे हाइलाइट किया गया कोड दिखाता है कि टैग से पहले, डेटा लेयर कहां स्थापित है मैनेजर लोड हो गया है.
<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, फ़र्स्ट-इन, फ़र्स्ट-आउट आधार: हर मैसेज को एक-एक करके प्रोसेस किया जाता है. यह उसी क्रम में किया जाता है जिस क्रम में वह हमें मिला था. अगर आपने मैसेज एक इवेंट है. शर्तों के मुताबिक ट्रिगर होने वाले सभी टैग पूरे हो चुके हैं टैग मैनेजर के अगले मैसेज पर जाने से पहले फ़ायर होगा.
अगर किसी कस्टम कॉलम में, कोड का इस्तेमाल करके 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>
कैप्चर करने के लिए, डेटा लेयर वैरिएबल को डाइनैमिक तौर पर डेटा लेयर में पुश किया जा सकता है जानकारी जैसे कि फ़ॉर्म में डाली गई या चुनी गई वैल्यू, आपके कॉन्टेंट से जुड़ा मेटाडेटा एक ऐसा वीडियो जिसे विज़िटर चला रहा है, किसी प्रॉडक्ट का रंग (जैसे कार) विज़िटर द्वारा कस्टमाइज़ किए गए लिंक, क्लिक किए गए लिंक के गंतव्य URL वगैरह.
इवेंट की तरह ही, यह फ़ंक्शन 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()
को कॉल करें
हर पेज लोड पर डेटा लेयर को इंस्टैंशिएट किया जाता है और वैरिएबल को पुश किया जाता है
डेटा लेयर में जोड़ा जा सकता है. अगर आपको टैग को ये डेटा लेयर वैरिएबल उपलब्ध कराने हैं
मैनेजर कंटेनर लोड होने के बाद, इसके ऊपर एक dataLayer.push()
कॉल जोड़ें
जैसा कि नीचे दिखाया गया है, Tag Manager कंटेनर कोड.
<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'})
और अगर वे
पेज लोड होने पर टैग मैनेजर में मान उपलब्ध होने चाहिए,
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();
})