ট্যাগ ও ট্যাগ ম্যানেজারের জন্য পেশাদার পদ্ধতি

Katie Hempenius

Barry Pollard

প্রকাশিত: ২৯ জুলাই, ২০২১

ট্যাগ হল থার্ড-পার্টি কোডের স্নিপেট যা সাইটে যোগ করা হয়, সাধারণত ট্যাগ ম্যানেজারের মাধ্যমে। ট্যাগ সাধারণত মার্কেটিং ও অ্যানালিটিক্সের জন্য ব্যবহার করা হয়।

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

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

এখানে, আমরা পারফর্ম্যান্স এবং Core Web Vitals-এর জন্য ট্যাগ এবং ট্যাগ ম্যানেজার অপ্টিমাইজ করার কৌশল নিয়ে আলোচনা করি। এই ডকুমেন্টে Google Tag Manager-এর উল্লেখ থাকলেও, এখানে আলোচিত অনেক আইডিয়া অন্যান্য ট্যাগ ম্যানেজারের ক্ষেত্রেও প্রযোজ্য।

Core Web Vitals-এর উপর প্রভাব

ট্যাগ ম্যানেজার প্রায়ই আপনার Core Web Vitals-এর উপর পরোক্ষভাবে প্রভাব ফেলতে পারে। এটি আপনার পৃষ্ঠা দ্রুত লোড করতে এবং রেসপন্সিভ রাখতে প্রয়োজনীয় রিসোর্স ব্যবহার করে। আপনার সাইটের জন্য ট্যাগ ম্যানেজার জাভাস্ক্রিপ্ট ডাউনলোড করতে বা এর ফলে হওয়া পরবর্তী কলের জন্য ব্যান্ডউইথ খরচ হতে পারে। ট্যাগ ম্যানেজার ও ট্যাগের মধ্যে থাকা জাভাস্ক্রিপ্ট মূল্যায়ন ও এক্সিকিউট করতে মূল থ্রেডে সিপিইউ টাইম খরচ হতে পারে।

গুরুত্বপূর্ণ পেজ লোড হওয়ার সময় ব্যান্ডউইথ কন্টেনশনের কারণে Largest Contentful Paint (LCP) প্রভাবিত হতে পারে। এছাড়াও, মূল থ্রেড ব্লক করা হলে LCP রেন্ডার করার মোট সময় আরও বেশি হতে পারে।

Cumulative Layout Shift (CLS) প্রভাবিত হতে পারে, হয় প্রথমবার রেন্ডার করার আগে গুরুত্বপূর্ণ রিসোর্স লোড করতে দেরি হওয়ার কারণে অথবা ট্যাগ ম্যানেজার পৃষ্ঠায় কন্টেন্ট ইনজেক্ট করার কারণে।

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) প্রধান থ্রেডে CPU প্রতিযোগিতার জন্য সংবেদনশীল এবং আমরা ট্যাগ ম্যানেজারের সাইজ ও খারাপ INP স্কোরের মধ্যে একটি সম্পর্ক দেখেছি।

সঠিক ট্যাগের ধরন বেছে নিন

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

মনে রাখবেন, আপনি কীভাবে ট্যাগ ব্যবহার করছেন তার উপর ট্যাগের পারফর্ম্যান্সের প্রভাব অনেকখানি নির্ভর করে। "পিক্সেল" অত্যন্ত পারফর্ম্যান্স-ভিত্তিক, কারণ এই ধরনের ট্যাগের প্রকৃতি কীভাবে ব্যবহার করা যেতে পারে তার উপর কঠোর বিধিনিষেধ আরোপ করে; কাস্টম HTML ট্যাগ সবসময় পারফর্ম্যান্সের জন্য খারাপ নাও হতে পারে, তবে ব্যবহারকারীদের যে মাত্রায় স্বাধীনতা দেয়, তার কারণে পারফর্ম্যান্সের জন্য খারাপ এমনভাবে অপব্যবহার করা সহজ হতে পারে।

