ডেটা লেয়ার

ডেটা লেয়ার হল এমন একটি অবজেক্ট যা 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 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 ভেরিয়েবল ওভাররাইট করবেন না: আপনি সরাসরি data layer ব্যবহার করলে (যেমন, 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();
});