डेटा लेयर

डेटा लेयर एक ऑब्जेक्ट है. इसका इस्तेमाल 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 object name is case-sensitive: If you try to push a variable or event without the proper casing, the push won't work.

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

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

<!-- 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>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

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

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

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

window.dataLayer.push(function() {
  this.reset();
});