ট্যাগের কথা ভাবার সময়, স্কেলের কথা মাথায় রাখুন: কোনও একটি ট্যাগের পারফর্ম্যান্সের প্রভাব নগণ্য হতে পারে—কিন্তু একই পৃষ্ঠায় দশ বা শত শত ট্যাগ ব্যবহার করা হলে তা উল্লেখযোগ্য হয়ে উঠতে পারে।

ট্যাগ ম্যানেজারের মাধ্যমে সব স্ক্রিপ্ট লোড করা উচিত নয়

ট্যাগ ম্যানেজার সাধারণত এমন রিসোর্স লোড করার জন্য সেরা উপায় নয় যা ব্যবহারকারীর অভিজ্ঞতার তাৎক্ষণিক ভিজ্যুয়াল বা ফাংশনাল দিকগুলি প্রয়োগ করে, যেমন কুকি বিজ্ঞপ্তি, অনেক বড় ছবি বা সাইটের ফিচার। এইসব রিসোর্স লোড করার জন্য ট্যাগ ম্যানেজার ব্যবহার করলে, সাধারণত সেগুলি ডেলিভার করতে দেরি হয়। এটি ব্যবহারকারীর অভিজ্ঞতাকে খারাপ করে এবং LCP ও CLS-এর মতো মেট্রিকও বাড়াতে পারে।

এছাড়াও, কিছু ব্যবহারকারী ট্যাগ ম্যানেজার ব্লক করেন। UX ফিচার প্রয়োগ করার জন্য ট্যাগ ম্যানেজার ব্যবহার করলে, আপনার কিছু ব্যবহারকারীর জন্য ওয়েবসাইটটি ভেঙে যেতে পারে।

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

কাস্টম HTML ট্যাগ ব্যবহার করার সময় সতর্ক থাকুন

কাস্টম HTML ট্যাগ বহু বছর ধরে ব্যবহার করা হচ্ছে এবং বেশিরভাগ সাইটে ব্যাপকভাবে ব্যবহৃত হয়। কাস্টম HTML ট্যাগ আপনাকে কিছু বিধিনিষেধ সহ নিজের কোড লিখতে দেয়, কারণ নাম যাই হোক না কেন, এই ট্যাগের মূল ব্যবহার হল পৃষ্ঠায় কাস্টম <script> এলিমেন্ট যোগ করা।

কাস্টম HTML ট্যাগ বিভিন্ন উপায়ে ব্যবহার করা যেতে পারে এবং পারফর্ম্যান্সের উপর এর প্রভাব উল্লেখযোগ্যভাবে পরিবর্তিত হয়। আপনার সাইটের পারফর্ম্যান্স পরিমাপ করার সময় মনে রাখবেন যে বেশিরভাগ টুল কাস্টম HTML ট্যাগের পারফর্ম্যান্সের প্রভাবকে ট্যাগ ম্যানেজারের সাথে অ্যাট্রিবিউট করে যা এটি ইনজেক্ট করেছে—ট্যাগটির সাথে নয়।

কাস্টম HTML ট্যাগ আশেপাশের পৃষ্ঠায় কোনও এলিমেন্ট যোগ করতে পারে। পৃষ্ঠায় এলিমেন্ট যোগ করার প্রক্রিয়া পারফর্ম্যান্স সংক্রান্ত সমস্যার কারণ হতে পারে এবং কিছু ক্ষেত্রে লেআউট শিফটেরও কারণ হতে পারে।

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

পরামর্শ: আপনি কোনও পৃষ্ঠায় দৃশ্যমান কন্টেন্ট যোগ বা পরিবর্তন করলে, মনে রাখবেন যে সার্চ ইঞ্জিনকে ব্যবহৃত জাভাস্ক্রিপ্ট ফেচ ও প্রসেস করতে পারতে হবে। Google-এর ক্ষেত্রে, আপনি Search-এর জন্য পৃষ্ঠা রেন্ডারিং যাচাই করতে পারবেন। অন্যান্য সার্চ ইঞ্জিনেও একই ধরনের টেস্টিং টুল উপলভ্য থাকতে পারে।

কাস্টম টেমপ্লেট ব্যবহার করুন

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

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

স্ক্রিপ্ট সঠিকভাবে ইনজেক্ট করুন

