डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है. इसका इस्तेमाल 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 कंटेनर स्निपेट में, डेटा लेयर पैरामीटर की वैल्यू में अपनी पसंद का नाम डालकर ऐसा किया जा सकता है.

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 -->

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>

नाम बदलने के बाद, अपने डेटा लेयर के सभी रेफ़रंस (यानी, स्निपेट के ऊपर डेटा लेयर का एलान करते समय या .push() कमांड की मदद से, डेटा लेयर में इवेंट या डाइनैमिक डेटा लेयर वैरिएबल पुश करते समय) को अपने कस्टम डेटा लेयर के नाम के हिसाब से अडजस्ट करना होगा:

<script>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

डेटा लेयर के कस्टम तरीके

अगर डेटा लेयर में कोई फ़ंक्शन पुश किया जाता है, तो उसे ऐब्स्ट्रैक्ट डेटा मॉडल पर सेट किए गए this के साथ कॉल किया जाएगा. यह ऐब्स्ट्रैक्ट डेटा मॉडल, की-वैल्यू स्टोर में वैल्यू पा सकता है और सेट कर सकता है. साथ ही, यह डेटा लेयर को रीसेट करने का तरीका भी उपलब्ध कराता है.

सेट करो

ऐब्स्ट्रैक्ट डेटा मॉडल पर मौजूद 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();
});