সার্ভার-সাইড ট্যাগিংয়ের একটি ভূমিকা

সার্ভার-সাইড ট্যাগিং হলো গুগল ট্যাগ ম্যানেজার ব্যবহার করে বিভিন্ন ডিভাইসে আপনার অ্যাপ্লিকেশনকে পরিমাপ করার একটি নতুন উপায়। সার্ভার কন্টেইনারগুলো আপনার পরিচিত ট্যাগ, ট্রিগার এবং ভ্যারিয়েবল মডেলই ব্যবহার করে, এবং এর পাশাপাশি এমন নতুন টুলও সরবরাহ করে যা ব্যবহারকারীর কার্যকলাপ যেখানেই ঘটুক না কেন, তা পরিমাপ করতে আপনাকে সাহায্য করে।

সার্ভার-সাইড ট্যাগিং ছাড়া একটি সাধারণ ট্যাগিং কনফিগারেশন বিভিন্ন সংগ্রহ সার্ভারে পরিমাপের ডেটা পাঠানোর জন্য পেজের একটি কন্টেইনারের উপর নির্ভর করে। চিত্র ১-এ একটি উদাহরণ দেখানো হয়েছে, যেখানে একটি ওয়েব ব্রাউজারে চলমান ট্যাগ ম্যানেজার ওয়েব কন্টেইনার একাধিক সার্ভারে ডেটা পাঠায়।

চিত্র ১: গুগল ট্যাগ ম্যানেজার ওয়েব কন্টেইনার ব্যবহারের জন্য সজ্জিত একটি সাইটের ডায়াগ্রাম।

এর বিপরীতে, একটি সার্ভার কন্টেইনার ব্যবহারকারীর ব্রাউজারে বা তার ফোনে চলে না। বরং, এটি আপনার নিয়ন্ত্রিত একটি সার্ভারে চলে।

চিত্র ২: সার্ভার কন্টেইনার ব্যবহার করে এমন একটি ট্যাগিং কনফিগারেশনের উদাহরণ।

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

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

এই মডেলটি সার্ভার কন্টেইনারগুলির জন্য দুটি গুরুত্বপূর্ণ প্রশ্ন উত্থাপন করে:

• ব্যবহারকারীর ডিভাইস থেকে পরিমাপের ডেটা কীভাবে সার্ভার কন্টেইনারে পৌঁছায়?
• সার্ভার কন্টেইনারে পাঠানো পরিমাপ ডেটা কীভাবে একটি ইভেন্টে রূপান্তরিত হয়?

উভয় প্রশ্নের উত্তর হলো সার্ভার কন্টেইনারে ব্যবহারের জন্য এক নতুন ধরনের সত্তা: ক্লায়েন্ট ।

ক্লায়েন্টরা কীভাবে কাজ করে

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

অনেক কিছু! চলুন প্রতিটি অংশ আলাদাভাবে আরও ভালোভাবে দেখি। চিত্র ৩-এ দেখানো হয়েছে কীভাবে ব্যবহারকারীর ওয়েব ব্রাউজার থেকে সার্ভার কন্টেইনারে এবং আপনার ওয়েব সার্ভার থেকে সার্ভার কন্টেইনারে ডেটা প্রবাহিত হচ্ছে।

চিত্র ৩: প্রতিটি ডেটা প্রবাহ ভিন্ন ভিন্ন ক্লায়েন্ট দ্বারা পরিচালিত হয়।

ক্লায়েন্টরা একটি ডিভাইস থেকে পরিমাপের ডেটা গ্রহণ করে। ধরা যাক, আপনি তিনটি জায়গায় ব্যবহারকারীর কার্যকলাপ পরিমাপ করতে চান: একটি ওয়েবসাইট, একটি ফোন অ্যাপ এবং একটি স্মার্ট টোস্টার। আপনার ওয়েবসাইটটি গুগল অ্যানালিটিক্স, আপনার ফোন অ্যাপটি ফায়ারবেস অ্যানালিটিক্স এবং আপনার টোস্টারটি "টোস্টমেজার" নামক একটি নিজস্ব প্রোটোকল ব্যবহার করে।

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

