این سند برای توسعهدهندگانی است که میخواهند بازدید صفحات را در برنامه تک صفحهای خود با استفاده از Google Analytics اندازهگیری کنند.
برنامههای تک صفحهای (SPA) وبسایتهایی هستند که یک بار سند HTML را بارگذاری میکنند و هر محتوای اضافی را با استفاده از APIهای جاوا اسکریپت دریافت میکنند.
مثال: فرض کنید فرمی برای جذب تعدادی سرنخ دارید. این فرم سه صفحه دارد: > * صفحه اول برای ثبت اطلاعات مشتری. * صفحه دوم که در آن مشتریان علاقه خود را به خدمات خاصی نشان میدهند. * صفحه سوم برای ثبت نام در وبینارهای مرتبط با علایق مشتری.
کلید اندازهگیری صحیح بازدید صفحات از SPAها، شمارش بازدیدهای صفحه برای هر صفحهای است که کاربر با آن تعامل دارد و تعیین صحیح ارجاعدهنده صفحه، تا بتوانید مسیر کاربر را به درستی ردیابی کنید.
قبل از اینکه شروع کنی
این صفحه فرض میکند که شما از قبل موارد زیر را دارید:
یک حساب کاربری و دارایی گوگل آنالیتیکس برای وبسایت شما. یاد بگیرید که چگونه گوگل آنالیتیکس را راهاندازی کنید .
یک تگ گوگل که در وبسایت شما پیادهسازی شده و هنگام بارگذاری اولیه صفحه فعال میشود. نحوه تنظیم تگ گوگل را بیاموزید.
پیادهسازی سنجش برنامههای تکصفحهای
برای پیادهسازی اندازهگیری دقیق SPA، از یکی از این روشها برای ایجاد یک نمای صفحه مجازی جدید استفاده کنید:
تغییرات تاریخچه مرورگر (توصیه میشود): اگر SPA شما از API تاریخچه ، به ویژه متدهای
pushState()وreplaceState()برای بهروزرسانی صفحات استفاده میکند، از این گزینه استفاده کنید.رویدادهای سفارشی: اگر وبسایت شما از شیء
DocumentFragmentبرای رندر صفحات مختلف استفاده میکند، از این گزینه استفاده کنید.
پیادهسازی تغییر تاریخچه مرورگر
اگر SPA شما از History API استفاده میکند، میتوانید اندازهگیری پیشرفته را در Google Analytics فعال کنید تا بهطور خودکار بازدیدهای صفحه را بر اساس رویدادهای تاریخچه مرورگر ردیابی کند.
فعال کردن اندازهگیری پیشرفته در گوگل آنالیتیکس
برای اندازهگیری خودکار page_views بر اساس تاریخچه مرورگر:
گوگل آنالیتیکس را باز کنید
در بخش مدیریت ، در بخش جمعآوری و اصلاح دادهها ، روی جریانهای داده > وب کلیک کنید .
در قسمت اندازهگیری پیشرفته ، کلید روشن (On) را بلغزانید تا همه گزینهها فعال شوند.
برای ویرایش گزینههای تکی کلیک کنید. در قسمت بازدیدهای صفحه ، روی نمایش تنظیمات پیشرفته کلیک کنید. مطمئن شوید که هم بارگذاری صفحه و هم تغییرات صفحه بر اساس رویدادهای تاریخچه مرورگر فعال هستند.
تغییرات را ذخیره کنید .
تنظیمات اندازهگیری خود را تأیید کنید
برای تأیید صحت اندازهگیری بازدید صفحات توسط برنامه تکصفحهای خود:
حالت اشکالزدایی را برای هر تگ در تنظیمات اندازهگیری SPA خود فعال کنید. یاد بگیرید که چگونه رویدادها را در DebugView نظارت کنید .
روی برنامه تک صفحهای خود کلیک کنید. وقتی روی یک صفحه مجازی جدید کلیک میکنید، باید یک رویداد
page_viewجدید در DebugView ببینید. پارامترهای رویدادpage_viewرا با رویدادpage_viewقبلی مقایسه کنید تا بررسی کنید که آیا ارجاعدهنده صفحه و مکان صفحه به درستی بهروزرسانی شدهاند یا خیر.
ملاحظات اضافی برای SPA ها
علاوه بر ارسال رویدادهای page_view ، این جنبههای اضافی را برای ادغام قوی SPA با Google Analytics و تجربه کاربری بهتر در نظر بگیرید:
مدیریت موقعیت اسکرول
وقتی کاربران در یک 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 اصلی ممکن است بلافاصله توسط تابع جستجوی مرورگر قابل فهرستبندی نباشد. جستجوی درون صفحه را پس از پیمایشهای مجازی آزمایش کنید تا از دسترسی به محتوا اطمینان حاصل کنید.
تأثیر بر رویدادهای خودکار
اگر به درستی اندازهگیری بازدید مجازی از صفحه را در SPA خود پیادهسازی کنید، گوگل آنالیتیکس سایر رویدادهای خودکار را به طور مناسب مدیریت خواهد کرد. اگر بازدیدهای مجازی از صفحه برای تغییرات صفحه ثبت نشوند، گوگل آنالیتیکس با SPA به عنوان یک صفحه واحد رفتار میکند و منجر به معیارهای نامتوازن میشود.
برای مثال، رویداد user_engagement زمانی را که یک کاربر به طور فعال در یک صفحه صرف میکند، اندازهگیری میکند. بدون بازدیدهای مجازی از صفحه، تمام زمان تعامل به بارگذاری اولیه صفحه نسبت داده میشود و تجزیه و تحلیل زمان صرف شده در صفحات جداگانه را غیرممکن میسازد.
وقتی اندازهگیری بازدید مجازی از صفحه به درستی اجرا شود:
- رویداد
user_engagementزمانی ارسال میشود که کاربر از یک صفحه مجازی به صفحه مجازی دیگر میرود. - زمان تعامل برای صفحه مجازی قبلی محاسبه و همراه با رویداد
user_engagementارسال میشود، معمولاً درست قبل از اینکه رویدادpage_viewبرای صفحه مجازی جدید پردازش شود. - رویدادهای دیگر، مانند کلیکها یا اسکرولها، با
page_locationصفحه مجازی که کاربر در حال حاضر مشاهده میکند، مرتبط هستند.
این به شما امکان میدهد تا میزان تعامل کاربر و سایر معیارها را برای صفحات یا بخشهای مختلف در SPA خود تجزیه و تحلیل کنید و درک دقیقتری از سفر کاربر ارائه دهید.