كيف تنشئ VWO تجربة زوار خالية من الاحتكاك عند إجراء التجارب على تطبيق صفحة واحدة (SPA)

الغوص العميق في كيفية دعم VWO الأصلي لمواقع الويب الديناميكية يجعل التجريب أمرًا سهلاً بالنسبة لك وأنت تبني تجارب سلسة للزائرين.

تم إنشاء العديد من مواقع الويب كتطبيقات صفحة واحدة (SPAs) نظرًا لأن لها مزايا رئيسية قليلة على مواقع الويب الثابتة التقليدية: مواقع الويب الديناميكية سريعة ومضغوطة وسريعة الاستجابة. تمكّنك مواقع الويب هذه من تحسين المحتوى الذي يراه المستخدم لإنشاء تجارب جذابة وفريدة من نوعها. إذا سمعت من فريق التطوير لديك أن موقع الويب الخاص بك قد تم إنشاؤه باستخدام React أو Vue أو AngularJS أو Ember أو Backbone ، فمن المحتمل أنك تعمل مع SPA ، وهذه المقالة مناسبة لك.

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

لكن أولاً ، لنتحدث عن المشكلة التي أتت بك إلى هنا في المقام الأول.

تحديات إجراء التجارب على مواقع الويب الديناميكية

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

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

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

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

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

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

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

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

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

تستخدم بعض أطر عمل مواقع الويب ، مثل GatsbyJS و Next.js و ReactJS وما إلى ذلك ، عرضًا من جانب الخادم وتخزين لقطة لصفحة الويب الأصلية الخاصة بك كما ينبغي تحميلها. لذلك ، عند تعديل عنصر في الصفحة لأغراض الاختبار ، يكتشف إطار العمل التغيير باعتباره "مشكلة" ويعيد الصفحة إلى حالتها الأصلية كما تظهر في اللقطة المخزنة. وهذا بدوره يعيق اختبار أ / ب الخاص بك.

ثانيًا ، تستخدم أحدث الأطر مثل React و Gatsby و Next.js و Vue.js و Angular وما إلى ذلك مفهوم العرض المستند إلى الحالة. على سبيل المثال ، في React ، كلما تم تنفيذ تغيير في إحدى الحالات بسبب اختلاف اختبار A / B ، تعيد واجهة موقع الويب تحميل نفسها تلقائيًا إلى شكلها الأصلي ، بحيث لا يرى المستخدمون هذا الاختلاف أبدًا. هذا يخلق تجربة دون المستوى الأمثل لزوار الموقع.

كيف تجعل VWO التجريب على تطبيقات الصفحة الواحدة أمرًا سهلاً

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

1. اختبار العناصر الديناميكية على موقع الويب الخاص بك

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

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

كيف تضمن VWO تطبيق التغييرات بشكل صحيح؟

سهل.

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

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

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

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

كيف يدير VWO التغييرات التي يعيقها عرض إطار العمل ؟

يبقي VWO زر CTA مخفيًا حتى يكتمل عرض إطار العمل. يتحقق VWO بشكل متكرر مما إذا كان العرض قد تم. بمجرد اكتمال عرض إطار العمل ، تبدأ حملة VWO في التنفيذ.

يمكنك قراءة المزيد حول هذه الإعدادات في مقالة قاعدة المعارف الخاصة بنا.

2. اختبار أي عنصر صفحة آخر على موقع الويب الخاص بك

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

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

لنلقِ نظرة على بعض أمثلة حالات الاستخدام للتغييرات التي يعالجها محرر VWO المرئي.

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

2. تخيل الآن أن موقع التجارة الإلكترونية الخاص بك يحتوي على تدفق تسجيل يعرض مربع إدخال نصي لالتقاط عناوين البريد الإلكتروني للزوار إلى جانب الزر "إرسال الآن". عند إجراء تغييرات على شكل ومظهر مربع إدخال النص ، تتغير المكونات المصممة لموقع الويب المقترن به. يضمن المحرر المرئي لـ VWO أن أحدث التغييرات المطبقة هي ما يراه المستخدمون. شاهد كيف يمكنك إجراء تغييرات على حقل نموذج في SPA وتأكد من أن الزوار الذين أخذوا عينات من التباين يرون هذه التغييرات بدلاً من رؤية عنصر التحكم.

كيف تستخدم VWO لتطبيقك بصفحة واحدة؟

لاستخدام VWO من أجل SPA الخاص بك ، تحتاج ببساطة إلى إضافة VWO SmartCode في القسم الرئيسي لموقع الويب الخاص بك والتمتع بالدعم الافتراضي لمواقع SPA.

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