أفضل الممارسات لإجراء اختبارات A / B على تطبيقات الصفحة الواحدة (SPA)

هذه المقالة هي الجزء الثاني من اختبار A / B على سلسلة تطبيقات الصفحة الواحدة .

في الجزء الأول ، قدمنا ​​مفهوم تطبيق الصفحة الواحدة (SPA) ، وأظهرنا سبب تزايد شعبيته ، وألقينا نظرة على 10 من أفضل منصات اختبار A / B التي يمكنك استخدامها في تطبيقات الصفحة الواحدة .

لكن إجراء اختبارات A / B على SPA قد يكون صعبًا بعض الشيء بسبب طريقة عملها. في هذه المقالة ، سنقدم لك نصيحة عملية حول كيفية إجراء تجربة على SPA وبعض أفضل الممارسات التي يجب اتباعها.

تطور أطر SPA

SPA ليست مفهومًا جديدًا.

تصف براءة اختراع من عام 2002 تقنية مشابهة للإصدار المعاصر من SPA.

ومع ذلك ، فإن تقنية AJAX ، التي تم استخدامها كمعيار للشبكة منذ عام 2006 ، جعلت تنفيذها أسهل. إنها مجموعة من الاستراتيجيات لإنشاء تطبيقات ويب غير متزامنة باستخدام مجموعة متنوعة من تقنيات جانب العميل. يمكن للبرنامج إرسال واستقبال البيانات من الخادم في الخلفية بفضل AJAX ، دون تغيير الحالة الحالية للصفحة أو وضع عرض المحتوى ، وبالتالي دون التدخل في تجربة المستخدم.

من ناحية أخرى ، لم يكن إدخال AJAX لحظة فاصلة في اعتماد SPA.

يعد ارتفاع شعبية تطبيقات SPA جزءًا من اتجاه أكبر يغذيه النمو السريع للواجهة الأمامية والأهمية المتزايدة لتجربة المستخدم في السنوات الأخيرة.

تم إنشاء SPAs لأول مرة باستخدام تطبيقات Java الصغيرة أو برامج Flash ، بالإضافة إلى مكتبات JavaScript أو مكتبات jQuery "نقية".

ومع ذلك ، فإن أطر عمل الواجهة الأمامية مثل Angular.js و React.js و Vue.js - وكلها إطارات عمل JavaScript جديدة نسبيًا - قد ساعدت في تطويرها.

ما هي التقنيات وراء هندسة SPA؟

يعد SPA في الأساس إطار عمل JavaScript مع دعم HTML5 و CSS3.

ومع ذلك ، باستخدام هذه المكونات ، ظهرت بعض المكتبات والأطر المتميزة وتم تبنيها في عالم التنمية:

1. الزاوي

تم تطوير Angular بواسطة Google ، وهو الأكثر نضجًا والأقدم من بين 3 أطر مع وثائق مفصلة للاستخدام ولكن منحنى تعليمي حاد.

إنه مضمن مع بنية أصلية لمتحكم عرض النموذج (MVC) ولكنه يستخدم في الغالب MVVM (Model-View-ViewModel) الذي يسمح للعديد من المطورين بالعمل بشكل منفصل في نفس قسم التطبيق. يمكن أن تكون هناك بعض مشكلات الترحيل مع التحديث إلى الإصدارات الجديدة ، ولكن Angular تتمتع بأكبر قدر من الموثوقية عند التوسع وهي رائعة للمشاريع الكبيرة والمعقدة.

بسبب TypeScript ، تعد Angular خيارًا رائعًا لفرق كبيرة من المطورين ، وبعض الشركات تستخدم هذه التقنية بالفعل في منتجاتها الأخرى.

على GitHub ، إنه إطار عمل راسخ وناضج مع عدد كبير من المساهمين.

تعد Google ومنتجاتها مثل Google Drive و Gmail ، وكذلك Wix ، من بين مستخدمي Angular for SPAs.

2. React.js

تم تطوير React بواسطة Facebook وجعلها مفتوحة المصدر. تم استخدامه بشكل أساسي لإنشاء واجهات مستخدم (Facebook و WhatsApp و Instagram).