স্ক্রিপ্ট ইনজেক্ট করার জন্য ট্যাগ ম্যানেজার ব্যবহার করা একটি খুব সাধারণ ব্যবহারের উদাহরণ। এটি করার জন্য কাস্টম টেমপ্লেট এবং injectScript API ব্যবহার করার সাজেশন দেওয়া হয়।

আগে থেকে থাকা কাস্টম HTML ট্যাগ কনভার্ট করতে injectScript API ব্যবহার করার ব্যাপারে তথ্য পেতে, আগে থেকে থাকা ট্যাগ কনভার্ট করুন দেখুন।

আপনাকে কাস্টম HTML ট্যাগ ব্যবহার করতে হলে, মনে রাখবেন:

• লাইব্রেরি এবং বড় থার্ড-পার্টি স্ক্রিপ্টগুলি একটি স্ক্রিপ্ট ট্যাগের সাথে লোড করা উচিত (যেমন, <script src="external-scripts.js">) যা সরাসরি ট্যাগে স্ক্রিপ্টের কন্টেন্ট কপি-পেস্ট করার পরিবর্তে একটি এক্সটার্নাল ফাইল ডাউনলোড করে। যদিও <script> ট্যাগ ব্যবহার না করলে স্ক্রিপ্টের কন্টেন্ট ডাউনলোড করার জন্য আলাদা রাউন্ড-ট্রিপের প্রয়োজন হয় না, এই পদ্ধতি কন্টেনারের সাইজ বাড়িয়ে দেয় এবং ব্রাউজারকে আলাদাভাবে স্ক্রিপ্ট ক্যাশে করতে বাধা দেয়।
• অনেক ভেন্ডর তাদের <script> ট্যাগ <head>-এর সবচেয়ে উপরে প্লেস করার সাজেশন দেন। তবে, ট্যাগ ম্যানেজারের মাধ্যমে লোড করা স্ক্রিপ্টের ক্ষেত্রে, এটি প্রায়শই প্রয়োজন হয় না। বেশিরভাগ ক্ষেত্রে, ট্যাগ ম্যানেজার কার্যকর হওয়ার সময় ব্রাউজার ইতিমধ্যেই <head> পার্স করা শেষ করে ফেলেছে।

পিক্সেল ব্যবহার করুন

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

পিক্সেল হল সবচেয়ে কার্যকর ও সুরক্ষিত ধরনের ট্যাগ কারণ এটি ফায়ার হওয়ার পরে কোনও JavaScript এক্সিকিউশন হয় না। পিক্সেলের রিসোর্স সাইজ খুব ছোট হয় (১ কেবির কম) এবং এর ফলে লেআউট শিফ্ট হয় না।

আপনার থার্ড-পার্টি পরিষেবা প্রদানকারীর সাথে যোগাযোগ করে জেনে নিন যে তারা পিক্সেল সাপোর্ট করে কিনা। এছাড়াও, আপনি <noscript> ট্যাগের জন্য তাদের কোড পরীক্ষা করে দেখতে পারেন। কোনও ভেন্ডর পিক্সেল সাপোর্ট করলে, তারা প্রায়ই <noscript> ট্যাগের মধ্যে পিক্সেল অন্তর্ভুক্ত করে।

পিক্সেলের বিকল্প

পিক্সেল জনপ্রিয় হওয়ার প্রধান কারণ হল, এক সময় HTTP অনুরোধ করার জন্য এটি ছিল সবচেয়ে সস্তা ও নির্ভরযোগ্য উপায়, বিশেষত এমন পরিস্থিতিতে যেখানে সার্ভারের প্রতিক্রিয়া প্রাসঙ্গিক নয় ( যেমন, অ্যানালিটিক্স প্রদানকারীকে ডেটা পাঠানোর সময়)। navigator.sendBeacon() এবং fetch() keepalive API-গুলি এই একই ব্যবহারের ক্ষেত্রে সমাধান করার জন্য ডিজাইন করা হয়েছে তবে যুক্তিযুক্তভাবে পিক্সেলের চেয়ে বেশি নির্ভরযোগ্য।

