Praktik Terbaik untuk Menjalankan Pengujian A/B pada Aplikasi Satu Halaman (SPA)

Artikel ini adalah bagian 2 dari seri Pengujian A/B pada Aplikasi Halaman Tunggal .

Di bagian 1, kami telah memperkenalkan konsep aplikasi satu halaman (SPA), menunjukkan mengapa itu semakin populer, dan melihat 10 platform pengujian A/B terbaik yang dapat Anda gunakan pada aplikasi satu halaman .

Tetapi menjalankan tes A/B pada SPA bisa sedikit rumit karena cara mereka berfungsi. Dalam artikel ini, kami akan memberi Anda saran langsung tentang cara menjalankan eksperimen di SPA dan beberapa praktik terbaik yang harus diikuti.

Evolusi Kerangka SPA

SPA bukanlah konsep baru.

Sebuah paten dari tahun 2002 menggambarkan teknologi yang mirip dengan versi kontemporer SPA.

Namun, teknik AJAX yang telah digunakan sebagai standar jaringan sejak tahun 2006 membuat implementasinya menjadi lebih mudah. Ini adalah seperangkat strategi untuk membuat aplikasi web asinkron menggunakan berbagai teknologi sisi klien. Perangkat lunak ini dapat mengirim dan menerima data dari server di latar belakang berkat AJAX, tanpa mengubah status halaman saat ini atau mode tampilan konten, dan tanpa mengganggu pengalaman pengguna.

Pengenalan AJAX, di sisi lain, bukanlah momen penting dalam adopsi SPA.

Meningkatnya popularitas SPA adalah bagian dari tren yang lebih besar yang telah didorong oleh pertumbuhan pesat front end dan relevansi UX yang berkembang dalam beberapa tahun terakhir.

SPA pertama kali dibuat menggunakan applet Java atau program Flash, serta pustaka JavaScript atau jQuery "murni".

Namun, kerangka kerja front-end seperti Angular.js, React.js, dan Vue.js — semuanya merupakan kerangka kerja JavaScript yang relatif baru — telah membantu pengembangannya.

Apa Teknologi Dibalik Arsitektur SPA?

SPA pada dasarnya adalah kerangka kerja JavaScript dengan dukungan HTML5 dan CSS3.

Namun, dengan menggunakan komponen-komponen ini, beberapa perpustakaan dan kerangka kerja yang berbeda telah muncul dan diadopsi di dunia pengembangan:

1. Sudut

Dikembangkan oleh Google, Angular adalah yang paling matang dan tertua dari 3 kerangka kerja dengan dokumentasi terperinci untuk digunakan tetapi kurva pembelajaran yang curam.

Itu tertanam dengan arsitektur Model View Controller (MVC) asli tetapi sebagian besar menggunakan MVVM (Model-View-ViewModel) yang memungkinkan beberapa pengembang untuk bekerja secara terpisah di bagian aplikasi yang sama. Mungkin ada beberapa masalah migrasi dengan memperbarui ke versi baru, tetapi Angular memang memiliki keandalan paling tinggi saat meningkatkan dan sangat bagus untuk proyek besar dan kompleks.

Karena TypeScript, Angular adalah pilihan yang fantastis untuk tim pengembang besar, dan beberapa perusahaan telah menggunakan teknologi ini di produk mereka yang lain.

Di GitHub, ini adalah kerangka kerja yang mapan dan matang, dengan sejumlah besar kontributor.

Google dan produknya seperti Google Drive dan Gmail, serta Wix, termasuk di antara pengguna Angular for SPA.

2. React.js

React dikembangkan oleh Facebook dan dibuat open source. Itu terutama digunakan untuk membuat antarmuka pengguna (Facebook, WhatsApp, dan Instagram).

Ini sangat populer karena ukuran kodenya yang ringan, dan kemampuannya untuk berintegrasi secara mulus dengan kerangka kerja lain. Ini juga memiliki metode sederhana untuk bermigrasi antar versi. (Biasanya migrasi sekali klik).

Ini sering digunakan bersama dengan Redux untuk mengelola status komponen aplikasi. Uber juga memanfaatkan teknologi React.js dalam produknya.