إنها تحظى بشعبية كبيرة نظرًا لحجم الشفرة خفيف الوزن وقدرتها على الاندماج بسلاسة مع الأطر الأخرى. كما أن لديها طريقة بسيطة للانتقال بين الإصدارات. (عادة ما يكون الترحيل بنقرة واحدة).

يتم استخدامه بشكل متكرر مع Redux لإدارة حالة مكونات التطبيق. تستخدم أوبر أيضًا تقنية React.js في منتجاتها.

يُعد React مناسبًا تمامًا لأولئك الذين بدأوا للتو في استخدام أطر عمل JavaScript للواجهة الأمامية ، بالإضافة إلى الشركات الناشئة والمطورين المرنين. بالإضافة إلى ذلك ، توفر مكتبة JavaScript هذه خيارات تكامل قيمة مع مجموعة متنوعة من أطر العمل والتقنيات الأخرى ، وهو أمر مفيد حقًا عند العمل في مشروع ذي بيئة كبيرة. من بين جميع أطر عمل SPA ، تمتلك React أكبر قدر من المساهمات على GitHub ، مما يساعد المطورين على استكشاف المشكلات المحتملة وإصلاحها.

إنه يحتوي على أسهل منحنى تعليمي من بين الأطر الثلاثة وأفضل استخدام له للمشاريع ذات الموعد النهائي القصير الذي يتطلب الكثير من قابلية التوسع.

3. Vue.js

Vue.js ليست مملوكة لشركة كبرى مثل Facebook أو Google ، لكنها لا تزال تكتسب وتيرتها مع مستخدمين جدد ، خاصة في آسيا. إنها أحدث أطر عمل SPA أعلاه ، وقد تم تأسيسها في 2014 بواسطة Evan You ، موظف سابق في Google. عادة ما يكون الكثير من الوثائق باللغة الصينية ، ولكن لا تزال هناك مصادر تدريب.

إطار العمل خفيف جدًا ويمكن استخدامه ببساطة لإنشاء تطبيقات عالية الأداء.

بالنسبة لمعظم المطورين ، لا توجد مشكلات كبيرة تتعلق بالإنشاء في أي من هذه الأطر ، فالقرار يرجع حقًا إلى الميزات الرئيسية لكل منها.

يتم استخدام Vue.js الآن من قبل مؤسسات مثل Baidu و GitLab و Alibaba لتلبية احتياجاتهم.

كيف تعمل تطبيقات الصفحة الواحدة

الحمامات لديها تصميم مباشر. يتم استخدام تقنيات العرض من جانب العميل والخادم.

على موقع ويب بخلاف SPA ، عند إدخال عنوان URL في متصفحك ، يرسل المتصفح الطلب إلى خادم ويتلقى صفحة HTML ردًا على ذلك.

على موقع ويب SPA ، يقوم الخادم فقط بتسليم مستند HTML في الطلب الأولي وبيانات JSON في الطلبات اللاحقة. يشير هذا إلى أن SPA ستعيد كتابة محتوى الصفحة الحالية بدلاً من إعادة تحميل موقع الويب بالكامل.

باختصار ، يعمل SPA على النحو التالي:

1. ينشئ العميل أولاً اتصالاً بالخادم ويحصل على محتوى الصفحة ، والذي يتكون أساسًا من كود HTML و CSS وحزمة JavaScript تضم جميع البرامج النصية المطلوبة لتشغيل منطق التطبيق.
2. يقوم إجراء المستخدم بتنشيط تنفيذ JavaScript (s) ذات الصلة ، والتي تقوم بعد ذلك بتقديم طلبات AJAX إلى الخادم. عادةً ما تكون البيانات بتنسيق JSON ولا تتطلب تحديثًا كاملاً لصفحة الويب.

بدلاً من الأسلوب العادي المتمثل في إطلاق المتصفح لصفحة جديدة تمامًا ، يتفاعل تطبيق الصفحة الواحدة مع المستخدمين من خلال التعديل الإجباري لصفحات الويب الموجودة ببيانات جديدة من خادم الويب. يقوم المستعرض باسترداد شفرة HTML و JavaScript و CSS اللازمة ، أو الموارد المناسبة الأخرى ، ويضيفها إلى الصفحات حسب الحاجة.

