ডেটা লেয়ার

ডেটা লেয়ার হল Google Tag Manager এবং gtag.js-এর মাধ্যমে ট্যাগে তথ্য পাঠানোর জন্য ব্যবহৃত একটি অবজেক্ট। ডেটা লেয়ার ব্যবহার করে ইভেন্ট বা ভেরিয়েবেল পাস করা যেতে পারে এবং ভেরিয়েবেলের ভ্যালুর উপর ভিত্তি করে ট্রিগার সেট-আপ করা যেতে পারে।

যেমন, purchase_total-এর ভ্যালু $১০০-এর বেশি হলে অথবা নির্দিষ্ট ইভেন্টের ভিত্তিতে, যেমন কোনও বোতামে ক্লিক করা হলে, আপনি যদি রিমার্কেটিং ট্যাগ ফায়ার করেন, তাহলে আপনার ডেটা লেয়ার এমনভাবে কনফিগার করা যেতে পারে যাতে সেই ডেটা আপনার ট্যাগের জন্য উপলভ্য হয়। ডেটা লেয়ার অবজেক্ট 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 -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

ডেটা লেয়ারের তথ্য কীভাবে প্রসেস করা হয়

কন্টেনার লোড হয়ে গেলে, Tag Manager সারিবদ্ধভাবে থাকা সব ডেটা লেয়ার পুশ মেসেজ প্রসেস করা শুরু করবে। Tag Manager ফার্স্ট-ইন, ফার্স্ট-আউট ভিত্তিতে মেসেজ প্রসেস করে: প্রতিটি মেসেজ এক এক করে প্রসেস করা হয়, যে ক্রমে এটি পাওয়া গেছে সেই ক্রমে। মেসেজটি কোনও ইভেন্ট হলে, ট্রিগার শর্ত পূরণ করা যেকোনও ট্যাগ, Tag Manager পরবর্তী মেসেজে যাওয়ার আগে ফায়ার করবে।

কোনও পৃষ্ঠায়, কাস্টম টেমপ্লেটে বা কাস্টম HTML ট্যাগে কোডের মাধ্যমে gtag() বা dataLayer.push() কল করা হলে, সংশ্লিষ্ট মেসেজটি সারিতে রাখা হয় এবং বাকি সব পেন্ডিং মেসেজ মূল্যায়ন করার পরে প্রসেস করা হয়। এর অর্থ হল, পরবর্তী ইভেন্টের জন্য কোনও আপডেট করা ডেটা লেয়ার ভ্যালু উপলভ্য থাকার কোনও গ্যারান্টি নেই। এইসব পরিস্থিতি ম্যানেজ করতে, ডেটা লেয়ারে পুশ করা হলে, আপনাকে মেসেজে ইভেন্টের নাম যোগ করতে হবে এবং তারপর কাস্টম ইভেন্ট ট্রিগার ব্যবহার করে সেই ইভেন্টের নাম শুনতে হবে।

ইভেন্ট হ্যান্ডলারের সাথে ডেটা লেয়ার ব্যবহার করা

dataLayer অবজেক্ট ইভেন্ট পাঠানো শুরু করার জন্য event কমান্ড ব্যবহার করে।

Google ট্যাগ এবং ট্যাগ ম্যানেজার event নামক একটি বিশেষ ডেটা লেয়ার ভেরিয়েবল ব্যবহার করে যা জাভাস্ক্রিপ্ট ইভেন্ট লিসেনার ব্যবহার করে ট্যাগ ফায়ার করার জন্য যখন কোনও ব্যবহারকারী ওয়েবসাইট এলিমেন্টের সাথে ইন্টার‍্যাক্ট করে। যেমন, কোনও ব্যবহারকারী কেনাকাটা কনফার্ম করার বোতামে ক্লিক করলে, আপনি হয়ত কনভার্সন ট্র্যাকিং ট্যাগ ফায়ার করতে চাইবেন। ব্যবহারকারী যখনই ওয়েবসাইট এলিমেন্ট যেমন লিঙ্ক, বোতাম, স্ক্রল ইত্যাদির সাথে ইন্টার‍্যাক্ট করেন, তখনই ইভেন্ট কল করা হতে পারে।

কোনও ইভেন্ট ঘটলে 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() 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-কে অবশ্যই সঠিক জাভাস্ক্রিপ্ট অবজেক্টের সাথে কল করতে হবে। সব ডেটা লেয়ার ভেরিয়েবলের নাম কোটেশনের মধ্যে থাকতে হবে।

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 ট্যাগ বা ট্যাগ ম্যানেজার দ্বারা শুরু করা ডেটা লেয়ার অবজেক্টের ডিফল্ট নাম হল dataLayer। আপনি ডেটা লেয়ারের জন্য অন্য কোনও নাম ব্যবহার করতে চাইলে, Google ট্যাগ বা ট্যাগ ম্যানেজার কন্টেনার স্নিপেটে ডেটা লেয়ার প্যারামিটারের মান এডিট করে আপনার পছন্দের নাম দিতে পারেন।

ট্যাগ ম্যানেজার

আপনার কন্টেনার স্নিপেটে ডেটা লেয়ার প্যারামিটারের মান (নিচে হাইলাইট করা হয়েছে) আপনার পছন্দের নাম দিয়ে পরিবর্তন করুন।

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

নতুন ডেটা লেয়ারের নাম সেট করতে URL-এ "l" নামের কোয়েরি প্যারামিটার যোগ করুন, যেমন, l=myNewName। Google ট্যাগ স্নিপেটে dataLayer-এর সব ইনস্ট্যান্স নতুন নামে আপডেট করুন।

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());
</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();
});