এই ডকুমেন্টটি সেইসব ডেভেলপারদের জন্য, যারা গুগল অ্যানালিটিক্স ব্যবহার করে তাদের সিঙ্গেল-পেজ অ্যাপ্লিকেশনের পেজ ভিউ পরিমাপ করতে চান।
সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA) হলো এমন ওয়েবসাইট যা একবার একটি HTML ডকুমেন্ট লোড করে এবং জাভাস্ক্রিপ্ট এপিআই (API) ব্যবহার করে যেকোনো অতিরিক্ত কন্টেন্ট সংগ্রহ করে।
উদাহরণ: ধরুন, আপনার কাছে কিছু লিড সংগ্রহ করার জন্য একটি ফর্ম আছে। ফর্মটিতে তিনটি স্ক্রিন রয়েছে: > * প্রথম স্ক্রিনটি গ্রাহকের তথ্য সংগ্রহের জন্য। * দ্বিতীয় স্ক্রিন যেখানে গ্রাহকরা নির্দিষ্ট পরিষেবাগুলিতে তাদের আগ্রহ জানান। * তৃতীয় স্ক্রিনটি গ্রাহকের আগ্রহ সম্পর্কিত ওয়েবিনারে সাইন আপ করার জন্য।
এসপিএ (SPA) থেকে পেজ ভিউ সঠিকভাবে পরিমাপ করার মূল চাবিকাঠি হলো, ব্যবহারকারী যে প্রতিটি স্ক্রিনের সাথে ইন্টারঅ্যাক্ট করে তার পেজ ভিউ গণনা করা এবং পেজ রেফারারটি সঠিকভাবে বের করা, যাতে আপনি ব্যবহারকারীর যাত্রাপথ সঠিকভাবে অনুসরণ করতে পারেন।
শুরু করার আগে
এই পৃষ্ঠাটি ধরে নেয় যে আপনার কাছে ইতিমধ্যেই নিম্নলিখিত বিষয়গুলো রয়েছে:
আপনার ওয়েবসাইটের জন্য একটি গুগল অ্যানালিটিক্স অ্যাকাউন্ট ও প্রপার্টি। গুগল অ্যানালিটিক্স কীভাবে সেট আপ করতে হয় তা জানুন।
আপনার ওয়েবসাইটে প্রয়োগ করা একটি গুগল ট্যাগ, যা পেজটি প্রথমবার লোড হওয়ার সময় সক্রিয় হয়। গুগল ট্যাগ কীভাবে সেট আপ করতে হয় তা জানুন।
একক পৃষ্ঠার অ্যাপ্লিকেশন পরিমাপ বাস্তবায়ন করুন
সঠিক SPA পরিমাপ বাস্তবায়ন করতে, একটি নতুন ভার্চুয়াল পেজ ভিউ চালু করার জন্য এই পদ্ধতিগুলোর মধ্যে একটি ব্যবহার করুন:
ব্রাউজার হিস্ট্রি পরিবর্তন (প্রস্তাবিত): যদি আপনার SPA, হিস্ট্রি API ব্যবহার করে, বিশেষত স্ক্রিন আপডেট করার জন্য
pushState()এবংreplaceState()মেথড ব্যবহার করে, তাহলে এই অপশনটি ব্যবহার করুন।কাস্টম ইভেন্ট: আপনার ওয়েবসাইট যদি বিভিন্ন স্ক্রিন রেন্ডার করার জন্য
DocumentFragmentঅবজেক্ট ব্যবহার করে, তাহলে এই অপশনটি ব্যবহার করুন।
ব্রাউজার ইতিহাস পরিবর্তন বাস্তবায়ন
আপনার SPA যদি হিস্ট্রি এপিআই (History API) ব্যবহার করে, তাহলে আপনি ব্রাউজার হিস্ট্রি ইভেন্টের উপর ভিত্তি করে পেজ ভিউ স্বয়ংক্রিয়ভাবে ট্র্যাক করতে গুগল অ্যানালিটিক্সে উন্নত পরিমাপ (enhanced measurement) সক্রিয় করতে পারেন।
গুগল অ্যানালিটিক্সে উন্নত পরিমাপ সক্ষম করুন
ব্রাউজার হিস্টোরির উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে page_views পরিমাপ করতে:
গুগল অ্যানালিটিক্স খুলুন
অ্যাডমিন- এ, ডেটা সংগ্রহ ও পরিবর্তন-এর অধীনে, ডেটা স্ট্রিমস > ওয়েব-এ ক্লিক করুন ।
উন্নত পরিমাপ (Enhanced measurement)- এর অধীনে, সমস্ত বিকল্প চালু করতে সুইচটি অন (On) করুন।
স্বতন্ত্র অপশনগুলো সম্পাদনা করতে ক্লিক করুন। ‘পেজ ভিউ’-এর অধীনে, ‘উন্নত সেটিংস দেখান’-এ ক্লিক করুন। ‘ব্রাউজার হিস্ট্রি ইভেন্টের উপর ভিত্তি করে পেজ লোড’ এবং ‘পেজ পরিবর্তন’ উভয়ই চালু করতে ভুলবেন না।
পরিবর্তনগুলো সংরক্ষণ করুন ।
আপনার পরিমাপ ব্যবস্থা যাচাই করুন
আপনার একক-পৃষ্ঠার অ্যাপ্লিকেশনটি সঠিকভাবে পৃষ্ঠা দেখার পরিমাপ করছে কিনা তা যাচাই করতে:
আপনার SPA পরিমাপ সেটআপের প্রতিটি ট্যাগের জন্য ডিবাগ মোড সক্রিয় করুন। DebugView-তে কীভাবে ইভেন্ট মনিটর করতে হয় তা জানুন।
আপনার একক-পৃষ্ঠার অ্যাপ্লিকেশনটিতে ক্লিক করে যান। যখন আপনি একটি নতুন ভার্চুয়াল স্ক্রিনে ক্লিক করবেন, তখন আপনি DebugView-তে একটি নতুন
page_viewইভেন্ট দেখতে পাবেন। পেজ রেফারার এবং পেজ লোকেশন সঠিকভাবে আপডেট হয়েছে কিনা তা পরীক্ষা করতে, পূর্ববর্তীpage_viewইভেন্টের প্যারামিটারগুলোর সাথে এইpage_viewপ্যারামিটারগুলো তুলনা করুন।
এসপিএ-এর জন্য অতিরিক্ত বিবেচ্য বিষয়সমূহ
page_view ইভেন্ট পাঠানোর পাশাপাশি, গুগল অ্যানালিটিক্সের সাথে একটি শক্তিশালী SPA ইন্টিগ্রেশন এবং উন্নত ব্যবহারকারী অভিজ্ঞতার জন্য এই অতিরিক্ত দিকগুলো বিবেচনা করুন:
স্ক্রোল অবস্থান পরিচালনা করুন
যখন ব্যবহারকারীরা একটি SPA-তে বিভিন্ন ভিউয়ের মধ্যে নেভিগেট করেন, তখন ব্রাউজার সাধারণত বর্তমান স্ক্রল পজিশনটি ধরে রাখে। এর ফলে ব্যবহারকারীরা নতুন ভার্চুয়াল পেজটির শীর্ষভাগ দেখতে পান না এবং এটি স্ক্রল ডেপথ ট্র্যাকিংকে প্রভাবিত করতে পারে।
সুপারিশ: প্রতিটি ভার্চুয়াল পেজ ট্রানজিশনের পর প্রোগ্রাম্যাটিকভাবে স্ক্রল পজিশনটিকে পেজের শীর্ষে বা মূল কন্টেন্ট কন্টেইনারে রিসেট করুন।
// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);
// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);
এই পরিবর্তনের ফলে, ব্যবহারকারীরা নতুন কন্টেন্টের একেবারে শুরু থেকে দেখা শুরু করবেন, যা গুগল অ্যানালিটিক্স স্ক্রল ট্র্যাকিংকে নতুন ভার্চুয়াল পেজটিতে এনগেজমেন্ট নির্ভুলভাবে পরিমাপ করতে সাহায্য করবে।
ব্রাউজার বৈশিষ্ট্যগুলির জন্য বিষয়বস্তুর অ্যাক্সেসযোগ্যতা নিশ্চিত করুন
যদি ব্যবহারকারীরা ভার্চুয়াল পেজ লোডের পরে অন-পেজ সার্চ (Ctrl+F)-এর মতো ব্রাউজার ফিচার কাজ না করার বিষয়ে অভিযোগ করেন, তবে এটি আপনার SPA কীভাবে DOM আপডেট করে সে সম্পর্কে ইঙ্গিত দিতে পারে।
সুপারিশ: নিশ্চিত করুন যে আপনার SPA ফ্রেমওয়ার্ক এবং রাউটিং লজিক নতুন পেজের কন্টেন্ট দিয়ে DOM-এর প্রাসঙ্গিক অংশগুলো সম্পূর্ণরূপে এবং সিনক্রোনাসভাবে আপডেট করে। বিলম্বিত রেন্ডারিং বা মূল DOM ট্রি থেকে লুকানো কন্টেন্ট ব্রাউজারের সার্চ ফাংশন দ্বারা তাৎক্ষণিকভাবে ইনডেক্সযোগ্য নাও হতে পারে। কন্টেন্টের অ্যাক্সেসিবিলিটি নিশ্চিত করতে ভার্চুয়াল নেভিগেশনের পরে অন-পেজ সার্চ পরীক্ষা করুন।
স্বয়ংক্রিয় ইভেন্টগুলির উপর প্রভাব
আপনি যদি আপনার এসপিএ-তে ভার্চুয়াল পেজ ভিউ পরিমাপ সঠিকভাবে প্রয়োগ করেন, তাহলে গুগল অ্যানালিটিক্স অন্যান্য স্বয়ংক্রিয় ইভেন্টগুলোও যথাযথভাবে পরিচালনা করবে। যদি স্ক্রিন পরিবর্তনের জন্য ভার্চুয়াল পেজ ভিউ রেকর্ড করা না হয়, তাহলে গুগল অ্যানালিটিক্স এসপিএ-টিকে একটি একক পেজ হিসেবে গণ্য করে, যার ফলে মেট্রিক্সে বিকৃতি ঘটে।
উদাহরণস্বরূপ, user_engagement ইভেন্টটি পরিমাপ করে যে একজন ব্যবহারকারী একটি পেজে সক্রিয়ভাবে কতক্ষণ সময় ব্যয় করেন। ভার্চুয়াল পেজ ভিউ ছাড়া, সমস্ত এনগেজমেন্ট টাইম প্রাথমিক পেজ লোডের সাথে যুক্ত করা হয়, যার ফলে স্বতন্ত্র স্ক্রিনে ব্যয় করা সময় বিশ্লেষণ করা অসম্ভব হয়ে পড়ে।
যখন ভার্চুয়াল পেজ ভিউ পরিমাপ সঠিকভাবে প্রয়োগ করা হয়:
- যখন ব্যবহারকারী একটি ভার্চুয়াল পৃষ্ঠা থেকে অন্যটিতে যান, তখন
user_engagementইভেন্টটি পাঠানো হয়। - পূর্ববর্তী ভার্চুয়াল পেজের এনগেজমেন্ট টাইম গণনা করা হয় এবং
user_engagementইভেন্টের সাথে পাঠানো হয়, সাধারণত নতুন ভার্চুয়াল পেজেরpage_viewইভেন্টটি প্রসেস হওয়ার ঠিক আগে। - অন্যান্য ইভেন্ট, যেমন ক্লিক বা স্ক্রল, ব্যবহারকারী বর্তমানে যে ভার্চুয়াল পেজটি দেখছেন তার
page_locationএর সাথে সম্পর্কিত।
এর মাধ্যমে আপনি আপনার SPA-এর অন্তর্ভুক্ত প্রতিটি স্ক্রিন বা সেকশনের জন্য ব্যবহারকারীর সম্পৃক্ততা এবং অন্যান্য মেট্রিক বিশ্লেষণ করতে পারবেন, যা ব্যবহারকারীর যাত্রাপথ সম্পর্কে আরও সঠিক ধারণা দেয়।