على الرغم من أنه يمكن استخدام واجهة برمجة تطبيقات سجل HTML5 أو تجزئة الموقع لتوفير إمكانية التنقل وإدراك الصفحات المنطقية المختلفة في تطبيق الويب ، لا يتم إعادة تحميل الصفحة في أي وقت أثناء الإجراء ولا تنقل التحكم إلى صفحة أخرى.

إذا كنت تريد مشاهدة مثال لتطبيق صفحة واحدة قيد التشغيل ، فانتقل إلى هذا الرابط وانقر على الصفحة الرئيسية ، وقائمة أحدث الدورات ، والقائمة العلوية. عند القيام بذلك ، ستلاحظ أن الصفحة لا يتم إعادة تحميلها بالكامل ، بل يتم إرسال البيانات الجديدة فقط عبر السلك بينما يتنقل المستخدم في جميع أنحاء التطبيق.

هذا مثال على SPA.

من هم الأكثر ملاءمة لـ SPA؟

نظرًا لفوائد SPA ، فهي الآن الحل المفضل في العديد من الظروف.

إنهم يتفوقون في المشاريع التي تتضمن مجموعة متنوعة من تقنيات الويب ، حيث يكون الأداء وتجربة المستخدم الممتعة أكثر أهمية من المحتوى.

هناك العديد من اللاعبين الكبار الذين يستخدمون SPA. يعد Facebook و Gmail و Google Maps و Netflix و Paypal بعضًا من أبرز الأمثلة على هذا النوع من التكنولوجيا (انظر أدناه).

لماذا يصعب اختبار A / B على SPA؟

جميع الأطر الثلاثة - React.js و Angular.js و Vue.js - تحظى بشعبية كبيرة بين مطوري JavaScript لأنها تسمح بتطوير واجهات مستخدم متطورة تخلق تجارب مستخدم أفضل ومعدلات تحويل أعلى.

إنها مرغوبة جدًا للمطورين لأن

• لا داعي لتحديث الصفحة
• سرعات تحميل الصفحة أسرع
• التفاعلات غنية وسائلة
• يتم تقليل عمليات نقل البيانات
• تسمح القطع القابلة لإعادة الاستخدام بتطوير أسرع
• مجتمع المطورين راسخ

إنها أيضًا مصدر الانتقال لأي شخص يبدأ منتجعًا صحيًا جديدًا.

ومع ذلك ، هناك عيب رئيسي واحد: بسبب كيفية عمل هذه الأطر ، تكافح أدوات اختبار A / B من جانب العميل للعمل بشكل صحيح .

عندما يتصفح شخص ما صفحة ويب على SPA ، لا يتم تحديث الصفحة - بما في ذلك عنوان URL - . تختلف حالة الصفحة باختلاف تفاعل المستخدم (على سبيل المثال ، العناصر المختلفة المرئية على الشاشة).

نظرًا لأن أدوات اختبار A / B عادةً ما تقوم بإجراء تعديلات مرة واحدة فقط أثناء تحميل الصفحة الأولي ، فلا يتم أخذ هذه التفاعلات اللاحقة في الاعتبار.

فيما يلي سيناريوهان شائعان:

1. إذا قمت بتمكين مشاهدات الصفحة في SPA الخاص بك ، فستتلقى مشاهدة الصفحة عندما يزور شخص ما عنوان URL ، ولكن ليس مرة أخرى إذا كان يتصفح في صفحة مختلفة حيث يتم تمكين مشاهدات الصفحة. هذا بسبب تحميل المادة في الصفحة الحالية بدلاً من صفحة جديدة.
2. إذا حاولت قصر حدث على عنوان URL معين ، فستواجه نفس المشكلة. "ستعتقد" أداة اختبار A / B أنها تظل على نفس الصفحة التي تم تحميلها عليها لأول مرة ، حتى إذا كان المستخدم يعتقد أنها على صفحة مختلفة. نظرًا لأنه يتم نقل القطع داخل الموقع وخارجه ، فقد تكون هناك صعوبة في مراقبة النقرات أو الأحداث الأخرى.

لتقديم التجارب ، تعتمد برامج اختبار A / B من جانب العميل والأنظمة الأساسية للتخصيص على عمليات تحميل كاملة للصفحات.

