ডেটা স্তর

ডেটা লেয়ার হল একটি অবজেক্ট যা Google ট্যাগ ম্যানেজার এবং 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 ট্যাগগুলি আপনার পৃষ্ঠা জুড়ে ছড়িয়ে থাকা ভেরিয়েবল, লেনদেনের তথ্য, পৃষ্ঠা বিভাগ এবং অন্যান্য সংকেতগুলিকে পার্স করার পরিবর্তে একটি সংগঠিত এবং অনুমানযোগ্য উপায়ে ডেটা স্তরে যোগ করা তথ্য সহজে উল্লেখ করার জন্য ডিজাইন করা হয়েছে৷ ভেরিয়েবল এবং সংশ্লিষ্ট মান দিয়ে তৈরি একটি ডেটা স্তর বাস্তবায়ন আপনার ট্যাগগুলির প্রয়োজন হলে প্রাসঙ্গিক ডেটা উপলব্ধ রয়েছে তা নিশ্চিত করতে সহায়তা করবে।

স্থাপন

ট্যাগ ম্যানেজার ওয়েব পৃষ্ঠা ইনস্টলেশনের জন্য, আপনাকে অবশ্যই একটি ডেটা স্তর তৈরি করতে হবে। ট্যাগ ম্যানেজার লোড হওয়ার আগে নীচের হাইলাইট করা কোডটি দেখায় যে ডেটা স্তরটি কোথায় প্রতিষ্ঠিত হয়েছে।

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

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

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

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

ইভেন্ট হ্যান্ডলারের সাথে একটি ডেটা স্তর ব্যবহার করুন

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() কল করুন এবং ভেরিয়েবলগুলিকে ডেটা স্তরে পুশ করুন৷ আপনি যদি চান যে এই ডেটা লেয়ার ভেরিয়েবলগুলি ট্যাগ ম্যানেজারের কাছে উপলভ্য থাকুক যখন কন্টেইনারটি লোড করা হয়, তাহলে নীচে দেখানো হিসাবে ট্যাগ ম্যানেজার কন্টেইনার কোডের উপরে একটি 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 এ বিদ্যমান যেকোনো মান ওভাররাইট করবে। ট্যাগ ম্যানেজার ইনস্টলেশনে window.dataLayer = window.dataLayer || []; . dataLayer ঘোষিত হওয়ার পরে, এতে অতিরিক্ত মান যোগ করতে dataLayer.push({'item': 'value'}) ব্যবহার করুন এবং পৃষ্ঠা লোড হওয়ার সময় যদি সেই মানগুলি ট্যাগ ম্যানেজারের কাছে উপলব্ধ থাকতে হয়, তাহলে সেই dataLayer.push() কল ট্যাগ ম্যানেজার কন্টেইনার কোডের উপরেও হতে হবে।

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 ট্যাগ বা ট্যাগ ম্যানেজার কন্টেইনার স্নিপেটে ডেটা স্তরের প্যারামিটার মান সম্পাদনা করে তা করতে পারেন৷

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>

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

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

<!-- 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();
})