تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
هذا المستند مخصّص للمطوّرين الذين يريدون قياس مشاهدات الصفحة على
تطبيق الصفحة الواحدة باستخدام "إحصاءات Google".
تطبيقات الصفحة الواحدة
(SPA) هي مواقع إلكترونية تحمّل مستند HTML مرة واحدة وتسترجع أي محتوى إضافي
باستخدام واجهات برمجة تطبيقات JavaScript.
مثال: لنفترض أنّ لديك نموذجًا للحصول على بعض العملاء المحتملين. يتضمّن النموذج ثلاث
شاشات:
الشاشة الأولى لتسجيل معلومات العميل
شاشة ثانية يشير فيها العملاء إلى اهتمامهم بخدمات معيّنة
صفحة الشاشة الثالثة للاشتراك في ندوات على الويب ذات صلة باهتمامات العميل
إنّ مفتاح قياس مشاهدات الصفحة من التطبيقات المُنشِئة للصفحات على الويب بشكلٍ صحيح هو احتساب مشاهدات الصفحة لكل شاشة يتفاعل معها المستخدِم وتحديد مُحيل الصفحة بشكلٍ صحيح، حتى تتمكّن من تتبُّع رحلة المستخدِم بشكلٍ صحيح.
قبل البدء
تفترض هذه الصفحة أنّ لديك ما يلي:
حساب وموقع على "إحصاءات Google 4" لموقعك الإلكتروني تعرَّف على كيفية
إعداد "إحصاءات Google".
علامة تتبُّع من Google تم تنفيذها على موقعك الإلكتروني ويتم تنشيطها عند تحميل الصفحة في البداية. تعرَّف على كيفية إعداد علامة Google.
تنفيذ قياس التطبيقات من صفحة واحدة
لتنفيذ قياس دقيق لطلبات البحث المجانية، استخدِم إحدى الطريقتَين أدناه لتسجيل
مشاهدة جديدة لصفحة ويب افتراضية:
تغييرات سجلّ المتصفّح (إجراء يُنصح به): إذا كان تطبيقك المتعدّد الصفحات يستخدم واجهة برمجة التطبيقات للسجلّ (History
API)، وعلى وجه التحديد
طريقة pushState() وreplaceState() لتعديل الشاشات، استخدِم
هذا الخيار.
الأحداث المخصّصة: إذا كان موقعك الإلكتروني يستخدم العنصر DocumentFragment
لعرض شاشات مختلفة، استخدِم هذا الخيار.
التحقّق من إعدادات القياس
للتأكّد من أنّ تطبيق الصفحة الواحدة يقيس مشاهدات الصفحة بشكل صحيح:
فعِّل وضع تصحيح الأخطاء لكل علامة في إعداد قياس تجربة المستخدم على الصفحة. تعرَّف على كيفية
مراقبة الأحداث في
DebugView.
انتقِل من خلال تطبيقك المكوّن من صفحة واحدة. عند النقر على شاشة افتراضية
جديدة، من المفترض أن يظهر لك حدث page_view جديد في DebugView. قارِن بين مَعلمات حدث
page_view وحدث page_view السابق للتحقّق مما إذا تم تعديل مُحيل الصفحة وموقعها الجغرافي بشكل صحيح.
تاريخ التعديل الأخير: 2025-04-29 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-04-29 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThis guide helps developers track page views within single-page applications using Google Analytics 4.\u003c/p\u003e\n"],["\u003cp\u003eAccurate tracking involves counting views for each screen a user interacts with and ensuring correct referral data for user journey analysis.\u003c/p\u003e\n"],["\u003cp\u003eImplementation relies on leveraging browser history changes or custom events to trigger virtual page views for different screens within the application.\u003c/p\u003e\n"],["\u003cp\u003eBefore starting, ensure you have a Google Analytics 4 account and a Google tag implemented on your website.\u003c/p\u003e\n"],["\u003cp\u003eVerification involves enabling debug mode and confirming that new \u003ccode\u003epage_view\u003c/code\u003e events are triggered with updated page referrer and location data upon screen transitions.\u003c/p\u003e\n"]]],["Developers using Google Analytics to measure page views on single-page applications (SPAs) should count page views for each user-interacted screen and accurately track the page referrer. To implement this, they can trigger virtual page views via browser history changes using the History API's `pushState()` and `replaceState()` methods, or through custom events with the `DocumentFragment` object. After implementation, debug mode should be enabled to verify new `page_view` events for each virtual screen, ensuring referrer and location data updates correctly.\n"],null,["# Measure single-page applications\n\n\u003e This document is for developers who want to measure page views on their\n\u003e single-page application using Google Analytics.\n\n[Single-page applications](//developer.mozilla.org/en-US/docs/Glossary/SPA)\n(SPA) are websites that load an HTML document once and fetch any additional\ncontent using JavaScript APIs.\n\u003e Example: Suppose you have a form to acquire some leads. The form has three\n\u003e screens:\n\u003e\n\u003e - First screen to capture the customer information.\n\u003e - Second screen where customers indicate interest in certain services.\n\u003e - Third screen page to sign up for webinars related to the customer's interests.\n\nThe key to measuring page views from SPAs correctly is to count page views for\neach screen a user interacts with and get the page [referrer](//developer.%0Amozilla.org/en-US/docs/Web/API/Document/referrer) right, so you can correctly\ntrace the user journey.\n\nBefore you begin\n----------------\n\nThis page assumes that you already have:\n\n- A Google Analytics 4 account and property for your website. Learn how to\n [Set up Google\n Analytics](//support.google.com/analytics/answer/9304153).\n\n- A Google tag implemented on your website that fires when the page initially\n loads. Learn how to [Set up the Google\n tag](/analytics/devguides/collection/ga4/tag-options).\n\nImplement single-page application measurement\n---------------------------------------------\n\nTo implement accurate SPA measurement, use one of these methods to trigger a new\nvirtual page view:\n\n- Browser history changes (recommended): If your SPA uses the [History\n API](//developer.mozilla.org/en-US/docs/Web/API/History), specifically\n the `pushState()` and `replaceState()` method to update screens, use this\n option.\n\n- Custom events: If your website uses the [`DocumentFragment`](//developer.mozilla.org/en-US/docs/Web/API/DocumentFragment)\n object to render different screens, use this option.\n\nBrowser history implementation Custom event implementation\n\n\u003cbr /\u003e\n\nVerify your measurement setup\n-----------------------------\n\nTo verify your single-page application measures page views correctly:\n\n1. Enable debug mode for every tag in your SPA measurement setup. Learn how to\n [Monitor events in\n DebugView](//support.google.com/analytics/answer/7201382).\n\n2. Click through your single-page application. When you click to a new virtual\n screen, you should see a new `page_view` event in DebugView. Compare the\n `page_view` event parameters with the preceding `page_view` event to check\n if the page referrer and page location have been updated correctly."]]