نظرًا لغياب هذا المفهوم عند استخدام أطر عمل SPA مثل React أو Angular أو Vue ، فإن تحديد ما إذا تمت إضافة محتوى جديد إلى الصفحة أو تغير حالة المحتوى الحالي - والأهم من ذلك ، متى يتم حقن محتوى مخصص - يصبح أكثر صعوبة.

لذلك يجب أن تكون أدوات اختبار A / B قادرة على التعرف على سياق الزائر ، مثل ما إذا كان قد وصل إلى قائمة المنتجات أو التفاصيل أو صفحة عربة التسوق ، وفي أي نقطة يجب توفير المواد الجديدة.

هذا يعني أن فريق التكنولوجيا يحتاج إلى البقاء باستمرار على رأس التغييرات المعيارية لمكونات React SPA أو Angular SPA ، بالإضافة إلى تحديث التجارب التي تؤثر على تلك المكونات في الوقت الفعلي.

على سبيل المثال ، يتسبب كل تفاعل للمستخدم في React.js في تحديث عنصر أو أكثر من عناصر واجهة المستخدم ، مما يؤدي إلى حذف أي تغييرات تم إجراؤها بواسطة حل اختبار A / B.

الاختبار من جانب العميل مقابل الاختبار من جانب الخادم على SPA

عندما يتعلق الأمر باختبار A / B على SPA ، هناك خياران:

1. عزل "الحالات" المختلفة للتطبيق الذي تريد اختباره ، ثم إعدادها بحيث عند عرض كل "حالة" ، يتم استدعاء API للقيام بالتعديلات المناسبة. وهذا ما يسمى التنشيط الشرطي ويتم من جانب العميل .

تتضمن بعض أمثلة "الحالات" عرض نموذج اشتراك وتحميل قائمة بنتائج البحث وما إلى ذلك.

2. ترميز التعديلات ، من جانب الخادم ، أو نشر مخصص لكل تجربة جديدة.

يتأثر كلا الخيارين بإطار عمل SPA الذي يتم استخدامه. لذلك ، كما خمنت ، تتطلب الكثير من التعاون بين الفريق الفني والمسوقين للاستمرار في العمل الجيد.

الآن ، دعنا نتناول كلا الخيارين ونرى ما يجب على الفرق فعله لتحقيق النجاح.

التنشيط المشروط من جانب العميل

إذا كان لا يزال يتعين عليك إجراء اختبار من جانب العميل على تطبيق SPA ، فهناك حل بديل.

للتأكد من أن اختبار البرامج النصية يتم تنفيذه فقط عندما يصل التطبيق إلى الحالة المطلوبة ، يمكن لمطوري الويب استخدام ميزة تسمى وضع التنشيط الشرطي .

إذا لم تكن معتادًا على التنشيط المشروط ، فمن السهل فهمه.

يمنحك التنشيط المشروط ، في جوهره ، القدرة على تحديد متى يجب تنشيط التجربة بخلاف الطريقة القياسية للقيام بذلك عند تحديث الصفحة.

يمكن تحقيق ذلك عن طريق كتابة القليل من JavaScript. هناك طريقتان للقيام بذلك.

1. وظيفة الاقتراع

وظيفة الاستقصاء هي الطريقة الأساسية لاستخدام التنشيط الشرطي. تقوم الوظيفة بمسح الصفحة كل 50 مللي ثانية حتى يظهر عنصر محدد - يمكن أن يكون هذا نموذجي أو div أو حتى الصفحة بأكملها.

تبدأ التجربة عندما يظهر العنصر.

تُنشئ منصة اختبار A / B بضعة أسطر من JavaScript لتعديلها بناءً على العنصر الذي تريد أن تبحث عنه وظيفة الاقتراع.

يتم تنشيط التجربة بمجرد تقييم الوظيفة إلى TRUE .

2. وظيفة رد الاتصال

يشبه تنفيذ وظيفة رد الاتصال تنفيذ وظيفة الاستقصاء ، ولكنه يضيف بعض المرونة.

تسمح لك هذه الوظيفة بإدخال أي شرط JavaScript تريده ، وإذا تم تقييمه إلى TRUE ، فبدء التجربة.