React sangat cocok untuk mereka yang baru memulai dengan kerangka kerja front-end JavaScript, serta pengembang pemula dan tangkas. Selain itu, pustaka JavaScript ini menawarkan opsi integrasi yang berharga dengan berbagai kerangka kerja dan teknologi lain, yang sangat berguna saat mengerjakan proyek dengan lingkungan yang besar. Dari semua kerangka kerja SPA, React memiliki kontribusi paling banyak di GitHub, yang membantu pengembang memecahkan masalah potensial.

Ini memiliki kurva belajar termudah dari 3 kerangka kerja dan paling baik digunakan untuk proyek dengan tenggat waktu singkat yang membutuhkan banyak skalabilitas.

3. Vue.js

Vue.js tidak dimiliki oleh perusahaan besar seperti Facebook atau Google, tetapi masih meningkatkan kecepatan dengan pengguna baru, terutama di Asia. Ini adalah kerangka kerja SPA terbaru di atas, yang didirikan pada tahun 2014 oleh Evan You, mantan karyawan Google. Banyak dokumentasi biasanya dalam bahasa Cina, tetapi masih ada sumber pelatihan di luar sana.

Kerangka kerja ini sangat ringan dan dapat digunakan untuk sekadar membuat aplikasi berkinerja tinggi.

Bagi sebagian besar pengembang, tidak ada masalah besar dengan pembuatan di salah satu kerangka kerja ini, keputusan benar-benar bermuara pada fitur utama masing-masing.

Vue.js sekarang digunakan oleh perusahaan seperti Baidu, GitLab, dan Alibaba untuk kebutuhan mereka.

Cara Kerja Aplikasi Satu Halaman

SPA memiliki desain yang lugas. Baik teknologi rendering sisi klien dan sisi server digunakan.

Di situs web non-SPA, saat Anda memasukkan URL ke browser, browser mengirimkan permintaan ke server dan menerima halaman HTML sebagai tanggapan.

Di situs web SPA, server hanya mengirimkan dokumen HTML pada permintaan awal dan data JSON pada permintaan berikutnya. Ini menunjukkan bahwa SPA akan menulis ulang konten halaman saat ini daripada memuat ulang seluruh situs web.

Singkatnya, fungsi SPA seperti ini:

1. Klien pertama-tama membuat koneksi dengan server dan memperoleh konten halaman, yang terutama terdiri dari kode HTML, CSS, dan bundel JavaScript yang terdiri dari semua skrip yang diperlukan untuk menjalankan logika aplikasi.
2. Tindakan pengguna mengaktifkan eksekusi JavaScript yang relevan, yang kemudian membuat permintaan AJAX ke server. Data biasanya dalam format JSON dan tidak memerlukan penyegaran halaman web penuh.

Alih-alih teknik normal browser meluncurkan halaman yang sama sekali baru, Aplikasi Halaman Tunggal berinteraksi dengan pengguna dengan secara paksa memodifikasi halaman web yang ada dengan data baru dari server web. Browser mengambil kode HTML, JavaScript, dan CSS yang diperlukan, atau sumber daya lain yang sesuai, dan menambahkannya ke halaman sesuai kebutuhan.

Meskipun API histori HTML5 atau hash lokasi dapat digunakan untuk menyediakan kemampuan navigasi dan persepsi halaman logis yang berbeda dalam aplikasi web, halaman tersebut tidak memuat ulang setiap saat selama prosedur dan tidak mentransfer kontrol ke halaman lain.

Jika Anda ingin melihat contoh Aplikasi Satu Halaman beraksi, buka tautan ini dan klik halaman utama, daftar kursus terbaru, dan menu teratas. Ketika Anda melakukannya, Anda akan melihat bahwa halaman tidak sepenuhnya dimuat ulang, hanya data baru yang dikirim melalui kabel saat pengguna berpindah ke seluruh aplikasi.

Ini adalah contoh SPA.

Untuk Siapa SPA Paling Cocok?

Karena manfaat SPA, mereka sekarang menjadi solusi pilihan dalam banyak keadaan.

Mereka unggul dalam proyek yang melibatkan berbagai teknologi web, di mana kinerja dan pengalaman pengguna yang menyenangkan lebih penting daripada konten.

Ada banyak pemain besar yang menggunakan SPA. Facebook, Gmail, Google Maps, Netflix, dan Paypal adalah beberapa contoh paling menonjol dari jenis teknologi ini (lihat di bawah).