ঐ তিনটি কন্টেইনারের পরিবর্তে, আপনার সার্ভার কন্টেইনারে তিনটি ক্লায়েন্ট রয়েছে। কন্টেইনারে আসা প্রতিটি অনুরোধ প্রতিটি ক্লায়েন্ট দ্বারা অগ্রাধিকারের ক্রমানুসারে প্রক্রিয়া করা হবে, সর্বোচ্চ অগ্রাধিকারের ক্লায়েন্ট প্রথমে। প্রতিটি ক্লায়েন্ট প্রথমে যে কাজটি করবে তা হলো, সে ঐ ধরনের অনুরোধটি কীভাবে প্রক্রিয়া করতে হয় তা জানে কি না, সেই সিদ্ধান্ত নেওয়া। যদি সে পারে, ক্লায়েন্টটি অনুরোধটি "ক্লেম" করে এবং প্রক্রিয়াকরণের পরবর্তী পর্যায়ে চলে যায়। অনুরোধ ক্লেম করার এই কাজটি পরবর্তী ক্লায়েন্টদের চলতে বাধা দেয়। যদি ক্লায়েন্ট অনুরোধটি প্রক্রিয়া করতে না পারে, তবে সে কিছুই করে না এবং অন্য ক্লায়েন্টদের অনুরোধটি গ্রহণ করবে কি না, সেই সিদ্ধান্ত নেওয়ার সুযোগ দেয়।

ক্লায়েন্টরা অনুরোধের ডেটাকে এক বা একাধিক ইভেন্টে রূপান্তরিত করে। ToastMeasure ক্লায়েন্ট একবার কোনো অনুরোধ গ্রহণ করলে, সেটিকে এমন কিছুতে রূপান্তরিত করতে হয় যা কন্টেইনারের বাকি অংশ বুঝতে পারে। সেই 'কিছু' হলো একগুচ্ছ ইভেন্ট ।

ইভেন্ট হলো এমন কিছু ঘটনা যা আপনি পরিমাপ করতে চান। এগুলো যেকোনো কিছুই হতে পারে: start_toasting , finish_toasting , বা buy_bread )। ক্লায়েন্ট যে ইভেন্টগুলো তৈরি করে তার গঠন সম্পর্কে কিছু সুপারিশ রয়েছে, কিন্তু একমাত্র শর্ত হলো কন্টেইনারের বাকি অংশকে সেগুলো বুঝতে হবে।

ক্লায়েন্টরা কন্টেইনারটি চালায়। ক্লায়েন্ট অনুরোধটি গ্রহণ করে সেটিকে ইভেন্টে পরিণত করেছে। এখন ট্যাগ, ট্রিগার এবং ভেরিয়েবলের পালা। ক্লায়েন্ট প্রতিটি ইভেন্টকে পরবর্তী প্রক্রিয়াকরণের জন্য কন্টেইনারের বাকি অংশে পাঠিয়ে দেয়।

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

সৌভাগ্যবশত, ট্যাগ ম্যানেজার আপনার জন্য এর বেশিরভাগ কাজই করে দেয়। সার্ভার কন্টেইনারের সাথে দুটি ক্লায়েন্ট অন্তর্ভুক্ত থাকে: গুগল অ্যানালিটিক্স এবং মেজারমেন্ট প্রোটোকল। আপনার কন্টেইনার তৈরি করার সাথে সাথেই অ্যাপ্লিকেশনটিকে ইনস্ট্রুমেন্ট করা শুরু করার জন্য প্রয়োজনীয় টুলস এই ক্লায়েন্টগুলো সরবরাহ করে।

একটি সংক্ষিপ্ত উদাহরণ

সবগুলো অংশ কীভাবে একসাথে কাজ করে তা দেখার জন্য চলুন একটি ছোট উদাহরণ দেখি। এই উদাহরণে, আপনি নিম্নলিখিত জিনিসগুলো তৈরি করবেন:

1. একটি সাধারণ ওয়েবসাইট যা সার্ভার কন্টেইনারে click ইভেন্ট পাঠাতে gtag.js ব্যবহার করে।
2. একটি গুগল অ্যানালিটিক্স ক্লায়েন্ট যা ইভেন্টটি গ্রহণ করে।
3. একটি ট্রিগার যা click ইভেন্টে সক্রিয় হয়।
4. একটি গুগল অ্যানালিটিক্স ট্যাগ যা প্রক্রিয়াকরণের জন্য ইভেন্টের ডেটা গুগল অ্যানালিটিক্সে পাঠায়।

এই উদাহরণের জন্য, আমরা ধরে নেব যে আপনি ইতিমধ্যেই আপনার সার্ভার কন্টেইনারটি তৈরি এবং স্থাপন করেছেন ।

