কিভাবে একটি সার্ভার ট্যাগ তৈরি করতে হয়

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

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

সার্ভার কন্টেইনারগুলিতে তিনটি বিল্ট-ইন ট্যাগ রয়েছে যা কোনো কাস্টম কনফিগারেশন ছাড়াই ব্যবহারের জন্য প্রস্তুত:

• গুগল অ্যানালিটিক্স
• HTTP অনুরোধ

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

উদ্দেশ্য

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

পূর্বশর্ত

• একটি ডেপ্লয় করা সার্ভার কন্টেইনার
• ট্যাগ ম্যানেজার, সার্ভার কন্টেইনার এবং এগুলোর মৌলিক ধারণা যেমন ক্লায়েন্ট , ট্যাগ , ট্রিগার ও ভেরিয়েবল সম্পর্কে পরিচিতি।
• ট্যাগ এবং ভেরিয়েবলের জন্য টেমপ্লেট লেখার প্রাথমিক বিষয়গুলির সাথে পরিচিতি।

বাজ অ্যানালিটিক্স ট্যাগ

এই টিউটোরিয়ালে আপনি এমন একটি ট্যাগ তৈরি করবেন যা Baz Analytics নামক একটি সার্ভিসে পরিমাপের ডেটা পাঠাবে।

বাজ অ্যানালিটিক্স হলো একটি সরল, কাল্পনিক অ্যানালিটিক্স পরিষেবা যা https://example.com/baz_analytics -এ HTTP GET অনুরোধের মাধ্যমে ডেটা গ্রহণ করে। এর নিম্নলিখিত প্যারামিটারগুলো রয়েছে:

প্যারামিটার	উদাহরণ	বর্ণনা
আইডি	বিএ-১২৩৪	আপনার Baz Analytics অ্যাকাউন্টের আইডি।
ইংরেজি	ক্লিক করুন	অনুষ্ঠানের নাম।
এল	https://www.google.com/search?q=sgtm	যে পৃষ্ঠায় ঘটনাটি ঘটেছে তার URL।
উ	২৩৮৪২৯৪৮৯২	কাজটি সম্পাদনকারী ব্যবহারকারীর আইডি। একাধিক কাজকে একজন ব্যবহারকারীর সাথে সংযুক্ত করতে এটি ব্যবহৃত হয়।

ট্যাগ কনফিগারেশন

প্রথমেই ট্যাগ টেমপ্লেট তৈরি করতে হবে। আপনার কন্টেইনারের টেমপ্লেট বিভাগে যান এবং ট্যাগ টেমপ্লেট সেকশনের মধ্যে থাকা নিউ (New) বাটনে ক্লিক করুন। আপনার ট্যাগে একটি নাম এবং বিবরণ যোগ করুন।

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

1. সম্পূর্ণ কনফিগারেশন : প্রতিটি প্যারামিটারের জন্য একটি কনফিগারেশন ফিল্ড যোগ করুন। ব্যবহারকারীকে সবকিছু স্পষ্টভাবে সেট করতে বলুন।
2. কোনো কনফিগারেশন নেই : ট্যাগটি কনফিগার করার জন্য কোনো অপশন নেই। সমস্ত ডেটা সরাসরি ইভেন্ট থেকে নেওয়া হয়।
3. কিছু কনফিগারেশন : কিছু প্যারামিটারের জন্য ফিল্ড আছে, অন্যগুলোর জন্য নেই।

প্রতিটি প্যারামিটারের জন্য ফিল্ড থাকা খুবই নমনীয় এবং এটি ব্যবহারকারীকে তার ট্যাগ কনফিগারেশনের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। তবে বাস্তবে, এর ফলে সাধারণত অনেক কাজের পুনরাবৃত্তি ঘটে। বিশেষ করে, Baz Analytics-এর l প্যারামিটারের মতো বিষয়গুলো, যেটিতে পেজের URL থাকে, সেগুলো দ্ব্যর্থহীন এবং সর্বজনীন। প্রতিবার ট্যাগ কনফিগার করার সময় একই, অপরিবর্তনীয় ডেটা প্রবেশ করানোর কাজটি কম্পিউটারের উপর ছেড়ে দেওয়াই শ্রেয়।

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

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