Mengapa pengujian A/B Sulit pada SPA?

Ketiga kerangka kerja–React.js, Angular.js, dan Vue.js–sangat populer di kalangan pengembang JavaScript karena memungkinkan pengembangan antarmuka pengguna yang canggih yang menciptakan pengalaman pengguna yang lebih baik dan tingkat konversi yang lebih tinggi.

Mereka sangat diinginkan oleh pengembang karena

• Menyegarkan halaman tidak diperlukan
• Kecepatan memuat halaman lebih cepat
• Interaksinya kaya dan lancar
• Transfer data berkurang
• Potongan yang dapat digunakan kembali memungkinkan pengembangan lebih cepat
• Komunitas pengembang sudah mapan

Mereka juga merupakan sumber daya masuk bagi siapa saja yang memulai SPA baru.

Namun, ada satu kelemahan utama: karena cara kerja kerangka kerja ini, alat pengujian A/B sisi klien kesulitan untuk bekerja dengan benar .

Saat seseorang menjelajahi laman web di SPA, laman–termasuk URL–tidak disegarkan . Status halaman bervariasi dengan setiap interaksi pengguna (misalnya, elemen berbeda yang terlihat di layar).

Karena alat pengujian A/B biasanya hanya melakukan penyesuaian sekali selama pemuatan halaman awal, interaksi selanjutnya ini tidak diperhitungkan.

Berikut adalah dua skenario umum:

1. Jika Anda mengaktifkan tampilan halaman di SPA, Anda akan menerima tampilan halaman saat seseorang mengunjungi URL, tetapi bukan yang kedua jika mereka menjelajah di halaman lain tempat tampilan halaman diaktifkan. Ini karena materi sedang dimuat ke halaman saat ini daripada halaman baru.
2. Jika Anda mencoba membatasi acara ke URL tertentu , Anda akan mengalami masalah yang sama. Alat pengujian A/B akan "percaya" bahwa alat tersebut tetap berada di halaman yang sama saat pertama kali dimuat, meskipun pengguna mengira mereka berada di halaman yang berbeda. Karena potongan dipindahkan masuk dan keluar dari situs, mungkin ada kesulitan memantau klik atau peristiwa lainnya.

Untuk merender pengalaman, perangkat lunak pengujian A/B sisi klien dan platform personalisasi mengandalkan pemuatan halaman yang lengkap.

Karena konsep ini tidak ada saat menggunakan kerangka SPA seperti React, Angular atau Vue, menentukan apakah konten baru telah ditambahkan ke halaman atau status konten yang ada telah berubah – dan, yang lebih penting, kapan harus menyuntikkan konten yang disesuaikan – menjadi lebih sulit.

Jadi alat pengujian A/B harus dapat mengenali konteks pengunjung, seperti apakah mereka telah tiba di daftar produk, detail, atau halaman keranjang, dan pada titik mana materi baru harus disediakan.

Ini berarti tim teknologi harus terus mengikuti perubahan komponen React SPA atau Angular SPA yang termodulasi, serta memperbarui pengalaman yang memengaruhi komponen tersebut secara real-time.

Setiap interaksi pengguna di React.js, misalnya, menyebabkan satu atau lebih elemen UI di-refresh, menghapus semua perubahan yang dibuat oleh solusi pengujian A/B.

Pengujian Sisi Klien vs. Pengujian Sisi Server pada SPA

Dalam hal pengujian A/B pada SPA, ada dua opsi:

1. Mengisolasi berbagai "status" aplikasi yang ingin Anda uji, lalu mengaturnya sehingga ketika setiap "status" ditampilkan, API dipanggil untuk melakukan perubahan yang sesuai. Ini disebut aktivasi bersyarat dan dilakukan di sisi klien .

Beberapa contoh "status" termasuk menampilkan formulir berlangganan, memuat daftar hasil pencarian, dan sebagainya.

2. Hardcoding modifikasi, di sisi server , atau penerapan khusus untuk setiap pengalaman baru.

Kedua opsi ini dipengaruhi oleh kerangka SPA yang digunakan. Jadi, seperti yang sudah Anda duga, mereka membutuhkan banyak kerja sama antara tim teknis dan pemasar untuk tetap bekerja dengan baik.