بينما تقوم وظيفة الاستقصاء باختبار اتصال الصفحة باستمرار لمعرفة ما إذا كان هناك عنصر محدد موجودًا ، فإن وظيفة رد الاتصال تكون أكثر سلبية وتعتمد على معالج الأحداث.

الاختبار من جانب الخادم

عند إجراء اختبار من جانب الخادم ، لا يتم إجراء أي تغييرات على مستوى المتصفح. بدلاً من ذلك ، يتم تحديد معلمات تنوع التجربة ("المستخدم 1 يرى الشكل أ") على مستوى الخادم وربطها مباشرةً بتطبيق جافا سكريبت عبر مزود خدمة مما يسهل اختبار المحتوى الديناميكي الأكثر تعقيدًا والذي يمتد إلى ما وراء حدود الثابت واجهة مستخدم الموقع.

خذ ، على سبيل المثال ، تطبيقات الوسائط الاجتماعية التي غالبًا ما تكون SPA. بينما يمكن استخدام اختبار الواجهة الأمامية لتجربة هذه الاختبارات ، إلا أنه أكثر تعقيدًا بسبب المحتوى الديناميكي المتضمن ، وبالتالي فإن التبديل إلى الاختبار من جانب الخادم يجعل العملية أسهل بكثير.

أمثلة على اختبارات A / B في SPA

ما هي بعض الأمثلة الواقعية لاختبار A / B على تطبيقات الصفحة الواحدة التي يمكن أن تصادفها؟

تغيير صورة على الصفحة المقصودة

لنفترض أنك بحاجة إلى إعداد تجربة على SPA لإظهار صورة ديناميكية لـ 50٪ من الجمهور الذي وصل إلى صفحة معينة. إطار عمل SPA المستخدم في هذا المثال هو React.js مما يعني أن الصفحة تتغير ويتم استبدال الصور بشكل منتظم.

إذا قمت بعرض الصورة المتغيرة ، فقد تحدث مشكلات وميض ، مما يعني أنه سيتم ملاحظة تسلسل الصورة الأصلية المتغيرة للصورة.

يمكن تجنب هذه المشكلة تمامًا عن طريق بدء الاستطلاع عند تحميل الصفحة المقصودة المحددة.

اختبار نسخة إضافية أسفل CTA

قد تتضمن تجربة أخرى على موقع SPA تم إنشاؤه باستخدام Angular.js عرض سطر إضافي من النسخة أسفل CTA الرئيسي إلى 30٪ من الجمهور المستهدف.

في هذا المثال ، سيعرض الإصدار A سطرًا إضافيًا من النسخة أسفل CTA الرئيسي ، بينما لن يعرض الإصدار B. سنرسل 30٪ من حركة المرور إلى الإصدار A و 70٪ إلى الإصدار B ، ثم نقارن النتائج لمعرفة ما إذا كان هناك فرق كبير في معدلات التحويل.

نظرًا لأن موقع الويب تم إنشاؤه باستخدام Angular.js ، يتم تغيير العناصر على أساس منتظم. يمكن أن يساعدنا حدث رد الاتصال هنا في عرض التغييرات على المتغير.

إظهار قسيمة هدايا

في هذا المثال ، لنفترض أنه عندما يضيف المستخدم منتج علامة تجارية مميزة إلى سلة التسوق الخاصة به ، فإننا نريد عرض قسيمة هدايا حصرية. بشرط أنه عندما يقوم المستخدم بإزالة المنتج المتميز من السلة ، يتم سحب القسيمة من الصفحة.

1. ما يجب أن يحدث هنا هو أنه عندما يقوم المستخدم بتنفيذ الإجراء المطلوب ، يجب إرسال حدث تنشيط يدوي. سيتم تفعيل التجربة كنتيجة لهذا الحدث.
2. يجب إطلاق حدث التنشيط عندما يقوم المستخدم بإزالة المنتج المتميز من السلة ، وإلغاء تنشيط التجربة.
3. يجب إعادة تنشيط التجربة لإظهار المنتج المتميز إذا أضافه المستهلك مرة أخرى.

عرض سطر الوصف أدناه عبارة "اشترِ الآن" للحث على اتخاذ إجراء

إذا كنت ترغب في عرض سطر وصف فريد أسفل زر الحث على الشراء "اشتر الآن" ، فيمكنك تنشيط التجربة إذا قمت بالضغط على حدث التنشيط في تغيير السجل.

