কীভাবে আপনার সাইটের অফলাইন ব্যবহার ট্র্যাক করবেন যাতে আপনি একটি কেস করতে পারেন কেন আপনার সাইটের একটি ভাল অফলাইন অভিজ্ঞতা প্রয়োজন৷
এই নিবন্ধটি আপনাকে দেখায় যে কীভাবে আপনার সাইটের অফলাইন ব্যবহার ট্র্যাক করতে হয়, কেন আপনার সাইটের একটি ভাল অফলাইন মোড প্রয়োজন তার জন্য একটি কেস তৈরি করতে সহায়তা করে৷ এটি অফলাইন ব্যবহার বিশ্লেষণ প্রয়োগ করার সময় এড়াতে অসুবিধা এবং সমস্যাগুলি ব্যাখ্যা করে৷
অনলাইন এবং অফলাইন ব্রাউজার ইভেন্টের ক্ষতি
অফলাইন ব্যবহার ট্র্যাক করার সুস্পষ্ট সমাধান হল online এবং offline ইভেন্টগুলির জন্য ইভেন্ট শ্রোতা তৈরি করা (যা অনেক ব্রাউজার সমর্থন করে ) এবং সেই শ্রোতাদের মধ্যে আপনার বিশ্লেষণ ট্র্যাকিং যুক্তি স্থাপন করা৷ দুর্ভাগ্যক্রমে, এই পদ্ধতির সাথে বেশ কয়েকটি সমস্যা এবং সীমাবদ্ধতা রয়েছে:
- সাধারণভাবে ট্র্যাকিং প্রতিটি নেটওয়ার্ক সংযোগ স্থিতি ইভেন্ট অত্যধিক হতে পারে, এবং একটি গোপনীয়তা-কেন্দ্রিক বিশ্বে প্রতি-উৎপাদনশীল যেখানে যতটা সম্ভব কম ডেটা সংগ্রহ করা উচিত। অতিরিক্তভাবে
onlineএবংofflineইভেন্টগুলি নেটওয়ার্ক ক্ষতির মাত্র এক বিভক্ত সেকেন্ডের জন্য ফায়ার করতে পারে, যা একজন ব্যবহারকারী সম্ভবত দেখতে বা লক্ষ্যও করবেন না। - অফলাইন কার্যকলাপের অ্যানালিটিক্স ট্র্যাকিং কখনই অ্যানালিটিক্স সার্ভারে পৌঁছাবে না কারণ ব্যবহারকারী… ভাল, অফলাইন৷
- একজন ব্যবহারকারী অফলাইনে গেলে স্থানীয়ভাবে একটি টাইমস্ট্যাম্প ট্র্যাক করা এবং ব্যবহারকারী যখন অনলাইনে ফিরে যায় তখন অ্যানালিটিক্স সার্ভারে অফলাইন ক্রিয়াকলাপ প্রেরণ করা ব্যবহারকারীর আপনার সাইটে পুনরায় দেখার উপর নির্ভর করে৷ যদি ব্যবহারকারী অফলাইন মোডের অভাবের কারণে আপনার সাইটটি বন্ধ করে দেয় এবং কখনই পুনরায় দেখা না করে, আপনার কাছে এটি ট্র্যাক করার কোন উপায় নেই। অফলাইন ড্রপ-অফগুলি ট্র্যাক করার ক্ষমতা হল একটি কেস তৈরি করার জন্য গুরুত্বপূর্ণ ডেটা কেন আপনার সাইটের একটি ভাল অফলাইন মোড প্রয়োজন৷
-
onlineইভেন্টটি খুব নির্ভরযোগ্য নয় কারণ এটি কেবল নেটওয়ার্ক অ্যাক্সেস সম্পর্কে জানে , ইন্টারনেট অ্যাক্সেস নয়। তাই একজন ব্যবহারকারী এখনও অফলাইনে থাকতে পারে এবং ট্র্যাকিং পিং পাঠানো এখনও ব্যর্থ হতে পারে। - এমনকি যদি ব্যবহারকারী অফলাইনে থাকা অবস্থায়ও বর্তমান পৃষ্ঠায় থাকেন, অন্য কোনো বিশ্লেষণী ইভেন্ট (যেমন স্ক্রোল ইভেন্ট, ক্লিক ইত্যাদি) ট্র্যাক করা হয় না, যা হতে পারে আরও প্রাসঙ্গিক এবং দরকারী তথ্য।
- নিজে অফলাইন হওয়াও সাধারণভাবে খুব বেশি অর্থবহ নয়। একজন ওয়েবসাইট ডেভেলপার হিসেবে কী ধরনের সম্পদ লোড করতে ব্যর্থ হয়েছে তা জানা আরও গুরুত্বপূর্ণ হতে পারে। এটি বিশেষ করে এসপিএ-র প্রসঙ্গে প্রাসঙ্গিক, যেখানে একটি বাদ দেওয়া নেটওয়ার্ক সংযোগ একটি ব্রাউজার অফলাইন ত্রুটি পৃষ্ঠার দিকে নিয়ে যেতে পারে না (যা ব্যবহারকারীরা বোঝে) তবে পৃষ্ঠার র্যান্ডম গতিশীল অংশগুলি নীরবে ব্যর্থ হওয়ার সম্ভাবনা বেশি৷
আপনি এখনও অফলাইন ব্যবহারের প্রাথমিক বোঝার জন্য এই সমাধানটি ব্যবহার করতে পারেন, তবে অনেকগুলি ত্রুটি এবং সীমাবদ্ধতাগুলি সাবধানে বিবেচনা করা দরকার।
একটি ভাল পদ্ধতি: পরিষেবা কর্মী
অফলাইন মোড সক্ষম করে এমন সমাধান অফলাইন ব্যবহার ট্র্যাক করার জন্য আরও ভাল সমাধান হতে দেখা যায়। মূল ধারণা হল ব্যবহারকারী যতক্ষণ পর্যন্ত অফলাইনে থাকে ততক্ষণ বিশ্লেষণী পিংগুলিকে IndexedDB-তে সংরক্ষণ করা এবং ব্যবহারকারী আবার অনলাইনে গেলে সেগুলিকে আবার পাঠান৷ Google Analytics-এর জন্য এটি ইতিমধ্যেই একটি ওয়ার্কবক্স মডিউলের মাধ্যমে অফ-দ্য-শেল্ফ উপলব্ধ, তবে মনে রাখবেন যে চার ঘণ্টার বেশি পিছিয়ে পাঠানো হিটগুলি প্রক্রিয়া নাও হতে পারে৷ এর সহজতম আকারে, এটি একটি ওয়ার্কবক্স-ভিত্তিক পরিষেবা কর্মীর মধ্যে এই দুটি লাইনের সাথে সক্রিয় করা যেতে পারে:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
এটি অফলাইনে থাকাকালীন সমস্ত বিদ্যমান ইভেন্ট এবং পেজভিউ পিংগুলিকে ট্র্যাক করে, কিন্তু আপনি জানেন না যে সেগুলি অফলাইনে ঘটেছে (যেমন সেগুলি যেমন আছে তেমনই রিপ্লে করা হয়েছে)৷ এর জন্য আপনি একটি কাস্টম ডাইমেনশন ব্যবহার করে অ্যানালিটিক্স পিং-এ একটি offline পতাকা যোগ করে ওয়ার্কবক্সের সাহায্যে ট্র্যাকিং অনুরোধগুলি পরিচালনা করতে পারেন ( নীচের কোড নমুনায় cd1 ):
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize({
parameterOverrides: {
cd1: 'offline',
},
});
ইন্টারনেট সংযোগ ফিরে আসার আগে যদি ব্যবহারকারী অফলাইন থাকার কারণে পৃষ্ঠা থেকে বাদ পড়েন তাহলে কী হবে? যদিও এটি সাধারণত পরিষেবা কর্মীকে ঘুমাতে দেয় (কারণ সংযোগটি ফিরে আসার পরে এটি ডেটা পাঠাতে অক্ষম), ওয়ার্কবক্স গুগল অ্যানালিটিক্স মডিউল ব্যাকগ্রাউন্ড সিঙ্ক এপিআই ব্যবহার করে, যা পরে সংযোগ ফিরে এলে বিশ্লেষণ ডেটা পাঠায়, এমনকি যদি ব্যবহারকারী ট্যাব বা ব্রাউজার বন্ধ করে দেয়।
এখনও একটি ত্রুটি রয়েছে: যদিও এটি বিদ্যমান ট্র্যাকিংকে অফলাইন-সক্ষম করে তোলে, আপনি সম্ভবত একটি মৌলিক অফলাইন মোড প্রয়োগ না করা পর্যন্ত খুব বেশি প্রাসঙ্গিক ডেটা দেখতে পাবেন না। সংযোগ বিচ্ছিন্ন হয়ে গেলে ব্যবহারকারীরা এখনও আপনার সাইটটি দ্রুত ছেড়ে দেবে। কিন্তু এখন আপনি আপনার নিয়মিত ব্যবহারকারীদের সাথে অফলাইন মাত্রা প্রয়োগের সাথে ব্যবহারকারীদের জন্য গড় সেশনের দৈর্ঘ্য এবং ব্যবহারকারীর ব্যস্ততার তুলনা করে অন্তত এটি পরিমাপ এবং পরিমাপ করতে পারেন।
SPA এবং অলস লোডিং
মাল্টি-পেজ ওয়েবসাইট হিসেবে নির্মিত কোনো পৃষ্ঠা দেখার ব্যবহারকারীরা যদি অফলাইনে যান এবং নেভিগেট করার চেষ্টা করেন, তাহলে ব্রাউজারের ডিফল্ট অফলাইন পৃষ্ঠা দেখা যায়, যা ব্যবহারকারীদের বুঝতে সাহায্য করে কী ঘটছে। যাইহোক, একক-পৃষ্ঠা অ্যাপ্লিকেশন হিসাবে নির্মিত পৃষ্ঠাগুলি ভিন্নভাবে কাজ করে। ব্যবহারকারী একই পৃষ্ঠায় থাকে, এবং নতুন বিষয়বস্তু AJAX-এর মাধ্যমে কোনো ব্রাউজার নেভিগেশন ছাড়াই গতিশীলভাবে লোড হয়। অফলাইনে যাওয়ার সময় ব্যবহারকারীরা ব্রাউজার ত্রুটি পৃষ্ঠাটি দেখতে পান না। পরিবর্তে, পৃষ্ঠার গতিশীল অংশগুলি ত্রুটি সহ রেন্ডার করে, অনির্ধারিত অবস্থায় চলে যায় বা গতিশীল হওয়া বন্ধ করে।
অলস লোডিংয়ের কারণে বহু-পৃষ্ঠার ওয়েবসাইটের মধ্যে একই ধরনের প্রভাব ঘটতে পারে। উদাহরণস্বরূপ, হয়তো প্রাথমিক লোড অনলাইনে ঘটেছে, কিন্তু ব্যবহারকারী স্ক্রল করার আগে অফলাইনে চলে গেছে। ভাঁজের নীচে সমস্ত অলস লোড করা সামগ্রী নীরবে ব্যর্থ হবে এবং অনুপস্থিত হবে।
যেহেতু এই কেসগুলি ব্যবহারকারীদের জন্য সত্যিই বিরক্তিকর, তাই তাদের ট্র্যাক করা বোধগম্য। পরিষেবা কর্মীরা নেটওয়ার্ক ত্রুটিগুলি ধরার জন্য নিখুঁত জায়গা, এবং অবশেষে বিশ্লেষণ ব্যবহার করে তাদের ট্র্যাক করে৷ ওয়ার্কবক্সের সাথে, একটি গ্লোবাল ক্যাচ হ্যান্ডলারকে একটি বার্তা ইভেন্ট পাঠিয়ে ব্যর্থ অনুরোধ সম্পর্কে পৃষ্ঠাকে অবহিত করতে কনফিগার করা যেতে পারে:
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-এ ব্যর্থ রিসোর্স লোডগুলিকে ট্র্যাক করবে, যেখানে সেগুলি রিপোর্টিংয়ের মাধ্যমে বিশ্লেষণ করা যেতে পারে। প্রাপ্ত অন্তর্দৃষ্টি পরিষেবা কর্মী ক্যাশিং এবং সাধারণভাবে ত্রুটি পরিচালনার উন্নতি করতে ব্যবহার করা যেতে পারে, অস্থির নেটওয়ার্ক অবস্থার অধীনে পৃষ্ঠাটিকে আরও শক্তিশালী এবং নির্ভরযোগ্য করে তুলতে।
পরবর্তী পদক্ষেপ
এই নিবন্ধটি তাদের সুবিধা এবং ত্রুটিগুলির সাথে অফলাইন ব্যবহার ট্র্যাক করার বিভিন্ন উপায় দেখিয়েছে৷ যদিও এটি আপনার কতজন ব্যবহারকারী অফলাইনে যান এবং এর কারণে সমস্যায় পড়েন তা পরিমাপ করতে সাহায্য করতে পারে, এটি এখনও একটি শুরু। যতক্ষণ না আপনার ওয়েবসাইট একটি সু-নির্মিত অফলাইন মোড অফার না করে, আপনি স্পষ্টতই বিশ্লেষণে খুব বেশি অফলাইন ব্যবহার দেখতে পাবেন না।
আমরা পূর্ণ ট্র্যাকিং করার পরামর্শ দিই, এবং তারপরে ট্র্যাকিং নম্বরগুলির উপর নজর রেখে পুনরাবৃত্তিতে আপনার অফলাইন ক্ষমতাগুলি প্রসারিত করুন৷ প্রথমে একটি সাধারণ অফলাইন ত্রুটি পৃষ্ঠা দিয়ে শুরু করুন- ওয়ার্কবক্সের সাথে এটি করা তুচ্ছ -এবং যেভাবেই হোক কাস্টম 404 পৃষ্ঠাগুলির মতো একটি UX সেরা অনুশীলন হিসাবে বিবেচনা করা উচিত। তারপরে আরও উন্নত অফলাইন ফলব্যাকগুলির দিকে এবং অবশেষে বাস্তব অফলাইন সামগ্রীর দিকে আপনার পথে কাজ করুন৷ নিশ্চিত করুন যে আপনি বিজ্ঞাপন দিয়েছেন এবং আপনার ব্যবহারকারীদের কাছে এটি ভালভাবে ব্যাখ্যা করেছেন এবং আপনি ক্রমবর্ধমান ব্যবহার দেখতে পাবেন। সর্বোপরি, প্রত্যেকে একবারে একবার অফলাইনে যায়।
কিভাবে মেট্রিক্স রিপোর্ট করতে হয় এবং একটি পারফরম্যান্স সংস্কৃতি তৈরি করতে হয় এবং ক্রস-ফাংশনাল স্টেকহোল্ডারদের আপনার ওয়েবসাইটে আরও বিনিয়োগ করার জন্য প্ররোচিত করার টিপসের জন্য ক্রস-কার্যকরীভাবে ওয়েবসাইটের গতি ঠিক করা হয় তা দেখুন। যদিও এই পোস্টগুলি কর্মক্ষমতার উপর দৃষ্টি নিবদ্ধ করা হয়, তবে সেগুলি আপনাকে স্টেকহোল্ডারদের কীভাবে জড়িত করা যায় সে সম্পর্কে সাধারণ ধারণা পেতে সহায়তা করবে।
আনস্প্ল্যাশে জেসি গেলিডনের হিরো ছবি।