Sekarang, mari kita bahas kedua opsi ini dan lihat apa yang harus dilakukan tim agar berhasil.

Aktivasi Bersyarat di Sisi Klien

Jika Anda masih harus melakukan pengujian sisi klien pada aplikasi SPA, ada solusinya.

Untuk memastikan bahwa skrip pengujian hanya dijalankan ketika aplikasi mencapai keadaan yang diinginkan, pengembang web dapat menggunakan fitur yang disebut mode aktivasi bersyarat .

Jika Anda tidak terbiasa dengan aktivasi bersyarat, ini adalah konsep sederhana untuk dipahami.

Aktivasi bersyarat, pada dasarnya, memberi Anda kemampuan untuk menentukan kapan eksperimen harus diaktifkan selain melalui metode standarnya untuk melakukannya pada penyegaran halaman.

Ini dapat dicapai dengan menulis sedikit JavaScript. Ada dua cara untuk melakukannya.

1. Fungsi Polling

Fungsi polling adalah cara paling dasar untuk menggunakan aktivasi bersyarat. Fungsi memindai halaman setiap 50 md hingga elemen tertentu muncul — ini bisa berupa modal, div, atau bahkan seluruh halaman.

Eksperimen dimulai ketika elemen muncul.

Platform pengujian A/B menghasilkan beberapa baris JavaScript untuk Anda modifikasi bergantung pada elemen mana yang Anda inginkan untuk dicari oleh fungsi polling.

Eksperimen diaktifkan setelah fungsi dievaluasi ke TRUE .

2. Fungsi Panggilan Balik

Eksekusi fungsi callback mirip dengan fungsi polling, tetapi menambahkan beberapa fleksibilitas.

Fungsi ini memungkinkan Anda memasukkan kondisi JavaScript apa pun yang Anda inginkan, dan jika dievaluasi ke TRUE , untuk memulai eksperimen.

Sementara fungsi polling terus-menerus melakukan ping ke halaman untuk melihat apakah ada elemen tertentu, fungsi callback lebih pasif dan bergantung pada event handler.

Pengujian Sisi Server

Saat Anda melakukan pengujian sisi server, tidak ada perubahan yang dibuat di tingkat browser. Sebaliknya, parameter variasi eksperimen ("Pengguna 1 melihat Variasi A") ditentukan di tingkat server dan dihubungkan langsung ke aplikasi JavaScript melalui penyedia layanan sehingga lebih mudah untuk menguji konten dinamis yang lebih rumit yang melampaui batas statis antarmuka pengguna situs web.

Ambil contoh, aplikasi media sosial yang sebagian besar adalah SPA. Sementara pengujian sisi klien frontend dapat digunakan untuk bereksperimen dengan ini, itu jauh lebih rumit karena konten dinamis yang terlibat, oleh karena itu beralih ke pengujian sisi server membuat prosesnya lebih mudah.

Contoh Tes A/B pada SPA

Apa saja contoh pengujian A/B di dunia nyata pada aplikasi satu halaman yang dapat Anda temui?

Mengubah Gambar di Landing Page

Katakanlah Anda perlu menetapkan eksperimen pada SPA untuk menampilkan gambar dinamis kepada 50% audiens yang membuka halaman tertentu. Kerangka SPA yang digunakan dalam contoh ini adalah React.js yang berarti halaman berubah dan gambar diganti secara teratur.

Jika Anda menampilkan gambar varian, masalah kedipan mungkin terjadi, yang berarti urutan gambar asli-varian gambar-gambar asli akan diamati.

Masalah ini dapat dihindari sepenuhnya dengan memicu polling saat halaman landing tertentu dimuat.

Menguji Salinan Tambahan di bawah CTA

Eksperimen lain di situs SPA yang dibuat dengan Angular.js mungkin melibatkan menampilkan baris salinan tambahan di bawah CTA utama kepada 30% audiens target.

Dalam contoh ini, Versi A akan menampilkan baris salinan tambahan di bawah CTA utama, sedangkan Versi B tidak. Kami akan mengirimkan 30% lalu lintas kami ke Versi A dan 70% ke Versi B, lalu membandingkan hasilnya untuk melihat apakah ada perbedaan yang signifikan dalam rasio konversi.

Karena situs web dibuat dengan Angular.js, elemen-elemennya diubah secara teratur. Acara panggilan balik di sini dapat membantu kami menampilkan perubahan pada varian.

