Panduan Praktis Untuk Tur Produk Di Aplikasi React

Seperti yang dinyatakan di Appcues:

“Tur produk — terkadang disebut penelusuran produk — memperkenalkan pengguna ke produk baru dan membantu mereka menemukan arahnya.”

Biasanya, saat perlu menampilkan fitur baru atau fungsionalitas UI kompleks di aplikasi web, tim sukses pelanggan akan mengirim email kampanye ke semua penggunanya. Meskipun ini adalah cara yang bagus untuk menciptakan kesadaran seperti itu, beberapa pengguna mungkin tidak memiliki kesempatan untuk melihat fitur yang ditambahkan; karenanya, tujuan email akan dikalahkan.

Cara yang lebih baik untuk meningkatkan kesadaran pengguna tentang fitur tertentu dalam aplikasi web adalah dengan mengintegrasikan kiat UI yang ringkas dan cukup jelas, yang disebut tur produk.

Tur produk memandu pengguna ke momen "a-ha", atau menampilkan fitur bernilai tinggi yang kurang dimanfaatkan. Tur produk dapat menjadi alat yang ampuh untuk memperkenalkan produk baru kepada pengguna dan membantu mereka menemukan arah. Mereka dapat menarik perhatian pada peluncuran produk, penawaran promo, dan penjualan produk.

Tetapi ketika dilakukan dengan salah, tur produk bisa berakhir seperti pengemudi kursi belakang. Dan tidak ada yang suka pengemudi kursi belakang, bukan?

Dalam tutorial ini, Anda akan belajar tentang apa itu tur produk dan jenis paket tur produk di ekosistem React, beserta pro dan kontranya.

Jika Anda sedang membangun produk yang menghadap pelanggan menggunakan React, maka Anda mungkin tertarik untuk mengimplementasikannya di aplikasi React Anda. Pada akhirnya, kita akan membangun tur produk untuk UI keranjang belanja sederhana menggunakan React Joyride.

Kami tidak akan membahas dasar-dasar sintaks React dan JavaScript, tetapi Anda tidak harus menjadi ahli dalam salah satu bahasa ini untuk mengikutinya.

Panduan Tur Produk

Tur produk adalah aspek rumit dari aplikasi web, yang memerlukan beberapa keahlian pengalaman pengguna untuk mendorong hasil. Saya akan merekomendasikan melalui tips Appcues untuk tur produk. Berikut ini adalah beberapa panduan untuk dipertimbangkan.

Tidak pernah Kuliah

Menempatkan banyak tur di halaman web memang menggoda. Tetapi pengguna biasanya tidak tertarik pada tutorial pengantar yang panjang. Mereka menjadi cemas ketika harus mencerna banyak informasi sebelum dapat menggunakan fitur dalam aplikasi.

Memecahnya

Jangan mengajarkan semuanya. Fokus pada satu fitur, dan buat tur dua hingga tiga langkah untuk menampilkan fitur tersebut. Tampilkan banyak tur kecil, daripada satu tur panjang. Prioritaskan urutan mereka.

Tambahkan nilai

Apakah Anda menikmati mengambil tur Anda sendiri? Bagaimana dengan rekan satu tim Anda? Sajikan tur sedemikian rupa sehingga pengguna akan mengerti. Nilai pamer, bukan cerita.

Sekarang setelah kita mengetahui nilai tur produk dan melihat beberapa panduan untuk membangunnya, mari membahas beberapa pustaka React untuk tur produk dan mempelajari cara menggunakannya.

Hanya ada beberapa library berbasis React untuk mengimplementasikan tur. Dua yang paling populer adalah React Tour dan React Joyride.

Tur Bereaksi

React Tour memiliki sekitar 1.600 bintang di GitHub dan sedang dikembangkan secara aktif. Kasus penggunaan terbaik untuk React Tour adalah tur produk sederhana yang memerlukan sedikit penyesuaian. Demo tersedia.

Bagaimana itu bekerja

Dengan React Tour, Anda meneruskan pemilih className dan konten untuk setiap langkah ke komponen. Pustaka akan merender antarmuka pengguna tur berdasarkan klik tombol, atau setelah Anda memasang komponen. Sederhana untuk halaman statis dan UI:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ... ]

kelebihan

• React Tour adalah yang terbaik untuk tur yang membutuhkan sedikit penyesuaian.
• Ini berfungsi dengan baik untuk konten statis dan untuk konten dinamis yang label pemilihnya selalu ada di UI.
• Penggemar komponen gaya mungkin menganggapnya menarik karena memiliki ketergantungan yang kuat pada komponen gaya.

Kontra

• Jika proyek Anda tidak memiliki ketergantungan pada komponen gaya, maka Anda mungkin tidak akan mudah menerapkannya.
• Kreativitas Anda akan terbatas karena tidak mendukung kustomisasi.