gtag.js কনফিগার করুন

প্রথমে, আপনার সার্ভার কন্টেইনারে ডেটা পাঠানোর জন্য gtag.js কনফিগার করুন। gtag.js ব্যবহার করে আপনার সার্ভার কন্টেইনারে ডেটা পাঠানো অনেকটা গুগল অ্যানালিটিক্সে ডেটা পাঠানোর মতোই, তবে একটি পরিবর্তন রয়েছে। নিচের উদাহরণ পৃষ্ঠার মতো, সার্ভার কন্টেইনারকে নির্দেশ করার জন্য server_container_url কনফিগ অপশনটি সেট করুন।

<!-- 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', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

TAG_ID জায়গায় আপনার ট্যাগ আইডি বসান। https://analytics.example.com এর জায়গায় আপনার সার্ভার কন্টেইনার ইউআরএল বসান।

এরপরে, click ইভেন্টগুলো পরিচালনা করার জন্য একটি sendEvent() ফাংশন যোগ করুন:

<!-- 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', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

TAG_ID জায়গায় আপনার ট্যাগ আইডি বসান। https://analytics.example.com এর জায়গায় আপনার সার্ভার কন্টেইনার ইউআরএল বসান।

এই কনফিগারেশনের মাধ্যমে, এই উদাহরণে অন্তর্ভুক্ত sendEvent() ফাংশনের মতো ইভেন্ট হ্যান্ডলারগুলো আপনার সার্ভার কন্টেইনারে একটি click ইভেন্ট পাঠাবে।

দ্রষ্টব্য: ট্যাগ ম্যানেজার ইনস্টলেশনের ক্ষেত্রে, আপনার কন্টেইনারগুলি কীভাবে কনফিগার করবেন সে সম্পর্কে আরও বিস্তারিত জানতে " সার্ভার-সাইড ট্যাগ ম্যানেজারে ডেটা পাঠান " অংশটি পড়ুন।

গুগল অ্যানালিটিক্স ক্লায়েন্ট

সার্ভারে ইভেন্টটি পৌঁছানোর পর, সেটি গ্রহণ করার জন্য আপনার কন্টেইনারের একটি ক্লায়েন্ট প্রয়োজন। সৌভাগ্যবশত, সার্ভার কন্টেইনারগুলোতে গুগল অ্যানালিটিক্স ক্লায়েন্ট আগে থেকেই ইনস্টল করা থাকে, তাই এই ধাপটি আপনার আগেই সম্পন্ন হয়ে গেছে।

ক্লিক ট্রিগার

এরপর, একটি ট্রিগার তৈরি করুন যা click ইভেন্টে সক্রিয় হবে। একটি কাস্টম ট্রিগার তৈরি করুন যা তখন সক্রিয় হবে যখন Event Name বিল্ট-ইন ভেরিয়েবলটি "click" এর সমান হবে।

গুগল অ্যানালিটিক্স ট্যাগ

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

কন্টেইনারটির প্রিভিউ দেখুন

এখন যেহেতু কন্টেইনারটি কনফিগার করা হয়ে গেছে, প্রিভিউ-তে ক্লিক করুন। অন্য একটি ব্রাউজার উইন্ডোতে আপনার ওয়েবসাইটটি ভিজিট করুন। আপনার সার্ভার কন্টেইনারে যখন রিকোয়েস্ট এবং ইভেন্ট পাঠানো হবে, তখন আপনি প্রিভিউ পেজের বাম দিকে সেই রিকোয়েস্ট এবং ইভেন্টগুলোর তালিকা দেখতে পাবেন।

আপনার পরিবর্তনগুলো নিয়ে সন্তুষ্ট হলে, সার্ভার কন্টেইনারটি পাবলিশ করুন।

ফার্স্ট-পার্টি সার্ভিং সহ আপনার সার্ভারকে প্রোডাকশন মোডের জন্য কনফিগার করুন।

আপনার সার্ভার কন্টেইনারে কোনো প্রোডাকশন ট্র্যাফিক পাঠানোর আগে, আমরা দৃঢ়ভাবে সুপারিশ করছি যে আপনি সার্ভারটি আপনার ফার্স্ট-পার্টি ডোমেইনে ইনস্টল করুন এবং সার্ভারটিকে প্রোডাকশন মোডে আপগ্রেড করুন।