Menampilkan Voucher Hadiah

Dalam contoh ini, mari kita asumsikan bahwa ketika pengguna menambahkan produk merek premium ke keranjang mereka, kami ingin voucher hadiah eksklusif ditampilkan. Dengan syarat ketika pengguna mengeluarkan produk premium dari keranjang, voucher digesek dari halaman.

1. Apa yang perlu terjadi di sini adalah ketika pengguna melakukan tindakan yang diperlukan, peristiwa aktivasi manual harus dikirim. Eksperimen akan diaktifkan sebagai hasil dari peristiwa ini.
2. Peristiwa aktivasi harus diaktifkan saat pengguna menghapus produk premium dari keranjang, menonaktifkan eksperimen.
3. Eksperimen perlu diaktifkan kembali untuk menampilkan produk premium jika konsumen menambahkannya lagi.

Menampilkan Tagline di bawah CTA 'Beli Sekarang'

Jika Anda ingin menampilkan tagline unik di bawah tombol CTA 'Beli Sekarang', Anda dapat mengaktifkan eksperimen jika Anda mendorong peristiwa aktivasi pada perubahan riwayat.

Ini karena halaman yang berisi tombol CTA 'Beli Sekarang' tidak akan dimuat pada awalnya.

Bagaimana Konversi Melewati Masalah Pengujian pada SPA

Eksperimen pada SPA perlu ditangani secara berbeda dari eksperimen lainnya. Karena skrip Konversi tidak dapat membaca URL yang dinavigasi oleh pengunjung situs web, skrip tersebut tidak dapat memicu eksperimen dengan metode standar.

Jadi, inilah cara melakukannya.

Mulailah dengan memasang kode pelacakan Konversi seperti yang dijelaskan dalam artikel ini.

Kemudian, terapkan salah satu dari 3 metode di bawah ini:

1. Memicu Polling

Seperti disebutkan, polling adalah proses di mana kondisi pengalaman diuji untuk menentukan apakah pengalaman tersebut harus dipicu.

Ini termasuk memantau URL pengunjung, Kondisi Audiens, atau kondisi JavaScript untuk menjalankan pengujian.

Polling biasanya dipicu oleh Convert ketika halaman baru dimuat. Di SPA, biasanya, tidak ada halaman baru yang dimuat di aplikasi web.

Dalam hal ini, Anda memerlukan kode berikut untuk memulai polling:

 jendela._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

Anda harus menentukan acara terbaik di SPA Anda untuk memicu kode di atas. Contoh kode yang harus ditambahkan pada bagian Pengaturan Proyek > JavaScript Proyek Global.

 console.log('SPA/Konversi Kode dalam Javascript Proyek Global yang dieksekusi');
if (!window.globalExecutedTs) {
window.globalExecutedTs = benar;
var oldPushState = window.history.pushState;
window.history.pushState = fungsi(data) {
mencoba {
setTimeout(fungsi() {
kembalikan oldPushState.apply(ini, argumen);
console.log('konversi diaktifkan dari pushstate');
jendela._conv_q = _conv_q || [];
window._conv_q.push(["jalankan", "benar"]);
}, 0);
} tangkap (e) {
console.log(e);
}
};
window.onpopstate = function(event) {
setTimeout(fungsi() {
console.log('konversi diaktifkan dari popstate');
jendela._conv_q = _conv_q || [];
window._conv_q.push(["jalankan", "benar"]);
}, 0);
};
}

2. Gunakan Ketentuan JavaScript di Area Situs

Karena skrip Konversi tidak dapat membaca perubahan URL di SPA, Anda harus menggunakan ketentuan JavaScript alih-alih ketentuan kecocokan URL untuk memicu eksperimen.

Temukan penjelasan mendalam tentang cara melakukannya di artikel berikut.

3. Mengaktifkan Eksperimen Secara Manual

Anda dapat memicu eksperimen secara manual setelah Anda menentukan bahwa aliran tertentu telah terjadi. Dengan menggunakan metode ini, Area Situs dan Kondisi Audiens masih akan diuji setelah memicu polling dengan kode. Lihat artikel ini untuk informasi lebih detail tentang mengaktifkan eksperimen secara manual.

