هذه المقالة مخصّصة للمطوّرين الذين يريدون قياس مشاهدات الصفحة على تطبيقهم من صفحة واحدة باستخدام "إحصاءات Google".
تطبيقات الصفحة الواحدة (SPA) هي مواقع إلكترونية تحمِّل مستند HTML مرة واحدة وتجلب أي محتوى إضافي باستخدام واجهات برمجة تطبيقات JavaScript.
مثال: لنفترض أنّ لديك نموذجًا لاكتساب بعض العملاء المحتملين. يتضمّن النموذج ثلاث شاشات:
- الشاشة الأولى لجمع معلومات العميل
- الشاشة الثانية التي يشير فيها العملاء إلى اهتمامهم بخدمات معيّنة
- صفحة الشاشة الثالثة للاشتراك في ندوات على الويب ذات صلة باهتمامات العميل
قبل البدء
تفترض هذه الصفحة أنّ لديك ما يلي:
حسابًا وموقعًا على "إحصاءات Google" لموقعك الإلكتروني تعرّف على كيفية إعداد "إحصاءات Google".
علامة تتبُّع من Google مثبَّتة على موقعك الإلكتروني يتم تنشيطها عند تحميل الصفحة في البداية تعرّف على كيفية إعداد علامة تتبُّع من Google.
تنفيذ قياس تطبيقات الصفحة الواحدة
لتنفيذ قياس دقيق لتطبيقات الصفحة الواحدة، استخدِم إحدى الطريقتَين التاليتَين لتشغيل مشاهدة صفحة على الويب افتراضية جديدة:
تغييرات سجلّ المتصفّح (ننصح بها): إذا كان تطبيقك من صفحة واحدة يستخدم History API، وتحديدًا الطريقتَين
pushState()وreplaceState()لتعديل الشاشات، استخدِم هذا الخيار.الأحداث المخصّصة: إذا كان موقعك الإلكتروني يستخدم عنصر
DocumentFragmentلعرض شاشات مختلفة، استخدِم هذا الخيار.
تنفيذ تغيير سجلّ المتصفّح
إذا كان تطبيقك من صفحة واحدة يستخدم History API، يمكنك تفعيل القياس المحسّن في "إحصاءات Google" لتتبُّع مشاهدات الصفحة تلقائيًا استنادًا إلى أحداث سجلّ المتصفّح.
تفعيل القياس المحسّن في "إحصاءات Google 4"
لقياس page_views تلقائيًا استنادًا إلى سجلّ المتصفّح:
افتح حسابك على "إحصاءات Google".
في قسم المشرف، ضِمن جمع البيانات وتعديلها، انقر على مصادر البيانات > الويب.
ضِمن القياس المحسَّن ، اضبط مفتاح التبديل على تفعيل لتفعيل كل الخيارات.
انقر على لتعديل خيارات فردية. ضِمن مشاهدات الصفحة، انقر على عرض الإعدادات المتقدّمة. احرص على تفعيل كل من عمليات تحميل الصفحة وتغييرات الصفحة استنادًا إلى أحداث سجلّ المتصفّح.
احفظ التغييرات.
ملاحظة: عند تفعيل "القياس المحسّن" للخيار "تغييرات الصفحة استنادًا إلى أحداث سجلّ المتصفّح"، تستمع "إحصاءات Google" تلقائيًا إلى أحداث سجلّ المتصفّح (مثل الأحداث المستخدَمة في تطبيقات الصفحة الواحدة) وتُرسِل أحداث page_view. لست بحاجة إلى ضبط متغيّرات أو مشغِّلات سجلّ متصفّح معيّنة في Google Tag Manager لغرض إرسال مشاهدات الصفحة إلى إحصاءات Google 4.
استخدام مشغِّلات Google Tag Manager لأحداث سجلّ المتصفّح
إذا كنت بحاجة إلى تنشيط أنواع أخرى من العلامات في Google Tag Manager استنادًا إلى تغييرات سجلّ التصفُّح، مثل إرسال البيانات إلى منصات تسويق أخرى، يمكنك استخدام نوع المشغِّل "تغيير سجلّ التصفُّح".
عند ضبط العلامات أو المتغيّرات للعمل مع المشغِّل "تغيير سجلّ المتصفّح"، احرص على استخدام المتغيّرات غير القابلة للتخصيص الصحيحة التي توفّرها Google Tag Manager:
History New URL Fragment: جزء عنوان URL بعد حدث سجلّ المتصفّحHistory Old URL Fragment: جزء عنوان URL قبل حدث سجلّ المتصفّحHistory New State: عنصر حالة سجلّ المتصفّح الجديدHistory Old State: عنصر حالة سجلّ المتصفّح القديمHistory Source: مصدر حدث سجلّ المتصفّح (مثلpopstateأوpushStateأوreplaceState)
قد تحتاج إلى تفعيل هذه المتغيّرات المضمّنة أولاً في Google Tag Manager ضِمن المتغيّرات > ضبط.
لمزيد من التفاصيل عن هذا المشغِّل، اطّلِع على المشغِّل "تغيير سجلّ المتصفّح".
التحقّق من إعدادات القياس
للتحقّق من أنّ تطبيقك من صفحة واحدة يقيس مشاهدات الصفحة بشكلٍ صحيح:
فعِّل وضع تصحيح الأخطاء لكل علامة في إعدادات قياس تطبيقك من صفحة واحدة. تعرّف على كيفية مراقبة الأحداث في DebugView.
انقر على تطبيقك من صفحة واحدة. عند النقر على شاشة افتراضية جديدة، من المفترض أن يظهر حدث
page_viewجديد في DebugView. قارِن مَعلمات حدثpage_viewبحدثpage_viewالسابق للتحقّق مما إذا تم تعديل الإحالة إلى الصفحة وموقع الصفحة بشكلٍ صحيح.
اعتبارات إضافية لتطبيقات الصفحة الواحدة
بالإضافة إلى إرسال أحداث page_view، ننصحك بمراعاة هذه الجوانب الإضافية لتحقيق تكامل قوي لتطبيقات الصفحة الواحدة مع "إحصاءات Google" وتحسين تجربة المستخدم:
إدارة موضع التمرير
عندما ينتقل المستخدمون بين طرق العرض في تطبيق من صفحة واحدة، يحتفظ المتصفّح عادةً بموضع التمرير الحالي. قد يعني ذلك أنّ المستخدمين لا يرون أعلى الصفحة الافتراضية الجديدة، وقد يؤثر ذلك في تتبُّع عمق التنقل في الصفحة.
اقتراح: أعِد ضبط موضع التمرير برمجيًا إلى أعلى الصفحة أو حاوية المحتوى الرئيسية بعد كل انتقال إلى صفحة افتراضية.
// 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);
باستخدام هذا التغيير، سيبدأ المستخدمون من أعلى المحتوى الجديد، ما يسمح لميزة تتبُّع التمرير في "إحصاءات Google" بقياس التفاعل على الصفحة الافتراضية الجديدة بدقة.
ضمان إمكانية الوصول إلى المحتوى لميزات المتصفّح
إذا أبلغ المستخدمون عن مشاكل في ميزات المتصفّح، مثل عدم عمل البحث على الصفحة (Ctrl+F) بعد تحميل صفحة افتراضية، قد يشير ذلك إلى طريقة تعديل تطبيقك من صفحة واحدة لنموذج العناصر في المستند (DOM).
اقتراح: تأكَّد من أنّ إطار عمل تطبيقك من صفحة واحدة ومنطق التوجيه يُعدِّلان بشكلٍ كامل ومتزامن الأجزاء ذات الصلة من نموذج العناصر في المستند باستخدام محتوى الصفحة الجديدة. قد لا يكون العرض المتأخر أو المحتوى المخفي عن شجرة نموذج العناصر في المستند الرئيسية قابلاً للفهرسة على الفور من خلال وظيفة البحث في المتصفّح. اختبِر البحث على الصفحة بعد عمليات التنقّل الافتراضية للتأكّد من إمكانية الوصول إلى المحتوى.
تأثير ذلك في الأحداث التلقائية
إذا نفّذت قياس مشاهدات الصفحة الافتراضية بشكلٍ صحيح في تطبيقك من صفحة واحدة، ستتعامل "إحصاءات Google" مع الأحداث التلقائية الأخرى بشكلٍ مناسب. إذا لم يتم تسجيل مشاهدات الصفحة الافتراضية لتغييرات الشاشة، ستتعامل "إحصاءات Google" مع تطبيق الصفحة الواحدة كصفحة واحدة، ما يؤدي إلى تحريف المقاييس.
على سبيل المثال، يقيس حدث user_engagement الوقت الذي يقضيه المستخدم بنشاط على صفحة. بدون مشاهدات الصفحة الافتراضية، يتم تحديد مصدر كل مدة التفاعل إلى عملية تحميل الصفحة الأولية، ما يجعل من المستحيل تحليل الوقت الذي يتم قضاؤه على شاشات فردية.
عند تنفيذ قياس مشاهدات صفحة على الويب الافتراضية بشكلٍ صحيح:
- يتم إرسال حدث
user_engagementعندما ينتقل المستخدم من صفحة افتراضية إلى أخرى. - يتم احتساب مدة التفاعل للصفحة الافتراضية السابقة وإرسالها مع حدث
user_engagement، وعادةً ما يكون ذلك قبل معالجة حدثpage_viewللصفحة الافتراضية الجديدة مباشرةً. - يتم ربط الأحداث الأخرى، مثل النقرات أو عمليات التمرير، بـ
page_locationللصفحة الافتراضية التي يعرضها المستخدم حاليًا.
يتيح لك ذلك تحليل تفاعل المستخدم والمقاييس الأخرى للشاشات أو الأقسام الفردية ضِمن تطبيقك من صفحة واحدة، ما يوفّر فهمًا أكثر دقة لرحلة المستخدم.