ডেটা স্তর

ডেটা লেয়ার হলো একটি অবজেক্ট যা গুগল ট্যাগ ম্যানেজার এবং 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"
}

গুগল ট্যাগগুলো আপনার পেজ জুড়ে ছড়িয়ে থাকা ভ্যারিয়েবল, লেনদেনের তথ্য, পেজের ক্যাটাগরি এবং অন্যান্য সংকেত পার্স করার পরিবর্তে, ডেটা লেয়ারে যুক্ত হওয়া তথ্যকে একটি সংগঠিত ও অনুমানযোগ্য উপায়ে সহজে রেফারেন্স করার জন্য ডিজাইন করা হয়েছে। ভ্যারিয়েবল এবং সংশ্লিষ্ট মান দিয়ে পরিপূর্ণ একটি ডেটা লেয়ার ইমপ্লিমেন্টেশন এটা নিশ্চিত করতে সাহায্য করবে যে, আপনার ট্যাগগুলোর প্রয়োজনের সময় প্রাসঙ্গিক ডেটা উপলব্ধ থাকবে।

ইনস্টলেশন

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

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

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

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

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

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

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

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

কোনো ইভেন্ট ঘটলে 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() 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'});

ডেটা লেয়ারের নাম পরিবর্তন করুন

গুগল ট্যাগ বা ট্যাগ ম্যানেজার দ্বারা শুরু করা ডেটা লেয়ার অবজেক্টের ডিফল্ট নাম হলো dataLayer । আপনি যদি আপনার ডেটা লেয়ারের জন্য একটি ভিন্ন নাম ব্যবহার করতে চান, তবে আপনার গুগল ট্যাগ বা ট্যাগ ম্যানেজার কন্টেইনার স্নিপেটে ডেটা লেয়ার প্যারামিটারের মানটি আপনার পছন্দের নাম দিয়ে সম্পাদনা করে তা করতে পারেন।

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