মনে রাখবেন: ব্রাউজার পৃষ্ঠা আনলোড করার সময়ও sendBeacon() এবং fetch() keepalive API কাজ করে। যেমন, আউটবাউন্ড লিঙ্ক ক্লিক ট্র্যাক করতে এই দুটি API ব্যবহার করা যেতে পারে। এর বিপরীতে, পিক্সেল এবং XMLHttpRequest -এর মতো টেকনিক এইসব ক্ষেত্রে কাজ করবে না।

পিক্সেল ব্যবহার করা চালিয়ে গেলে কোনও সমস্যা নেই—এগুলি ভালভাবে কাজ করে এবং পারফর্ম্যান্সের উপর খুব কম প্রভাব ফেলে। তবে, আপনি নিজের বিকন তৈরি করলে, এইসব API-এর মধ্যে কোনও একটি ব্যবহার করার কথা বিবেচনা করা যেতে পারে।

sendBeacon()

navigator.sendBeacon() API-টি এমন পরিস্থিতিতে ওয়েব সার্ভারে অল্প পরিমাণ ডেটা পাঠানোর জন্য ডিজাইন করা হয়েছে যেখানে সার্ভারের রেসপন্স গুরুত্বপূর্ণ নয়।

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon()-এর API সীমিত: এটি শুধু POST অনুরোধ করতে পারে এবং কাস্টম হেডার সেট করতে পারে না। এটি সব আধুনিক ব্রাউজারে কাজ করে।

API keepalive ফেচ করুন

keepalive হল একটি ফ্ল্যাগ যা Fetch API-কে ইভেন্ট রিপোর্টিং এবং অ্যানালিটিক্সের মতো নন-ব্লকিং অনুরোধ করার জন্য ব্যবহার করার অনুমতি দেয়। fetch()-এ পাস করা প্যারামিটারে keepalive: true অন্তর্ভুক্ত করে এটি ব্যবহার করা হয়।

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

fetch() keepalive ও sendBeacon() যদি একই রকম মনে হয়, তাহলে বুঝতে হবে যে সেগুলি একই। আসলে, Chromium ব্রাউজারে, sendBeacon() এখন fetch() keepalive-এর উপর ভিত্তি করে তৈরি করা হয়েছে।

fetch() keepalive এবং sendBeacon()-এর মধ্যে বেছে নেওয়ার সময়, আপনার প্রয়োজনীয় ফিচার এবং ব্রাউজার সাপোর্ট বিবেচনা করা গুরুত্বপূর্ণ। fetch() API অনেক বেশি নমনীয়; তবে, sendBeacon()-এর তুলনায় keepalive-এর ব্রাউজার সাপোর্ট কম।

ট্যাগ কী কাজ করে তা বোঝা

থার্ড-পার্টি ভেন্ডরের দেওয়া নির্দেশিকা অনুসরণ করে প্রায়ই ট্যাগ তৈরি করা হয়। কোনও ভেন্ডরের কোড কী কাজ করে তা স্পষ্ট না হলে, যিনি জানেন তাকে জিজ্ঞাসা করার কথা বিবেচনা করুন। দ্বিতীয় মতামত নিলে, কোনও ট্যাগ পারফর্ম্যান্স বা নিরাপত্তা সংক্রান্ত সমস্যা তৈরি করতে পারে কিনা তা শনাক্ত করতে সাহায্য করে।

আমরা ট্যাগ ম্যানেজারে মালিকের সাথে ট্যাগ লেবেল করার সাজেশন দিই। ট্যাগের মালিক কে তা ভুলে যাওয়া সহজ, যার ফলে এটি কিছু ভেঙে দিলে তা সরিয়ে ফেলার ভয় থাকে!

ট্রিগার

উচ্চ-স্তরে, ট্যাগ ট্রিগার অপ্টিমাইজ করার মধ্যে সাধারণত প্রয়োজনের চেয়ে বেশি ট্যাগ ট্রিগার না করা এবং পারফর্ম্যান্স খরচের সাথে ব্যবসার প্রয়োজনীয়তার ভারসাম্য বজায় রাখে এমন ট্রিগার বেছে নেওয়া অন্তর্ভুক্ত।

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

