ডেটা লেয়ার

ডেটা লেয়ার হল একটি অবজেক্ট যা 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 (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 পরবর্তী মেসেজে যাওয়ার আগে ফায়ার করবে।

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

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

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

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

কোনও ইভেন্ট ঘটলে dataLayer.push()-এ কল করার মাধ্যমে এই কার্যকারিতা সম্পন্ন হয়। dataLayer.push()-এর সাথে ইভেন্ট পাঠানোর সিনট্যাক্স নিচে দেওয়া হল:

dataLayer.push({'event': 'event_name'});

যেখানে event_name হল ইভেন্টের বর্ণনা দেওয়া একটি স্ট্রিং, যেমন 'login', 'purchase' অথবা 'search'।

আপনি পরিমাপ করতে চান এমন কোনও অ্যাকশন ঘটলে, ইভেন্ট ডেটা পাঠানোর জন্য dataLayer.push() ব্যবহার করুন। যেমন, কোনও ব্যবহারকারী বোতামে ক্লিক করলে ইভেন্ট পাঠানোর জন্য, বোতামের onclick হ্যান্ডলারকে dataLayer.push() কল করার জন্য পরিবর্তন করুন:

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

নতুন ডেটা লেয়ারের নাম সেট করতে URL-এ "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();
});