هذا لأن الصفحة التي تحتوي على زر الحث على الشراء "اشتر الآن" لن يتم تحميلها في البداية.

كيف تجاوز التحويل مشكلة الاختبار على SPA

تحتاج التجارب على SPA إلى التعامل معها بشكل مختلف عن التجارب الأخرى. نظرًا لأن البرنامج النصي للتحويل لا يمكنه قراءة عنوان URL الذي يتنقله زائر موقع الويب ، فلا يمكنه إجراء تجارب بالطرق القياسية.

إذن إليك كيف يتم ذلك بدلاً من ذلك.

ابدأ بتثبيت رمز تتبع التحويل كما هو موضح في هذه المقالة.

بعد ذلك ، قم بتطبيق إحدى الطرق الثلاثة أدناه:

1. إجراء الاقتراع

كما ذكرنا ، فإن الاقتراع هو العملية التي يتم من خلالها اختبار ظروف التجربة لتحديد ما إذا كان ينبغي تشغيل التجربة المذكورة.

يتضمن ذلك مراقبة عنوان URL للزائر أو شروط الجمهور أو شروط JavaScript لإجراء الاختبار.

عادة ما يتم تشغيل الاستقصاء عن طريق التحويل عند تحميل صفحة جديدة. في SPA ، عادةً ، لا يتم تحميل أي صفحات جديدة على تطبيق الويب.

في هذه الحالة ، ستحتاج إلى الكود التالي لبدء الاقتراع:

 window._conv_q = _conv_q || [] ؛
window._conv_q.push (["تشغيل"، "صحيح"])؛

يجب عليك تحديد أفضل حدث على SPA الخاص بك لتشغيل الكود أعلاه. نموذج التعليمات البرمجية التي يجب إضافتها في إعدادات المشروع> قسم جافا سكريبت للمشروع العام.

 console.log ('SPA / تحويل الشفرة في مشروع عالمي Javascript تم تنفيذه') ؛
إذا (! window.globalExecutedTs) {
window.globalExecutedTs = صحيح ؛
var oldPushState = window.history.pushState ؛
window.history.pushState = الوظيفة (البيانات) {
محاولة {
setTimeout (الوظيفة () {
إرجاع oldPushState.apply (هذا ، وسيطات) ؛
console.log ('تحويل منشط من pushstate') ؛
window._conv_q = _conv_q || [] ؛
window._conv_q.push (["تشغيل"، "صحيح"])؛
} ، 0) ؛
} catch (e) {
console.log (ه) ؛
}
} ؛
window.onpopstate = الوظيفة (الحدث) {
setTimeout (الوظيفة () {
console.log ('تحويل منشط من popstate') ؛
window._conv_q = _conv_q || [] ؛
window._conv_q.push (["تشغيل"، "صحيح"])؛
} ، 0) ؛
} ؛
}

2. استخدم شروط JavaScript في منطقة الموقع

نظرًا لأن البرنامج النصي للتحويل لا يمكنه قراءة تغييرات عنوان URL في SPA ، يجب عليك استخدام شرط JavaScript بدلاً من شرط مطابقة عنوان URL لبدء تجربة.

ابحث عن شرح مفصل لكيفية القيام بذلك في المقالة التالية.

3. تنشيط تجربة يدويًا

يمكنك بدء التجارب يدويًا بعد أن تحدد حدوث تدفق معين. باستخدام هذه الطريقة ، سيستمر اختبار شروط منطقة الموقع والجمهور بعد تشغيل الاستقصاء باستخدام الكود. تحقق من هذه المقالة للحصول على مزيد من المعلومات التفصيلية حول تنشيط التجربة يدويًا.

باستخدام الطرق الثلاثة المذكورة أعلاه ، يجب أن تكون قادرًا على بدء التجارب في الوقت المناسب في تطبيق SPA.

هل يزيد التحويل من مخاطر الخفقان في مناطق SPA؟

إجابة قصيرة ، لا.