উপযুক্ত ট্রিগার ইভেন্ট বেছে নিন

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

সব ট্যাগের জন্য উপযুক্ত ট্রিগার বেছে নেওয়া গুরুত্বপূর্ণ হলেও, যেসব ট্যাগ বড় রিসোর্স লোড করে বা দীর্ঘ স্ক্রিপ্ট এক্সিকিউট করে, সেগুলির জন্য এটি বিশেষভাবে গুরুত্বপূর্ণ।

ট্যাগ পৃষ্ঠা ভিউ (সাধারণত Page load, DOM Ready, Window Loaded-এ) বা কাস্টম ইভেন্টের ভিত্তিতে ট্রিগার করা যেতে পারে। পৃষ্ঠা লোড হওয়ার উপর প্রভাব এড়াতে, Window Loaded-এর পরে অপ্রয়োজনীয় ট্যাগ ফায়ার করুন।

কাস্টম ইভেন্ট ব্যবহার করুন

Google Tag Manager-এর বিল্ট-ইন ট্রিগার দ্বারা কভার করা হয় না এমন পৃষ্ঠা ইভেন্টের উত্তরে ট্রিগার ফায়ার করতে কাস্টম ইভেন্ট ব্যবহার করুন। যেমন, অনেক ট্যাগ পৃষ্ঠা দেখার ট্রিগার ব্যবহার করে। তবে, DOM Ready এবং Window Loaded-এর মধ্যে সময়ের ব্যবধান দীর্ঘ হতে পারে, তাই ট্যাগ ফায়ার করার সময় ফাইন-টিউন করা কঠিন হয়ে যায়। কাস্টম ইভেন্ট এই সমস্যার সমাধান হতে পারে।

প্রথমে, একটি কাস্টম ইভেন্ট ট্রিগার তৈরি করুন এবং এই ট্রিগার ব্যবহার করতে আপনার ট্যাগ আপডেট করুন।

ট্রিগার চালু করতে, ডেটা লেয়ারে সংশ্লিষ্ট ইভেন্ট পুশ করুন।

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

নির্দিষ্ট ট্রিগার শর্ত ব্যবহার করুন

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

ট্যাগ ফায়ারিং সীমিত করতে ট্রিগার শর্তে বিল্ট-ইন ভেরিয়েবেল যোগ করা যেতে পারে।

সতর্কতা: জটিল ট্রিগার শর্ত বা ব্যতিক্রম প্রসেস করতেও সময় লাগতে পারে। অনেক বেশি শর্ত এবং জটিল শর্ত এড়িয়ে চলুন।

উপযুক্ত সময়ে আপনার ট্যাগ ম্যানেজার লোড করুন

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

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

ভেরিয়েবল

পৃষ্ঠা থেকে ডেটা পড়তে ভেরিয়েবেল ব্যবহার করুন। ট্রিগার ও ট্যাগে এগুলি ব্যবহার করা হয়।

ট্রিগারের মতো, ভেরিয়েবল ট্যাগ ম্যানেজারে জাভাস্ক্রিপ্ট কোড যোগ করে এবং এর ফলে পারফর্ম্যান্স সংক্রান্ত সমস্যা হতে পারে। ভেরিয়েবল তুলনামূলকভাবে ছোট হতে পারে, যেমন URL, কুকি, ডেটা লেয়ার বা DOM-এর অংশ পড়ার কোড। এছাড়াও, এতে কাস্টম জাভাস্ক্রিপ্ট অন্তর্ভুক্ত থাকতে পারে যার সীমাহীন ক্ষমতা (এবং সাইজ) আছে।

ভেরিয়েবেলের ব্যবহার যতটা সম্ভব কম করুন, কারণ ট্যাগ ম্যানেজার ক্রমাগত সেগুলি মূল্যায়ন করে। ট্যাগ ম্যানেজার স্ক্রিপ্টের সাইজ এবং এটি যে প্রসেসিং টাইম ব্যবহার করে, দুটিই কমাতে আর ব্যবহার করা হয় না এমন পুরনো ভেরিয়েবেল সরিয়ে দিন।

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