Bereaksi Joyride

Pustaka tur produk utama lainnya adalah React Joyride, yang memiliki sekitar 3.100 bintang di GitHub dan juga dipelihara secara aktif.

Bagaimana itu bekerja

Kami melewati className sebagai target dan konten. Negara menyimpan tur. Komponen Joyride menggunakan langkah-langkah sebagai alat peraga.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return (

        
        ...
      
    );
  }
}

kelebihan

• Mengintegrasikan React Joyride dalam aplikasi web kurang kaku dibandingkan dengan React Tour, dan tidak memiliki ketergantungan yang kuat pada perpustakaan lain.
• Acara dan tindakan tersedia, yang mendorong penyesuaian.
• Ini sering ditingkatkan.

Kontra

• UI tidak seanggun React Tour.

Mengapa Bereaksi Joyride?

Tur produk, terutama untuk aplikasi web yang sangat besar, memerlukan penyesuaian , dan itu membedakan React Joyride dari React Tour. Contoh proyek yang akan kami buat menuntut beberapa kreativitas dan penyesuaian — oleh karena itu, kami akan menggunakan React Joyride.

Membangun Tur Produk Sederhana

Pertama, kita akan membuat tur React sederhana menggunakan props yang tersedia di React Joyride. Selanjutnya, kita akan menggunakan kait useReducer untuk mengotomatiskan proses tur.

Kloning cabang “standard-tour” di repositori GitHub, atau gunakan halaman web pilihan Anda, selama Anda bisa mengikutinya.

Instal paket dengan menjalankan npm install .

Untuk memulai aplikasi, jalankan npm run start .

Kami akan membahas langkah-langkah berikut:

• menentukan langkah-langkah tur;
• aktifkan opsi lewati di setiap langkah;
• mengubah label teks pada tombol dan tautan;
• menyesuaikan gaya seperti warna tombol dan perataan teks.

Kemudian, kami akan menambahkan beberapa fitur khusus:

• memulai tur secara otomatis;
• memulai tur secara manual (yaitu dengan tautan atau klik tombol);
• menyembunyikan suar yang berkedip.

Alat peraga di React Joyride memungkinkan kita untuk melakukan beberapa fungsi dasar.

Untuk tutorial ini, kami akan membuat tur produk dari UI yang ditunjukkan di bawah ini:

Tentukan Langkah Tur

Untuk memulainya, pastikan Anda menargetkan classNames tertentu yang akan menampung konten tur di halaman — yaitu, sesuai dengan apakah Anda akan menggunakan UI alih-alih UI keranjang belanja.

Di folder component , buat file Tour.js , dan tempel kode berikut ke dalamnya. Juga, pastikan bahwa nama kelas classNames ada di lembar gaya Anda. Sepanjang artikel ini, kami akan mengubah komponen Tour.js agar sesuai dengan tugas yang ada.

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

Apa yang telah kami lakukan hanyalah menentukan langkah tur kami dengan menargetkan classNames yang akan membentuk fondasi konten kami (teks). Properti content adalah tempat kita menentukan text yang ingin kita lihat saat tur dimulai.

Aktifkan Opsi Lewati di Setiap Langkah

Opsi lewati penting dalam kasus di mana pengguna tidak tertarik dengan tur tertentu. Kita dapat menambahkan fitur ini dengan menyetel prop showSkipButton ke true , yang akan melewati langkah-langkah selanjutnya. Selain itu, penyangga continuous berguna saat kita perlu menampilkan tombol Next di setiap langkah.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> ); };

Ubah Label Teks Pada Tombol Dan Tautan

Untuk mengubah label text pada tombol atau tautan, kami akan menggunakan prop locale . Prop locale memiliki dua objek, last dan skip . Kami menentukan tur last kami sebagai tur End tour , sementara skip adalah Close tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

Sesuaikan Gaya, Seperti Warna Tombol Dan Perataan Teks

Warna default tombol adalah merah, dan perataan teks selalu diatur dengan benar. Mari terapkan beberapa gaya khusus untuk mengubah warna tombol dan menyelaraskan teks dengan benar.

Kita melihat dalam kode kita bahwa styles prop adalah sebuah objek. Ia memiliki objek lain dengan nilai unik, termasuk:

• tooltipContainer
  Kuncinya adalah textAlign , dan nilainya left .
• buttonNext
  Kuncinya adalah backgroundColor , dan nilainya green .
• buttonBack
  Kuncinya adalah marginRight , dan nilainya 10px .
• locale
  Kuncinya adalah last dan skip , dan nilainya masing-masing adalah End Tour dan Close Tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

Pustaka memaparkan beberapa alat peraga untuk digunakan pada elemen kami sebagai pengganti elemen default, beberapa di antaranya adalah:

• beaconComponent
• tooltipComponent