جميع أطر SPA متوافقة مع تقنية Convert المضادة للوميض. يعمل التحويل على تعزيز تقنية SmartInsert ^TM خلف الكواليس لضمان تطبيق تعديلات التجربة أو إعادة تطبيقها في الوقت المناسب على SPA الخاص بك ، حتى أثناء إعادة تحميل الصفحة الديناميكية.

نوصي بقراءة ورقتنا البيضاء حول تأثير الوميض لمعرفة المزيد عنه ولماذا يجب تجنبه بأي ثمن.

المشكلات الشائعة عند اختبار A / B على مواقع التطبيق ذات الصفحة الواحدة

كما ترى ، هناك بعض الأشياء التي يجب وضعها في الاعتبار عند إجراء الاختبارات على مواقع SPA. بمجرد تغطية إطار العمل المستخدم وطريقة اختبار الأداة وحدث المشغل ، تكون المشكلة الرئيسية عادةً مع عدم إعادة تحميل عنصر الاختبار عند عرض صفحة أو طريقة عرض جديدة على المتصفح.

يمكن أن يحدث هذا بسبب بعض الأشياء:

1. اختبار التغييرات التي تظهر في عرض الصفحة الأولى ولكن ليس في العروض اللاحقة

في بعض الأحيان ، يظهر التغيير الذي تهدف إلى عرضه فقط على الصفحة الأولى التي تقوم بتحميلها في متصفحك ، ولكن ليس في العروض اللاحقة. وذلك لأن جزء التحويل النصي الذي يقيم التجارب وينشطها لا يعمل عند الوصول إلى طريقة عرض جديدة أو "صفحة" من الموقع.

2. لا تظهر التغييرات التي تظهر على المحرر المرئي عند معاينتها خارجها

قد يحدث أحيانًا ألا تظهر التغييرات التي تم إجراؤها باستخدام المحرر المرئي خارج معاينة المحرر.

لا تستخدم معظم أطر عمل SPA واجهة برمجة تطبيقات DOM وبدلاً من ذلك تستخدم أساليبها الخاصة لنشر التغييرات على الصفحة. يؤدي هذا إلى خروج DOM عن المزامنة عند تحديثه بواسطة SPA. هذا شائع في React و Angular ، مما يتسبب في عدم عمل محددات CSS الموجودة في كود Jquery.

3. استمرار ظهور التغييرات في "طرق العرض" اللاحقة

في هذا السيناريو ، يتم عرض تغيير التجربة في طريقة العرض الصحيحة (الصفحة). ولكن ، عند زيارة طرق عرض (الصفحات) الجديدة ، لا يختفي التغيير. يحدث هذا لأنه في موقع SPA ، لا تتم إزالة التغييرات عند إعادة تحميل صفحة جديدة.

يقوم البرنامج النصي للتحويل بإزالة التعليمات البرمجية المضافة عندما لا تتطابق شروط التجربة مع العرض التالي حيث تم نشر التغييرات عند استدعاء الاستقصاء. ومع ذلك ، هذا لا يكفي لأن تغييرات jquery لن تختفي حتى عند إزالة كود التجربة من الصفحة.

ستحتاج إلى تنفيذ التعليمات البرمجية التي ترجع التغييرات التي أحدثتها التجربة.

دورك: تجنب هذه الأخطاء عند تحسين السبا الخاص بك

بسبب التقدم في كيفية معالجة المعلومات وتقديمها ، قد تصبح SPAs مقبولة بشكل أكثر شيوعًا ، ولكن من المهم ملاحظة أن هذه التكنولوجيا الجديدة بها مشكلات عند الدمج مع منصات التحسين والتجريب ، والتي تعمل عادةً مع المزيد من الإعدادات الكلاسيكية.

نأمل أن تكون هذه المقالة قد غطت المكونات المختلفة لـ SPA بالإضافة إلى بعض الحلول للتغلب على تلك العقبات في سعيكم لتزويد الزائرين بتجارب رقمية أسرع وأكثر سهولة وشخصية.

ومع ذلك ، سيكون من الأفضل لك العمل مع موفر الحلول الذي يمكنه تقديم دعم سلس لـ SPAs ، مثل القدرة على اكتشاف التغييرات في مكونات واجهة المستخدم وأنواع الصفحات للتخصيص الديناميكي دون تعديل التعليمات البرمجية المصدر. مثل الموجود في المربع أدناه.