Bagaimana VWO Menciptakan Pengalaman Pengunjung Bebas Gesekan Saat Menjalankan Eksperimen pada Aplikasi Satu Halaman (SPA)

Penyelidikan mendalam tentang bagaimana dukungan asli VWO untuk situs web dinamis membuat eksperimen menjadi mudah bagi Anda saat Anda membangun pengalaman yang mulus bagi pengunjung Anda.

Banyak situs web dibuat sebagai Aplikasi Halaman Tunggal (SPA) karena memiliki sedikit keunggulan dibandingkan situs web statis tradisional: Situs web dinamis cepat, ringkas, dan responsif. Situs web semacam itu memungkinkan Anda untuk mengoptimalkan konten yang dilihat pengguna Anda untuk menciptakan pengalaman yang menarik dan unik. Jika Anda mendengar dari tim pengembangan Anda bahwa situs web Anda dibuat menggunakan React, Vue, AngularJS, Ember, atau Backbone, Anda mungkin bekerja dengan SPA, dan artikel ini relevan untuk Anda.

Dalam artikel ini, kami berbicara tentang bagaimana kami, di VWO, membuat eksperimen di situs web dinamis menjadi efektif dan mudah dengan dukungan built-in untuk pengujian SPA sehingga Anda hanya fokus pada upaya pengoptimalan pengalaman situs web Anda dan tidak ada yang lain.

Tapi pertama-tama, mari kita bicara tentang masalah yang membawa Anda ke sini.

Tantangan menjalankan eksperimen di situs web dinamis

Anda mungkin berada di sini karena saat menjalankan eksperimen di SPA, perubahan yang Anda buat pada laman landas tidak terlihat oleh pengguna akhir. Akibatnya, Anda tidak dapat menguji dan memvalidasi ide Anda secepat yang Anda inginkan dan ini membuat Anda frustrasi.

Pertama, mari kita pahami bahwa SPA berbeda dari situs web tradisional. Seluruh halaman web dimuat setiap kali seseorang mengunjungi situs web konvensional. Namun, di SPA, hanya beberapa bagian halaman yang diperbarui. Ini karena, di SPA, sumber daya seperti HTML, CSS, Skrip, dll., yang membangun tampilan dan nuansa laman web Anda, hanya dimuat sekali.

Berdasarkan cara pengguna berinteraksi dengan berbagai bagian halaman web, apa yang Anda lihat di bagian halaman tertentu secara dinamis berubah sebagai respons terhadap tindakan pengguna. Katakanlah, jika pengguna mengklik tombol, pop-up akan terbuka. Munculan ini adalah perubahan dinamis yang dibuat oleh kerangka kerja sesuai interaksi pengguna tanpa memengaruhi kinerja. Beberapa contoh lagi di mana ada perubahan dinamis pada SPA adalah sebagai berikut:

• Item pada daftar hasil pencarian yang dapat diperluas untuk melihat detailnya.
• Dalam formulir, beberapa bidang muncul di halaman hanya ketika pengunjung memilih nilai yang telah ditentukan sebelumnya dari dropdown.
• Situs web menggunakan beberapa komponen seperti kalender, pemilih warna, dll. yang dimuat ulang setiap kali pengguna perlu menggunakannya.

Meskipun ini bagus untuk pengalaman pengguna, menjalankan kampanye percobaan dengan perubahan yang dibuat pada salah satu elemen dinamis ini (seperti daftar hasil pencarian, dropdown, widget, pop-up, spanduk, dll.) di halaman web Anda menjadi sulit. Ini karena modifikasi yang dilakukan pada komponen perlu diterapkan setiap kali ada perubahan dinamis di situs web.

Anggap saja seperti ini – Anda menjalankan pengujian di halaman web. Setiap kali halaman web dimuat (oleh pengguna yang mengunjungi halaman) atau halaman membuat elemen dinamis seperti yang dijelaskan di atas, kerangka kerja SPA menunjukkan status aslinya (berbeda dari variasi yang ingin Anda tampilkan sebagai bagian dari pengujian Anda).

Yang Anda perlukan adalah platform eksperimen yang memastikan bahwa variasi pengujian Anda menggantikan tampilan asli sehingga pengguna dapat melihat variasi yang Anda ingin mereka lihat. Jadi, saat menyetel pengujian pada SPA, (misalnya Anda menguji konten dalam kotak pop-up), Anda akan mengharapkan kontrol dan variasi pengujian terlihat seperti ini:

Namun, dengan tidak adanya dukungan SPA, perubahan yang dilakukan pada variasi akan kembali ke kontrol, membuat keduanya terlihat identik. Cukup seperti ini:

Ini hanyalah versi sederhana dari apa yang terjadi. Jika Anda tertarik untuk memahami secara teknis apa yang terjadi di balik layar, lanjutkan membaca, jika tidak, Anda dapat melompat ke bagian artikel berikutnya.

Beberapa kerangka kerja situs web seperti GatsbyJS, Next.js, ReactJS, dll., menggunakan rendering sisi server dan menyimpan cuplikan halaman web asli Anda sebagaimana seharusnya dimuat. Jadi, saat Anda memodifikasi elemen pada halaman untuk tujuan pengujian, kerangka kerja mendeteksi perubahan sebagai 'masalah' dan mengembalikan halaman ke keadaan semula seperti yang muncul di snapshot yang disimpan. Ini, pada gilirannya, menghambat pengujian A/B Anda.

Kedua, framework terbaru seperti React, Gatsby, Next.js, Vue.js, Angular, dll., menggunakan konsep state-based rendering. Misalnya, di React, setiap kali perubahan diimplementasikan di salah satu status karena variasi pengujian A/B, antarmuka situs web secara otomatis memuat ulang dirinya ke bentuk aslinya, sehingga pengguna tidak pernah melihat variasinya. Ini menciptakan pengalaman yang kurang optimal bagi pengunjung situs web.

Bagaimana VWO membuat eksperimen pada Aplikasi Satu Halaman menjadi mudah

Sekarang setelah kita membahas masalahnya, mari kita bicara tentang solusinya. Dukungan SPA asli VWO yang canggih di Editor Visualnya, yang merupakan bagian dari Pengujian VWO, memastikan bahwa modifikasi yang dibuat dalam eksperimen dapat diterapkan di SPA untuk memastikan keandalan kampanye dan memberikan pengalaman tanpa hambatan bagi pengunjung Anda.

1. Menguji elemen dinamis di situs web Anda

Sementara elemen dinamis telah didefinisikan di bagian sebelumnya, mari kita lihat lebih dekat dengan contoh spesifik. Pertimbangkan bahwa Anda memiliki situs web eCommerce. Setelah mengklik tombol 'X' (Tutup) pada 'Halaman keranjang', peringatan muncul sebagai pop-up. Sekarang, Anda ingin menguji perubahan salinan pada kotak tindakan untuk melihat apakah pesan yang dapat ditindaklanjuti dan Ajakan Bertindak dapat mencegah orang menutup halaman Keranjang. Kotak peringatan awalnya tidak ada pada kode situs web tetapi ditambahkan oleh kerangka SPA ketika pengunjung mengklik tombol 'X' (Tutup). Di sini, tombol yang membuka pop-up tempat Anda menjalankan pengujian disebut elemen target.

VWO memastikan bahwa perubahan yang ingin Anda uji diterapkan ke pop-up segera setelah dimuat. Yang harus Anda lakukan adalah mengaktifkan pengaturan dengan mengklik tombol. Anda dapat membaca lebih lanjut tentang pengaturan ini di artikel basis pengetahuan kami.

Bagaimana VWO memastikan bahwa perubahan diterapkan dengan benar?

Mudah.

VWO mengawasi elemen halaman (video, gambar, tabel, bagian, dll.) untuk perubahan yang dibuat pada mereka kapan saja. Oleh karena itu, ketika elemen target (tombol Tutup 'X' pada contoh di atas) dimuat, VWO mendeteksinya dan menerapkan modifikasi yang Anda buat di Variasi. Ini terjadi bahkan jika halaman web tidak dimuat ulang, tetapi pengguna hanya berinteraksi dengan bagian di situs web.

Mari kita sedikit teknis dan menjelajahinya lebih jauh. Anda dapat dengan mudah melewati ini dan pindah ke poin berikutnya jika detail teknis bukan untuk Anda.