ডেটা কোথা থেকে আসে?

গুগল অ্যানালিটিক্স ট্যাগ থেকে সার্ভার কন্টেইনারে আসা ডেটাকে মোটামুটিভাবে দুটি ভাগে ভাগ করা যায়: ব্যবহারকারী-নির্দিষ্ট ডেটা এবং স্বয়ংক্রিয়ভাবে সংগৃহীত ডেটা।

ব্যবহারকারী-নির্দিষ্ট ডেটা হলো এমন সবকিছু যা একজন ব্যবহারকারী একটি gtag.js event কমান্ডে প্রবেশ করান। উদাহরণস্বরূপ, এই ধরনের একটি কমান্ড:

gtag('event', 'search', {
  search_term: 'beets',
});

এর ফলে সার্ভার কন্টেইনারে নিম্নলিখিত প্যারামিটারগুলো পাওয়া যাবে:

{
  event_name: 'search',
  search_term: 'beets',
}

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

সৌভাগ্যবশত, কন্টেইনারটি শুধু ব্যবহারকারীর দেওয়া তথ্যই গ্রহণ করবে না। এটি ব্রাউজারে থাকা গুগল অ্যানালিটিক্স ট্যাগ দ্বারা স্বয়ংক্রিয়ভাবে সংগৃহীত আরও অনেক ডেটাও পাবে। এর মধ্যে রয়েছে:

• ip_override
• language
• page_location
• page_referrer
• page_title
• screen_resolution
• user_agent

এছাড়াও, যদি সার্ভার অনুরোধটি কোনো ওয়েব ব্রাউজার থেকে আসে, তাহলে getCookieValue API-এর মাধ্যমে ব্রাউজার কুকি ডেটাও পাওয়া যেতে পারে।

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

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

এই বিষয়টি মাথায় রেখে, Baz Analytics ট্যাগের প্যারামিটারগুলো আরেকবার দেখে নিন।