ট্যাগগুলি দক্ষতার সাথে ব্যবহার করলে পারফর্ম্যান্স সংক্রান্ত সমস্যার ঝুঁকি কমে যায়।

ডেটা লেয়ার ব্যবহার করুন

ডেটা লেয়ার হল অবজেক্টের জাভাস্ক্রিপ্ট অ্যারে যাতে পৃষ্ঠা সম্পর্কে তথ্য থাকে। Google Tag Manager-এ আপনি যেসব তথ্য পাঠাতে চান, এই অবজেক্টে সেগুলি থাকে।

ট্যাগ ট্রিগার করার জন্যও ডেটা লেয়ার ব্যবহার করা যেতে পারে।

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

যদিও Google Tag Manager ডেটা লেয়ার ছাড়াই ব্যবহার করা যেতে পারে, তবে এটি ব্যবহার করার জন্য বিশেষভাবে সাজেস্ট করা হয়। ডেটা লেয়ার, থার্ড-পার্টি স্ক্রিপ্টের মাধ্যমে অ্যাক্সেস করা যায় এমন ডেটা একটি জায়গায় একত্রিত করে, যার ফলে এর ব্যবহার আরও ভালোভাবে দেখা যায়। অন্যান্য বিষয়ের মধ্যে, এটি অপ্রয়োজনীয় ভেরিয়েবল গণনা ও স্ক্রিপ্ট এক্সিকিউশন কমাতে সাহায্য করতে পারে।

ডেটা লেয়ার ব্যবহার করে, আপনি ট্যাগ দ্বারা অ্যাক্সেস করা ডেটা নিয়ন্ত্রণ করতে পারেন, সম্পূর্ণ জাভাস্ক্রিপ্ট ভেরিয়েবল বা DOM অ্যাক্সেস দেওয়ার পরিবর্তে।

ডেটা লেয়ারের পারফর্ম্যান্সের সুবিধাগুলি স্বজ্ঞাত নাও হতে পারে, কারণ ডেটা লেয়ার আপডেট করার ফলে Google Tag Manager সমস্ত কন্টেনার ভেরিয়েবল পুনরায় মূল্যায়ন করে এবং সম্ভাব্য ট্রিগার ট্যাগগুলি, যার জন্য জাভাস্ক্রিপ্ট এক্সিকিউশন প্রয়োজন। ডেটা লেয়ারের অপব্যবহার করা সম্ভব হলেও, সাধারণত, ডেটা লেয়ার পারফর্ম্যান্স সংক্রান্ত সমস্যার উৎস বলে মনে হলে, কন্টেনারে নিজেই পারফর্ম্যান্স সংক্রান্ত সমস্যা থাকতে পারে। ডেটা লেয়ারের মাধ্যমে এইসব সমস্যা আরও স্পষ্টভাবে বোঝা যায়।

ডুপ্লিকেট ও অব্যবহৃত ট্যাগ সরিয়ে দিন

ট্যাগ ম্যানেজারের মাধ্যমে ট্যাগ ইনজেক্ট করার পাশাপাশি কোনও পৃষ্ঠার HTML মার্কআপে ট্যাগ অন্তর্ভুক্ত করা হলে ডুপ্লিকেট ট্যাগ তৈরি হতে পারে।

অব্যবহৃত ট্যাগ পজ বা সরিয়ে দেওয়া উচিত, ট্রিগার ব্যতিক্রম ব্যবহার করে ব্লক করা উচিত নয়। কোনও ট্যাগ পজ করলে বা সরিয়ে দিলে কন্টেনার থেকে কোড সরিয়ে দেওয়া হয়; ব্লক করলে তা হয় না।

অব্যবহৃত ট্যাগ সরিয়ে দেওয়ার পরে, ট্রিগার ও ভেরিয়েবল পর্যালোচনা করে দেখুন যে সেগুলিও সরিয়ে দেওয়া যাবে কিনা।

পজ করা ট্যাগ কন্টেনারের সাইজকে প্রভাবিত করে, তবে ট্যাগ অ্যাক্টিভ থাকার সময়ের তুলনায় মোট পেলোড কম হয়।