Di situs web dinamis, berdasarkan perilaku pengguna, elemen ditambahkan, dihapus, atau dimodifikasi. Pohon DOM seperti tempat penyimpanan semua komponen situs web (tombol, spanduk, pop-up, widget, dll.) dan menyimpan cuplikan status situs web saat ini.

Pustaka VWO menggunakan Mutation Observer – antarmuka browser yang memungkinkan VWO mengamati perubahan di pohon DOM SPA. Ini membantu mendeteksi elemen baru yang ditambahkan, dihapus, atau dimodifikasi pada halaman. Dalam acara seperti itu, VWO menerapkan perubahan pada elemen secara otomatis. Jadi, setiap kali elemen dimuat secara dinamis, perubahan diterapkan sebelum ditampilkan kepada pengunjung. Ini meningkatkan keandalan kampanye, memastikan bahwa perubahan dalam variasi diterapkan sepenuhnya.

Bagaimana cara VWO mengelola perubahan yang terhalang oleh rendering kerangka kerja ?

VWO menyembunyikan tombol CTA hingga rendering kerangka selesai. VWO berulang kali memeriksa apakah rendering sudah selesai. Setelah rendering kerangka kerja selesai, kampanye VWO mulai dijalankan.

Anda dapat membaca lebih lanjut tentang pengaturan ini di artikel basis pengetahuan kami.

2. Menguji elemen halaman lain di situs web Anda

Saat halaman dimuat, kerangka kerja SPA modern mengembalikan elemen yang dimodifikasi ke keadaan semula setiap kali situs web dimuat. Jadi, jika Anda menguji halaman, semua modifikasi Anda akan dikembalikan ke aslinya. Bukan hanya elemen dinamis, tetapi untuk semua elemen di halaman, VWO melacak perubahan yang Anda buat untuk mengatasi tantangan pengujian dengan kerangka SPA. Saat menerapkan perubahan ini ke halaman web Anda, VWO mendeteksi semua perubahan yang dibuat pada halaman (penyisipan, penghapusan, dan modifikasi node DOM) dengan menguji dan menerapkannya kembali untuk memastikan keteraturan dalam pengalaman pengguna.

Tidak ada tindakan eksplisit yang diperlukan untuk mengaktifkan peningkatan ini pada VWO. Ini adalah fitur bawaan yang tersedia untuk semua kampanye VWO yang dibuat dengan Editor Visual, terlepas dari kerangka kerja di mana situs web Anda dibuat.

Mari kita lihat beberapa contoh kasus penggunaan perubahan yang ditangani oleh VWO Visual Editor.

1. Katakanlah Anda telah menghapus tombol CTA sekunder ( katakan “Tambahkan ke daftar keinginan”) dari situs web eCommerce Anda untuk menguji apakah perubahan ini memengaruhi jumlah klik pada CTA utama (misalnya “Tambahkan ke troli”). Ini adalah kasus penggunaan pengujian di mana Anda menghapus elemen di situs web. Meskipun Anda telah menghapus tombol, tombol itu tetap ada di DOM virtual yang dibuat oleh kerangka kerja seperti React dan akan menimbulkan kesalahan saat situs web dimuat.

2. Sekarang bayangkan situs web eCommerce Anda memiliki alur pendaftaran yang menunjukkan kotak input teks untuk menangkap alamat email pengunjung selain tombol 'Kirim sekarang'. Saat Anda membuat perubahan pada tampilan dan nuansa kotak input teks, komponen gaya situs web yang terkait dengannya berubah. Editor Visual VWO memastikan bahwa perubahan terbaru yang diterapkan adalah apa yang dilihat pengguna. Perhatikan bagaimana Anda dapat membuat perubahan pada bidang formulir di SPA dan pastikan pengunjung yang dijadikan sampel untuk variasi melihat perubahan tersebut alih-alih melihat kontrol.

Bagaimana cara menggunakan VWO untuk Aplikasi Halaman Tunggal Anda?

Untuk menggunakan VWO untuk SPA Anda, Anda hanya perlu menambahkan VWO SmartCode di bagian kepala situs web Anda dan menikmati dukungan default untuk situs web SPA.

Dengan integrasi sesederhana ini, Anda dapat segera memulai. Daftar untuk uji coba gratis, jelajahi kemampuan VWO, atau minta demo dengan pakar produk kami. Anda juga dapat mempelajari lebih lanjut tentang pembaruan produk terbaru kami yang menarik.