डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है, जिसका इस्तेमाल 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();
})