অনুমতি ও প্রত্যাখ্যানের তালিকা ব্যবহার করা

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

ডেটা লেয়ারের মাধ্যমে অনুমতি দেওয়া ও ব্লক করা তালিকার কনফিগারেশন করা হয়।

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

যেমন, আপনি কাস্টম HTML ট্যাগ, জাভাস্ক্রিপ্ট ভেরিয়েবল বা সরাসরি DOM অ্যাক্সেস ব্যবহার করা আটকাতে পারেন। এর অর্থ হল, ডেটা লেয়ার থেকে পাওয়া ডেটার সাথে শুধু পিক্সেল ও আগে থেকে নির্ধারিত ট্যাগ ব্যবহার করা যাবে। এটি সীমাবদ্ধ হলেও, এর ফলে আরও বেশি পারফর্ম্যান্স ও সুরক্ষিত ট্যাগ ম্যানেজার প্রয়োগ করা সম্ভব হয়।

সার্ভার-সাইড ট্যাগিং ব্যবহার করার কথা বিবেচনা করুন

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

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

মনে রাখবেন যে সার্ভার-সাইড ট্যাগিং শুধুমাত্র কিছু ট্যাগের সাথে কাজ করে। ট্যাগ কম্প্যাটিবিলিটি ভেন্ডরের উপর নির্ভর করে আলাদা আলাদা হয়।

আরও তথ্যের জন্য, সার্ভার-সাইড ট্যাগিংয়ের ভূমিকা দেখুন।

কন্টেনার

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

প্রতি পৃষ্ঠায় শুধুমাত্র একটি কন্টেনার ব্যবহার করুন

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

একাধিক কন্টেনার কার্যকরভাবে ব্যবহার করা বিরল। তবে, কিছু ক্ষেত্রে এটি কাজ করতে পারে, যদি ভালভাবে নিয়ন্ত্রণ করা হয়। যেমন:

• একটি বড় কন্টেনারের পরিবর্তে, একটি হালকা "আগে লোড হওয়া" কন্টেনার এবং একটি ভারী "পরে লোড হওয়া" কন্টেনার সহ।
• কম প্রযুক্তিগত ব্যবহারকারীদের জন্য একটি সীমাবদ্ধ কন্টেনার এবং আরও জটিল ট্যাগের জন্য একটি কম সীমাবদ্ধ, কিন্তু আরও শক্তভাবে নিয়ন্ত্রিত কন্টেনার ব্যবহার করা।

আপনাকে পৃষ্ঠা প্রতি একাধিক কন্টেনার ব্যবহার করতে হলে, একাধিক কন্টেনার সেট-আপ করার জন্য Google Tag Manager-এর নির্দেশিকা অনুসরণ করুন।

প্রয়োজন হলে আলাদা কন্টেনার ব্যবহার করুন

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

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

একটি কন্টেনার খুব বেশি ব্যবহার করলে, ট্যাগ ও ট্রিগার ম্যানেজ করার জন্য জটিল লজিক প্রয়োগ করতে হয়। এর ফলে কন্টেনারের জটিলতা ও সাইজ বেড়ে যায়।

কন্টেনারের সাইজের উপর নজর রাখুন

কন্টেনারের সাইজ তার ট্যাগ, ট্রিগার ও ভেরিয়েবল দ্বারা নির্ধারিত হয়। ছোট কন্টেনার পৃষ্ঠার পারফর্ম্যান্সে নেতিবাচক প্রভাব ফেলতে পারে, তবে বড় কন্টেনার নিশ্চিতভাবেই তা করবে।

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

Google Tag Manager কন্টেনারের সাইজ ৩০০ কেবিতে সীমিত করে এবং কন্টেনারের সাইজ, সাইজ সীমার ৭০% এ পৌঁছানোর পরে কন্টেনারের সাইজ সম্পর্কে সতর্ক করে।