Dengan 3 metode di atas, Anda seharusnya dapat memicu eksperimen pada saat yang tepat di aplikasi SPA.

Apakah Konversi Meningkatkan Risiko Berkedip di SPA?

Jawaban singkat, tidak.

Semua kerangka kerja SPA kompatibel dengan teknologi anti-flicker Convert. Konversi memanfaatkan teknologi SmartInsert ^TM di belakang layar untuk memastikan bahwa modifikasi eksperimen diterapkan atau diterapkan kembali pada waktu yang tepat di SPA Anda, bahkan selama pemuatan ulang halaman dinamis.

Kami merekomendasikan membaca whitepaper kami tentang efek kedipan untuk mempelajari lebih lanjut tentangnya dan mengapa Anda harus menghindarinya dengan cara apa pun.

Masalah Umum saat Pengujian A/B di Situs Aplikasi Halaman Tunggal

Seperti yang Anda lihat, ada beberapa hal yang perlu diingat saat menjalankan tes di situs SPA. Setelah Anda membahas kerangka kerja yang digunakan, metode pengujian alat, dan peristiwa pemicu, maka masalah utamanya biasanya dengan elemen pengujian yang tidak dimuat ulang saat halaman atau tampilan baru ditampilkan di browser.

Hal ini dapat disebabkan oleh beberapa hal:

1. Perubahan Uji Muncul pada Tampilan Halaman Pertama tetapi Tidak pada Tampilan Berikutnya

Terkadang perubahan yang ingin Anda tampilkan hanya ditampilkan pada halaman pertama yang Anda muat di browser, tetapi tidak pada tampilan berikutnya. Ini karena bagian skrip Konversi yang mengevaluasi eksperimen dan mengaktifkannya tidak berjalan saat mengakses tampilan baru atau "halaman" situs.

2. Perubahan yang Muncul di Editor Visual Tidak Muncul Saat Mempratinjaunya Di Luarnya

Terkadang dapat terjadi bahwa perubahan yang dibuat dengan Editor Visual tidak ditampilkan di luar pratinjau editor.

Sebagian besar kerangka kerja SPA tidak menggunakan DOM API dan sebagai gantinya menggunakan metode mereka sendiri untuk menerapkan perubahan pada halaman. Ini menyebabkan DOM tidak sinkron saat diperbarui oleh SPA. Ini biasa terjadi di React dan Angular, menyebabkan pemilih CSS yang ditemukan pada kode Jquery tidak berfungsi.

3. Perubahan Terus Muncul di 'Tampilan' Selanjutnya

Dalam skenario ini, perubahan eksperimen ditampilkan dalam tampilan (halaman) yang benar. Namun, saat mengunjungi tampilan (halaman) baru, perubahan tersebut tidak hilang. Ini terjadi karena di situs SPA, perubahan tidak dihapus saat memuat ulang halaman baru.

Skrip Konversi menghapus kode yang ditambahkan saat kondisi eksperimen tidak cocok dengan tampilan berikutnya tempat perubahan diterapkan saat polling dipanggil. Namun, ini tidak cukup karena perubahan jquery tidak akan hilang bahkan saat menghapus kode eksperimen halaman.

Anda harus menjalankan kode yang mengembalikan perubahan yang dibawa oleh eksperimen.

Giliran Anda: Hindari Kesalahan Ini Saat Mengoptimalkan SPA Anda

Karena kemajuan dalam cara informasi diproses dan disediakan, SPA mungkin menjadi lebih umum diterima, tetapi penting untuk dicatat bahwa teknologi baru ini memiliki masalah saat berintegrasi dengan platform pengoptimalan dan eksperimen, yang biasanya bekerja dengan penyiapan yang lebih klasik.

Kami berharap artikel ini telah membahas berbagai komponen SPA serta beberapa solusi untuk mengatasi hambatan tersebut dalam pencarian Anda untuk memberikan pengunjung pengalaman digital yang lebih cepat, lebih intuitif, dan dipersonalisasi.

Namun, Anda akan lebih baik bekerja dengan penyedia solusi yang dapat memberikan dukungan tanpa batas untuk SPA, seperti kemampuan untuk mendeteksi perubahan dalam komponen UI dan jenis halaman untuk kustomisasi dinamis tanpa mengubah kode sumber. Seperti yang ada di kotak di bawah ini.