gunakan Peredam

Kami telah melihat cara membuat tur produk dan cara menyesuaikannya menggunakan berbagai alat peraga Joyride.

Masalah dengan props, bagaimanapun, adalah, ketika aplikasi web Anda diskalakan dan Anda membutuhkan lebih banyak tur, Anda tidak hanya ingin menambahkan langkah dan meneruskan props ke mereka. Anda ingin dapat mengotomatiskan proses dengan memastikan bahwa proses pengelolaan tur dikendalikan oleh fungsi, dan bukan hanya props . Oleh karena itu, kami akan menggunakan useReducer untuk mengubah proses membangun tur.

Di segmen ini, kita akan mengendalikan tur dengan menggunakan actions dan events , yang disediakan oleh perpustakaan melalui fungsi panggilan balik.

Untuk membuat proses ini terasa tidak terlalu menakutkan, kami akan memecahnya menjadi beberapa langkah, memungkinkan kami untuk membangun tur dalam potongan-potongan.

Kode sumber lengkap tersedia, tetapi saya menyarankan Anda untuk mengikuti panduan ini, untuk memahami cara kerjanya. Semua langkah kita akan dilakukan di file Tour.js di folder components .

Tentukan Langkah-langkahnya

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

Pada langkah pertama ini, kita mendefinisikan langkah kita dengan menargetkan classNames yang sesuai dan mengatur konten kita (teks).

Tentukan Keadaan Awal

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted };

Dalam langkah ini, kami mendefinisikan beberapa states penting, termasuk:

• Setel bidang run ke false , untuk memastikan bahwa tur tidak dimulai secara otomatis.
• Setel continuous prop ke true , karena kita ingin menampilkan tombolnya.
• stepIndex adalah nomor indeks, yang disetel ke 0 .
• Bidang steps diatur ke TOUR_STEPS yang kami nyatakan di langkah 1.
• Bidang key membuat tur dirender ulang saat tur dimulai ulang.

Kelola Negara Dengan Peredam

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; } };

Pada langkah ini, menggunakan pernyataan switch ketika case adalah START , kami mengembalikan status dan mengatur bidang run ke true . Juga, ketika case RESET , kami mengembalikan status dan mengatur stepIndex ke 0 . Selanjutnya, ketika case STOP , kami mengatur bidang run ke false , yang akan menghentikan tur. Terakhir, ketika case RESET , kami memulai kembali tur dan membuat tur baru.

Menurut events ( start , stop , dan reset ), kami telah mengirimkan status yang tepat untuk mengelola tur.

Dengarkan Perubahan Panggilan Balik dan Perubahan Status Pengiriman

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); } };

Menggunakan label EVENTS , ACTIONS , dan STATUS terbuka yang ditawarkan oleh React Joyride, kita mendengarkan event klik dan kemudian melakukan beberapa operasi bersyarat.

Pada langkah ini, ketika tombol tutup atau lewati diklik, kita menutup tur. Jika tidak, jika tombol berikutnya atau kembali diklik, kami memeriksa apakah elemen target aktif di halaman. Jika elemen target aktif, maka kita pergi ke langkah itu. Jika tidak, kami menemukan target langkah selanjutnya dan melakukan iterasi.

Autostart Tur Dengan useEffect

 useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); } }, []);

Pada langkah ini, tur dimulai secara otomatis saat halaman dimuat atau saat komponen dipasang, menggunakan kait useEffect .

Memicu Tombol Mulai

 const startTour = () => { dispatch({ type: "RESTART" }); };

Fungsi pada langkah terakhir ini memulai tur saat tombol start diklik, untuk berjaga-jaga jika pengguna ingin melihat tur lagi. Saat ini, aplikasi kami sudah diatur sehingga tur akan ditampilkan setiap kali pengguna me-refresh halaman.

Berikut kode terakhir untuk fungsionalitas tur di Tour.js :

 import React, { useReducer, useEffect } from "react"; import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; // Define the steps const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ]; // Define our state const INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS, }; // Set up the reducer function const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; } }; // Define the Tour component const Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> ); }; export default Tour; 

Kesimpulan

Kami telah melihat bagaimana membangun tur produk di UI web dengan React. Kami juga telah membahas beberapa panduan untuk membuat tur produk menjadi efektif.

Sekarang, Anda dapat bereksperimen dengan perpustakaan React Joyride dan menghasilkan sesuatu yang luar biasa di aplikasi web Anda berikutnya. Saya akan senang mendengar pandangan Anda di bagian komentar di bawah.

Sumber daya

• Dokumentasi, React Joyride
• “Tujuh Tur Produk Luar Biasa, dan Praktik Terbaik yang Mereka Ajari Kami”, Morgan Brown, Telepati
• “Panduan Utama untuk Tur dan Panduan Produk”, Margaret Kelsey, Appcues