বেশিরভাগ সাইটের লক্ষ্য হওয়া উচিত তাদের কন্টেনারকে সীমার থেকে ছোট রাখা। তুলনা করার জন্য, মিডিয়ান সাইট কন্টেনারের সাইজ প্রায় ৫০ কেবি। Google Tag Manager লাইব্রেরি নিজে থেকে প্রায় ৩৩ কেবি কম্প্রেস করে।

আপনার কন্টেনার ভার্সনের নাম দিন

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

ট্যাগ ওয়ার্কফ্লো

আপনার ট্যাগে করা পরিবর্তন ম্যানেজ করা গুরুত্বপূর্ণ যাতে সেগুলি পৃষ্ঠার পারফর্ম্যান্সের উপর নেতিবাচক প্রভাব না ফেলে।

ডিপ্লয় করার আগে টেস্ট করা

ডিপ্লয়মেন্টের আগে আপনার ট্যাগ পরীক্ষা করে নিন যাতে সমস্যা, পারফর্ম্যান্স এবং অন্যান্য বিষয় শিপ করার আগেই ধরা পড়ে।

ট্যাগ পরীক্ষা করার সময় যেসব বিষয় বিবেচনা করতে হবে তার মধ্যে রয়েছে:

• ট্যাগটি কি সঠিকভাবে কাজ করছে?
• ট্যাগের কারণে কি লেআউটে কোনও পরিবর্তন হয়?
• ট্যাগ কি কোনও রিসোর্স লোড করে? এইসব রিসোর্স কত বড়?
• ট্যাগটি কি দীর্ঘ সময় ধরে চলা স্ক্রিপ্ট ট্রিগার করে?

প্রিভিউ মোড

প্রিভিউ মোড আপনাকে সর্বজনীনভাবে প্রকাশ করার আগেই আপনার আসল সাইটে ট্যাগ পরিবর্তন পরীক্ষা করতে দেয়। প্রিভিউ মোডে একটি ডিবাগিং কনসোল অন্তর্ভুক্ত থাকে যা ট্যাগ সম্পর্কে তথ্য প্রদান করে।

Google Tag Manager-এর এক্সিকিউশন টাইম আলাদা (সামান্য ধীর) যখন প্রিভিউ মোডে চালানো হয় তখন ডিবাগিং কনসোলে তথ্য প্রকাশ করার জন্য প্রয়োজনীয় অতিরিক্ত ওভারহেডের কারণে। তাই, প্রিভিউ মোডে সংগ্রহ করা Web Vitals পরিমাপের সাথে প্রোডাকশনে সংগ্রহ করা পরিমাপের তুলনা করার সাজেশন দেওয়া হয় না। তবে, এই অমিল ট্যাগের এক্সিকিউশন আচরণকে প্রভাবিত করবে না।

স্ট্যান্ডঅ্যালোন টেস্টিং

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

ট্যাগের পারফর্ম্যান্স মনিটর করা

Google Tag Manager Monitoring API ব্যবহার করে কোনও নির্দিষ্ট ট্যাগের এক্সিকিউশন টাইম সম্পর্কে তথ্য সংগ্রহ করা যেতে পারে। আপনার বেছে নেওয়া এন্ডপয়েন্টে এই তথ্য রিপোর্ট করা হয়।

আরও তথ্যের জন্য, কীভাবে Google Tag Manager Monitor তৈরি করবেন তা দেখুন।

কন্টেনার পরিবর্তনের জন্য অনুমোদন প্রয়োজন

ফার্স্ট-পার্টি কোড সাধারণত ডিপ্লয় করার আগে পর্যালোচনা ও পরীক্ষা করা হয়। আপনার ট্যাগ একই রকমভাবে ব্যবহার করুন।

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

ট্যাগের ব্যবহার পর্যায়ক্রমে অডিট করুন

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

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

ট্যাগ অডিট করার সময়, ট্রিগার ও ভেরিয়েবল পরিষ্কার করতে ভুলবেন না। এগুলি প্রায়শই পারফর্ম্যান্স সংক্রান্ত সমস্যার কারণও হতে পারে।

আরও তথ্যের জন্য, থার্ড-পার্টি স্ক্রিপ্ট নিয়ন্ত্রণে রাখা নিবন্ধটি দেখুন।