আপনার সাইটের অফলাইন ব্যবহার কীভাবে ট্র্যাক করবেন যাতে আপনার সাইটের জন্য আরও ভাল অফলাইন অভিজ্ঞতা কেন প্রয়োজন তা আপনি বুঝতে পারেন।
আপনার সাইটের অফলাইন ব্যবহার কীভাবে ট্র্যাক করবেন তা জানুন, যাতে আপনি বুঝতে পারেন কেন আপনার সাইটের আরও ভালো অফলাইন মোড প্রয়োজন। অফলাইন ব্যবহার সংক্রান্ত অ্যানালিটিক্স প্রয়োগ করার সময় কোন কোন সমস্যা এড়িয়ে চলতে হবে তা বুঝুন।
অনলাইন ও অফলাইন ব্রাউজার ইভেন্টের ত্রুটি
অফলাইন ব্যবহার ট্র্যাক করার সবচেয়ে সহজ উপায় হল
online এবং
offline
ইভেন্টের (যা অনেক ব্রাউজার সাপোর্ট করে) জন্য ইভেন্ট লিসনার তৈরি করা
এবং সেইসব লিসনারে আপনার অ্যানালিটিক্স ট্র্যাকিং লজিক যোগ করা। তবে,
এই পদ্ধতিতে বেশ কিছু সমস্যা ও সীমাবদ্ধতা রয়েছে:
- সাধারণত, প্রতিটি নেটওয়ার্ক কানেকশন স্ট্যাটাস ইভেন্ট ট্র্যাক করা অতিরিক্ত হতে পারে,
এবং গোপনীয়তা-কেন্দ্রিক বিশ্বে এটি বিপরীত-উৎপাদনশীল যেখানে যতটা সম্ভব কম ডেটা
সংগ্রহ করা উচিত। এছাড়াও,
onlineএবংofflineইভেন্ট নেটওয়ার্কের সংযোগ এক সেকেন্ডের জন্য বিচ্ছিন্ন হলেও ফায়ার হতে পারে, যা ব্যবহারকারী হয়ত দেখতে বা লক্ষ্য করতে পারবেন না। - অফলাইন অ্যাক্টিভিটির অ্যানালিটিক্স ট্র্যাকিং অ্যানালিটিক্স সার্ভারে পৌঁছায় না।
- ব্যবহারকারী অফলাইন হয়ে গেলে স্থানীয়ভাবে টাইমস্ট্যাম্প ট্র্যাক করা এবং ব্যবহারকারী আবার অনলাইন হলে অফলাইন অ্যাক্টিভিটি অ্যানালিটিক্স সার্ভারে পাঠানো, ব্যবহারকারী আপনার সাইটে আবার ভিজিট করছেন কিনা তার উপর নির্ভর করে। অফলাইন মোড না থাকার কারণে ব্যবহারকারী আপনার সাইট থেকে বেরিয়ে গেলে এবং আর কখনও ফিরে না এলে, আপনি তা ট্র্যাক করতে পারবেন না। অফলাইন ড্রপ-অফ ট্র্যাক করার ক্ষমতা হল আপনার সাইটের কেন আরও ভাল অফলাইন মোড প্রয়োজন সে সম্পর্কে একটি কেস তৈরি করার জন্য গুরুত্বপূর্ণ ডেটা।
onlineইভেন্টটি খুব একটা নির্ভরযোগ্য নয় কারণ এটি শুধুমাত্র নেটওয়ার্ক অ্যাক্সেস সম্পর্কে জানে, ইন্টারনেট অ্যাক্সেস সম্পর্কে নয়। তাই, ব্যবহারকারী অফলাইনে থাকতে পারেন এবং ট্র্যাকিং পিং পাঠানো ব্যর্থ হতে পারে।- এমনকি ব্যবহারকারী অফলাইন থাকাকালীন বর্তমান পৃষ্ঠায় থাকলেও, অন্যান্য কোনও অ্যানালিটিক্স ইভেন্ট (যেমন, স্ক্রল ইভেন্ট, ক্লিক ইত্যাদি) ট্র্যাক করা হয় না, যা আরও প্রাসঙ্গিক ও উপযোগী তথ্য হতে পারে।
- শুধু অফলাইন হওয়াটা খুব একটা অর্থপূর্ণ নয়। কোন রিসোর্স লোড করা যায়নি তা জানা সবচেয়ে গুরুত্বপূর্ণ। এটি বিশেষ করে সিঙ্গল-পেজ অ্যাপ্লিকেশনের (SPA) ক্ষেত্রে প্রাসঙ্গিক, যেখানে নেটওয়ার্ক কানেকশন ড্রপ করলে, ব্রাউজার অফলাইন হয়ে যাওয়ার কারণে সমস্যা সংক্রান্ত পেজ নাও দেখাতে পারে, যা ব্যবহারকারীরা বুঝতে পারেন। পরিবর্তে, এটি সম্ভবত পৃষ্ঠার এলোমেলো, ডাইনামিক অংশগুলিকে নিঃশব্দে ব্যর্থ করে দেয়।
অফলাইন ব্যবহার সম্পর্কে প্রাথমিক ধারণা পেতে আপনি এখনও এই সমাধান ব্যবহার করতে পারেন, তবে অনেক ত্রুটি এবং সীমাবদ্ধতা সাবধানে বিবেচনা করা প্রয়োজন।
আরও ভাল পদ্ধতি: সার্ভিস ওয়ার্কার
যে সমাধান অফলাইন মোড চালু করে, সেটি অফলাইন ব্যবহার ট্র্যাক করার জন্যও একটি ভালো সমাধান। ব্যবহারকারী যতক্ষণ অফলাইন থাকবেন ততক্ষণ আপনি IndexedDB-তে অ্যানালিটিক্স পিং স্টোর করতে পারবেন এবং ব্যবহারকারী আবার অনলাইন হলে সেগুলি আবার পাঠাতে পারবেন। Google Analytics-এর জন্য, এটি আগে থেকেই Workbox মডিউলে উপলভ্য, তবে মনে রাখবেন যে চার ঘণ্টার বেশি সময় পরে পাঠানো হিট প্রসেস নাও করা হতে পারে।
সবচেয়ে সহজ উপায়ে, এটি Workbox-ভিত্তিক সার্ভিস ওয়ার্কারের মধ্যে এই দুটি লাইনের মাধ্যমে অ্যাক্টিভেট করা যেতে পারে:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
এটি অফলাইনে থাকাকালীন সব বিদ্যমান ইভেন্ট এবং পৃষ্ঠা দেখার পিং ট্র্যাক করে, তবে আপনি
জানতে পারবেন না যে সেগুলি অফলাইনে ঘটেছে, কারণ সেগুলি যেমন আছে তেমনই আবার চালানো হয়। আপনি
কাস্টম ডাইমেনশন ব্যবহার করে অ্যানালিটিক্স পিং-এ একটি offline ফ্ল্যাগ যোগ করে
Workbox-এর মাধ্যমে ট্র্যাকিং অনুরোধ ম্যানিপুলেট করতে পারেন:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize({
parameterOverrides: {
customDimension1: 'offline',
},
});
ইন্টারনেট কানেকশন ফিরে আসার আগে, অফলাইন থাকার কারণে ব্যবহারকারী পৃষ্ঠা থেকে বেরিয়ে গেলে কী হবে? যদিও এটি সাধারণত সার্ভিস ওয়ার্কারকে স্লিপ মোডে রাখে, কারণ কানেকশন ফিরে এলে এটি ডেটা পাঠাতে পারে না, Workbox Google Analytics মডিউল Background Sync API ব্যবহার করে। ব্যবহারকারী ট্যাব বা ব্রাউজার বন্ধ করে দিলেও, কানেকশন ফিরে এলে ব্যাকগ্রাউন্ড সিঙ্ক অ্যানালিটিক্স ডেটা পাঠায়।
তবে এখনও একটি সমস্যা আছে: এটি আগে থেকে থাকা ট্র্যাকিংকে অফলাইনে কাজ করার উপযুক্ত করে তুললেও, আপনি যতক্ষণ না একটি বেসিক অফলাইন মোড প্রয়োগ করছেন, ততক্ষণ পর্যন্ত আপনি খুব বেশি প্রাসঙ্গিক ডেটা দেখতে পাবেন না। কানেকশন বিচ্ছিন্ন হয়ে গেলে, ব্যবহারকারীরা এখনও আপনার সাইট থেকে দ্রুত বেরিয়ে যাবেন। তবে এখন আপনি অন্তত এটি পরিমাপ ও পরিমাণ নির্ধারণ করতে পারবেন। অফলাইন ডাইমেনশন প্রয়োগ করা ব্যবহারকারীদের গড় সেশনের দৈর্ঘ্য ও ব্যবহারকারীর এনগেজমেন্টের সাথে আপনার নিয়মিত ব্যবহারকারীদের তুলনা করে এটি করা যাবে।
SPA এবং ধীরে ধীরে লোড করা
মাল্টি-পেজ ওয়েবসাইট হিসেবে তৈরি করা কোনও পৃষ্ঠায় ভিজিট করা ব্যবহারকারী অফলাইন হয়ে গেলে এবং নেভিগেট করার চেষ্টা করলে, ব্রাউজারের ডিফল্ট অফলাইন পৃষ্ঠা দেখানো হয়, যা ব্যবহারকারীকে কী ঘটছে তা বুঝতে সাহায্য করে। তবে, সিঙ্গল-পেজ অ্যাপ্লিকেশন হিসেবে তৈরি করা পৃষ্ঠা অন্যভাবে কাজ করে। ব্যবহারকারী একই পৃষ্ঠায় থাকেন এবং কোনও ব্রাউজার নেভিগেশন ছাড়াই AJAX-এর মাধ্যমে ডায়নামিক উপায়ে নতুন কন্টেন্ট লোড করা হয়। অফলাইন হয়ে গেলে ব্যবহারকারীরা ব্রাউজার সমস্যা সংক্রান্ত পেজ দেখতে পান না। পরিবর্তে, পৃষ্ঠার ডায়নামিক অংশগুলি ত্রুটি সহ রেন্ডার হয়, অনির্ধারিত অবস্থায় চলে যায় বা ডায়নামিক হওয়া বন্ধ করে দেয়।
ধীরে ধীরে লোড হওয়ার কারণে মাল্টি-পেজ ওয়েবসাইটেও একই ধরনের প্রভাব পড়তে পারে। যেমন, হয়ত প্রাথমিক লোড অনলাইনে হয়েছে, কিন্তু ব্যবহারকারী স্ক্রল করার আগেই অফলাইন হয়ে গেছেন। স্ক্রল না করে দেখা যায় না এমন জায়গায় ধীরে ধীরে লোড হওয়া সব কন্টেন্ট কোনও বিজ্ঞপ্তি ছাড়াই লোড হবে না এবং দেখা যাবে না।
এই ধরনের ঘটনা ব্যবহারকারীদের কাছে সত্যিই বিরক্তিকর, তাই এগুলি ট্র্যাক করা যুক্তিযুক্ত। নেটওয়ার্কের সমস্যা ধরার জন্য সার্ভিস ওয়ার্কার হল সবচেয়ে উপযুক্ত জায়গা এবং শেষ পর্যন্ত অ্যানালিটিক্স ব্যবহার করে সেগুলি ট্র্যাক করা যায়। Workbox-এর মাধ্যমে, একটি গ্লোবাল ক্যাচ হ্যান্ডলার কনফিগার করা যেতে পারে যাতে একটি মেসেজ ইভেন্ট পাঠিয়ে ব্যর্থ অনুরোধ সম্পর্কে পৃষ্ঠাটিকে জানানো যায়:
import { setCatchHandler } from 'workbox-routing';
setCatchHandler(({ event }) => {
// https://developer.mozilla.org/docs/Web/API/Client/postMessage
event.waitUntil(async function () {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return;
// Get the client.
const client = await clients.get(event.clientId);
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return;
// Send a message to the client.
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: event.request.destination
});
return Response.error();
}());
});
ব্যর্থ হওয়া সব অনুরোধের কথা শোনার পরিবর্তে, আরেকটি উপায় হল শুধুমাত্র নির্দিষ্ট রুটে
সমস্যা ধরা। যেমন, আমরা যদি শুধু /products/*-এর রুটে হওয়া সমস্যার বিষয়ে অভিযোগ জানাতে চাই, তাহলে setCatchHandler-এ একটি চেক যোগ করতে পারি যা
রেগুলার এক্সপ্রেশনের মাধ্যমে URI ফিল্টার করে।
কাস্টম হ্যান্ডলারের সাথে registerRoute প্রয়োগ করা হল আরও ভাল সমাধান। এটি
বিজনেস লজিককে একটি আলাদা রুটে এনক্যাপসুলেট করে, আরও জটিল সার্ভিস ওয়ার্কারদের ক্ষেত্রে আরও ভাল
রক্ষণাবেক্ষণযোগ্যতা সহ:
import { registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';
const networkOnly = new NetworkOnly();
registerRoute(
new RegExp('https:\/\/example\.com\/products\/.+'),
async (params) => {
try {
// Attempt a network request.
return await networkOnly.handle(params);
} catch (error) {
// If it fails, report the error.
const event = params.event;
if (!event.clientId) return;
const client = await clients.get(event.clientId);
if (!client) return;
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: "products"
});
return Response.error();
}
}
);
চূড়ান্ত ধাপ হিসেবে, পৃষ্ঠাকে message ইভেন্ট শুনতে হবে এবং অ্যানালিটিক্স পিং পাঠাতে হবে।
আবার, পরিষেবা কর্মীর মধ্যে অফলাইনে হওয়া অ্যানালিটিক্স অনুরোধ বাফার করতে ভুলবেন না। আগে
যেমন বলা হয়েছে, বিল্ট-ইন Google Analytics-এর জন্য workbox-google-analytics প্লাগ-ইন ইনিশিয়ালাইজ করুন।
নিম্নলিখিত উদাহরণে Google Analytics ব্যবহার করা হয়েছে, তবে অন্যান্য অ্যানালিটিক্স ভেন্ডরের ক্ষেত্রেও একই পদ্ধতি প্রয়োগ করা যেতে পারে।
if ("serviceWorker" in navigator) {
// ... SW registration here
// track offline error events
navigator.serviceWorker.addEventListener("message", event => {
if (gtag && event.data && event.data.action === "network_fail") {
gtag("event", "network_fail", {
event_category: event.data.destination,
// event_label: event.data.url,
// value: event.data.value
});
}
});
}
এটি Google Analytics-এ লোড না হওয়া রিসোর্স ট্র্যাক করবে, যেখানে রিপোর্টিং-এর মাধ্যমে সেগুলি বিশ্লেষণ করা যাবে। অস্থির নেটওয়ার্ক পরিস্থিতিতে পৃষ্ঠা আরও শক্তিশালী ও নির্ভরযোগ্য করে তুলতে, সার্ভিস ওয়ার্কার ক্যাশিং ও সাধারণভাবে ত্রুটি ম্যানেজমেন্ট উন্নত করতে, প্রাপ্ত ইনসাইট ব্যবহার করা যেতে পারে।
পরবর্তী ধাপ
আপনি অফলাইন ব্যবহার ট্র্যাক করার বিভিন্ন পদ্ধতি এবং সেগুলির সুবিধা ও অসুবিধা সম্পর্কে জেনেছেন। আপনার কতজন ব্যবহারকারী অফলাইন হয়ে যান এবং এর ফলে সমস্যার সম্মুখীন হন তা পরিমাপ করতে এটি সাহায্য করতে পারে, তবে এটি এখনও শুরু মাত্র। আপনার ওয়েবসাইট যতক্ষণ না পর্যন্ত একটি ভালভাবে তৈরি অফলাইন মোড অফার করছে, ততক্ষণ আপনি অবশ্যই অ্যানালিটিক্সে অফলাইন ব্যবহার বেশি দেখতে পাবেন না।
আমরা সম্পূর্ণ ট্র্যাকিং সেট-আপ করার এবং তারপরে ট্র্যাকিংয়ের উপর ফোকাস করে আপনার অফলাইন ক্ষমতা ইটারেশনে বাড়ানোর সাজেশন দিই। অফলাইন সমস্যা সংক্রান্ত পেজ দিয়ে শুরু করুন। Workbox-এর সাহায্যে তৈরি করা খুবই সহজ এবং এটি কাস্টম ৪০৪ পৃষ্ঠার মতো UX-এর পেশাদার পদ্ধতি। তারপর, আরও উন্নত অফলাইন ফলব্যাক এবং শেষ পর্যন্ত আসল অফলাইন কন্টেন্টের দিকে কাজ করুন। আপনি বিজ্ঞাপন দিচ্ছেন এবং আপনার ব্যবহারকারীদের কাছে এটি ভালভাবে ব্যাখ্যা করছেন কিনা তা নিশ্চিত করুন এবং আপনি ক্রমবর্ধমান ব্যবহার দেখতে পাবেন। সবশেষে, প্রত্যেকেই মাঝে মাঝে অফলাইন হয়ে যায়।
আপনার ওয়েবসাইটে আরও বিনিয়োগ করার জন্য ক্রস-ফাংশনাল স্টেকহোল্ডারদের রাজি করানোর ব্যাপারে পরামর্শ পেতে, কীভাবে মেট্রিক রিপোর্ট করতে হয় এবং পারফর্ম্যান্স কালচার তৈরি করতে হয় এবং ক্রস-ফাংশনালভাবে ওয়েবসাইটের স্পিড সংক্রান্ত সমস্যার সমাধান করা দেখুন। যদিও সেইসব পোস্ট পারফর্ম্যান্সের উপর ফোকাস করে, তবুও সেগুলি আপনাকে স্টেকহোল্ডারদের সাথে কীভাবে এনগেজ করতে হবে সেই সম্পর্কে সাধারণ ধারণা পেতে সাহায্য করবে।