• মেজারমেন্ট আইডি, id : যেহেতু এটি স্বয়ংক্রিয়ভাবে সংগৃহীত হয় না, তাই এটি এমন একটি মানের স্পষ্ট উদাহরণ যা ট্যাগ কনফিগার করার সময় ব্যবহারকারীকে প্রবেশ করাতে হয়।
• ইভেন্টের নাম en উপরে যেমন উল্লেখ করা হয়েছে, ইভেন্টের নামটি সর্বদা সরাসরি ` event_name প্যারামিটার থেকে নেওয়া যেতে পারে। তবে, যেহেতু এর মান ব্যবহারকারী-নির্ধারিত, তাই প্রয়োজনে নামটি পরিবর্তন করার সুযোগ রাখা একটি ভালো ধারণা।
• পেজ ইউআরএল, l : এই মানটি page_location প্যারামিটার থেকে নেওয়া যেতে পারে, যা প্রতিটি ইভেন্টে গুগল অ্যানালিটিক্স ব্রাউজার ট্যাগ দ্বারা স্বয়ংক্রিয়ভাবে সংগ্রহ করা হয়। সুতরাং, ব্যবহারকারীকে ম্যানুয়ালি কোনো মান প্রবেশ করতে বলার প্রয়োজন নেই।
• ইউজার আইডি, u : Baz Analytics সার্ভার ট্যাগে, u প্যারামিটারটি ব্যবহারকারী দ্বারা নির্দিষ্ট করা হয় না বা পৃষ্ঠার ট্যাগ দ্বারা স্বয়ংক্রিয়ভাবে সংগ্রহ করা হয় না। পরিবর্তে, এটি একটি ব্রাউজার কুকিতে সংরক্ষণ করা হয় যাতে ওয়েবসাইটে একাধিকবার পরিদর্শনের সময় ব্যবহারকারীদের শনাক্ত করা যায়। আপনি নীচের বাস্তবায়নে দেখতে পাবেন, Baz Analytics সার্ভার ট্যাগই setCookie API ব্যবহার করে কুকিটি সেট করে। এর মানে হল, Baz Analytics ট্যাগই একমাত্র জানে যে কুকিটি কোথায় এবং কীভাবে সংরক্ষণ করা হয়েছে। l এর মতো, u প্যারামিটারটিও স্বয়ংক্রিয়ভাবে সংগ্রহ করা উচিত।

ট্যাগ কনফিগারেশন সেট আপ করা হয়ে গেলে, এটি দেখতে অনেকটা এইরকম হবে:

ট্যাগ বাস্তবায়ন

ট্যাগটির কনফিগারেশন এখন যেহেতু ঠিকঠাক করা হয়ে গেছে, আপনি স্যান্ডবক্সড জাভাস্ক্রিপ্টে এর আচরণ বাস্তবায়নের দিকে এগিয়ে যেতে প্রস্তুত।

ট্যাগটিকে চারটি কাজ করতে হবে:

1. ট্যাগের কনফিগারেশন থেকে ইভেন্টের নামটি নিন।
2. ইভেন্টের page_location প্রপার্টি থেকে পেজের URL-টি নিন।
3. একটি ইউজার আইডি গণনা করুন। ট্যাগটি _bauid নামের একটি কুকিতে ইউজার আইডিটি খুঁজবে। যদি সেই কুকিটি উপস্থিত না থাকে, তবে ট্যাগটি একটি নতুন মান গণনা করে পরবর্তী অনুরোধগুলির জন্য তা সংরক্ষণ করবে।
4. একটি URL তৈরি করুন এবং Baz Analytics কালেকশন সার্ভারে একটি অনুরোধ পাঠান।

ট্যাগটি সামগ্রিকভাবে কন্টেইনারের মধ্যে কীভাবে খাপ খায়, তা নিয়েও এক মুহূর্ত ভাবা উচিত। কন্টেইনারের বিভিন্ন উপাদান ভিন্ন ভিন্ন ভূমিকা পালন করে, তাই এমন কিছু কাজও আছে যা ট্যাগটি করে না বা করা উচিত নয়। আপনার ট্যাগ:

• ইভেন্টটি চালানো উচিত কি না, তা বোঝার জন্য সেটি খতিয়ে দেখা উচিত নয়। সেই কাজের জন্যই তো ট্রিগার থাকে।
• runContainer API ব্যবহার করে কন্টেইনারটি চালানো উচিত নয়। এটা ক্লায়েন্টের কাজ।
• কুকির গুরুত্বপূর্ণ ব্যতিক্রম ছাড়া, এটির অনুরোধ বা প্রতিক্রিয়ার সাথে সরাসরি যোগাযোগ করার চেষ্টা করা উচিত নয়। সেটাও ক্লায়েন্টের কাজ।

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

এই সবকিছু মাথায় রেখে, নিচে স্যান্ডবক্সড JS-এ ট্যাগটির একটি টীকাসহ বাস্তবায়ন দেওয়া হলো।

const encodeUriComponent = require('encodeUriComponent');
const generateRandom = require('generateRandom');
const getCookieValues = require('getCookieValues');
const getEventData = require('getEventData');
const logToConsole = require('logToConsole');
const makeString = require('makeString');
const sendHttpGet = require('sendHttpGet');
const setCookie = require('setCookie');

const USER_ID_COOKIE = '_bauid';
const MAX_USER_ID = 1000000000;

// The event name is taken from either the tag's configuration or from the
// event. Configuration data comes into the sandboxed code as a predefined
// variable called 'data'.
const eventName = data.eventName || getEventData('event_name');

// page_location is automatically collected by the Google Analytics tag.
// Therefore, it's safe to take it directly from event data rather than require
// the user to specify it. Use the getEventData API to retrieve a single data
// point from the event. There's also a getAllEventData API that returns the
// entire event.
const pageLocation = getEventData('page_location');
const userId = getUserId();

const url = 'https://www.example.com/baz_analytics?' +
    'id=' + encodeUriComponent(data.measurementId) +
    'en=' + encodeUriComponent(eventName) +
    (pageLocation ? 'l=' + encodeUriComponent(pageLocation) : '') +
    'u=' + userId;

// The sendHttpGet API takes a URL and returns a promise that resolves with the
// result once the request completes. You must call data.gtmOnSuccess() or
// data.gtmOnFailure() so that the container knows when the tag has finished
// executing.
sendHttpGet(url).then((result) => {
  if (result.statusCode >= 200 && result.statusCode < 300) {
    data.gtmOnSuccess();
  } else {
    data.gtmOnFailure();
  }
});

// The user ID is taken from a cookie, if present. If it's not present, a new ID
// is randomly generated and stored for later use.
//
// Generally speaking, tags should not interact directly with the request or
// response. This prevents different tags from conflicting with each other.
// Cookies, however, are an exception. Tags are the only container entities that
// know which cookies they need to read or write. Therefore, it's okay for tags
// to interact with them directly.
function getUserId() {
  const userId = getCookieValues(USER_ID_COOKIE)[0] || generateRandom(0, MAX_USER_ID);
  // The setCookie API adds a value to the 'cookie' header on the response.
  setCookie(USER_ID_COOKIE, makeString(userId), {
    'max-age': 3600 * 24 * 365 * 2,
    domain: 'auto',
    path: '/',
    httpOnly: true,
    secure: true,
  });

  return userId;
}

এর মাধ্যমে ট্যাগটি প্রয়োগ করা হলো। ট্যাগটি ব্যবহার করার আগে, আপনাকে এর এপিআই (API) অনুমতিগুলো সঠিকভাবে সেট করতে হবে। টেমপ্লেট এডিটরের পারমিশন ট্যাবে যান এবং নিম্নলিখিত অনুমতিগুলো নির্দিষ্ট করুন:

• কুকির মান পড়ে: _bauid
• ইভেন্টের ডেটা পড়ে: event_name এবং page_location
• HTTP অনুরোধ পাঠায়: https://www.example.com/*
• একটি কুকি সেট করে: _bauid

আপনার ট্যাগের জন্যও টেস্ট লেখা উচিত। টেমপ্লেট টেস্টিং সম্পর্কে আরও জানতে, টেমপ্লেট ডেভেলপার গাইডের টেস্ট বিভাগটি পড়ুন।

সবশেষে, অন্তত একবার 'রান কোড' বাটনটি ব্যবহার করে আপনার ট্যাগটি রান করতে ভুলবেন না। এর ফলে অনেক সাধারণ ভুল আপনার সার্ভারে চলে আসা প্রতিরোধ করা যাবে।

আপনার ট্যাগটি কমিউনিটি টেমপ্লেট গ্যালারিতে জমা দিন।

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

উপসংহার

এই টিউটোরিয়ালে, আপনি সার্ভার কন্টেইনারের জন্য ট্যাগ লেখার প্রাথমিক বিষয়গুলো শিখেছেন। আপনি শিখেছেন:

• ইভেন্ট ডেটা পড়তে, HTTP অনুরোধ পাঠাতে এবং ব্রাউজারে কুকি সেট করতে কোন API গুলো ব্যবহার করতে হবে।
• একটি ট্যাগের কনফিগারেশন অপশন ডিজাইন করার সর্বোত্তম পদ্ধতি।
• ব্যবহারকারী-নির্দিষ্ট ডেটা এবং স্বয়ংক্রিয়ভাবে সংগৃহীত ডেটার মধ্যে পার্থক্য এবং কেন এই পার্থক্যটি গুরুত্বপূর্ণ।
• কন্টেইনারে ট্যাগের ভূমিকা; এর কী করা উচিত এবং কী করা উচিত নয়।
• কমিউনিটি টেমপ্লেট গ্যালারিতে ট্যাগ টেমপ্লেট কখন এবং কীভাবে জমা দিতে হবে।