Menginstal Progressive Web App (PWA) dapat memudahkan pengguna untuk menemukan dan menggunakannya. Bahkan dengan promosi browser, beberapa pengguna tidak menyadari bahwa mereka dapat menginstal PWA, sehingga memberikan pengalaman dalam aplikasi yang dapat digunakan untuk mempromosikan dan mengaktifkan penginstalan PWA Anda bisa sangat membantu.
![Screenshot tombol instal sederhana di PWA.](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-simple-instal-3b0b6b042e079.png?authuser=8&hl=id)
Artikel ini tidaklah lengkap, tetapi menawarkan titik awal untuk berbagai cara dalam mempromosikan penginstalan PWA Anda. Terlepas dari pola, atau pola yang Anda gunakan, semuanya mengarah ke kode yang sama yang memicu alur penginstalan, yang didokumentasikan dalam Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri.
Praktik terbaik
Ada beberapa praktik terbaik yang berlaku, apa pun pola promosi yang Anda gunakan di situs.
- Pertahankan promosi di luar alur {i>user journey<i} Anda. Misalnya, di halaman login PWA, tempatkan pesan ajakan (CTA) di bawah formulir login dan tombol kirim. Penggunaan pola promosi yang mengganggu akan mengurangi kegunaan PWA dan berdampak negatif pada metrik engagement.
- Sertakan kemampuan untuk menolak atau menolak promosi. Ingat preferensi pengguna jika mereka melakukan ini dan hanya minta ulang jika ada perubahan hubungan pengguna dengan konten Anda, seperti jika mereka login atau menyelesaikan pembelian.
- Gabungkan teknik di berbagai bagian PWA Anda, tetapi berhati-hatilah agar tidak membebani atau mengganggu pengguna dengan promosi penginstalan.
- Hanya tampilkan promosi setelah
peristiwa
beforeinstallprompt
diaktifkan.
Promosi browser otomatis
Jika kriteria tertentu terpenuhi, sebagian besar browser akan otomatis menunjukkan kepada pengguna bahwa Progressive Web App Anda dapat diinstal. Misalnya, Chrome desktop menampilkan tombol instal di omnibox.
![Screenshot omnibox dengan indikator instal yang terlihat.](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-omnibox-a-vi-4d92411b4427d.png?authuser=8&hl=id)
![Screenshot promosi penginstalan yang disediakan browser.](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-browser-provi-bd3e42c38ef14.png?authuser=8&hl=id)
Chrome untuk Android menampilkan infobar mini kepada pengguna, meskipun hal ini dapat
dicegah dengan memanggil preventDefault()
pada peristiwa beforeinstallprompt
.
Jika Anda tidak memanggil preventDefault()
, banner akan ditampilkan saat pengguna pertama kali mengunjungi situs Anda dan memenuhi kriteria kemampuan penginstalan di Android, lalu ditampilkan lagi setelah sekitar 90 hari.
Pola promosi antarmuka pengguna
Pola promosi antarmuka pengguna dapat digunakan untuk hampir semua jenis PWA dan muncul di tempat-tempat seperti banner dan navigasi situs. Seperti jenis pola promosi lainnya, penting untuk mengetahui konteks pengguna untuk meminimalkan gangguan pada perjalanan pengguna.
Situs yang mempertimbangkan dengan cermat kapan UI promosi memicu mencapai jumlah penginstalan yang lebih besar dan menghindari mengganggu perjalanan pengguna yang tidak tertarik untuk melakukan penginstalan.
Tombol instal sederhana
UX yang paling sederhana adalah menyertakan tombol 'Instal' atau 'Dapatkan aplikasi' di lokasi yang sesuai dalam konten web Anda. Pastikan tombol tersebut tidak memblokir fungsi penting lainnya dan tidak mengganggu perjalanan pengguna dalam aplikasi Anda.
![Tombol instal kustom..](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-c31a48092e91c.png?authuser=8&hl=id)
Header tetap
Ini adalah tombol instal yang merupakan bagian dari header situs Anda. Konten header lainnya
sering kali menyertakan branding situs seperti logo dan menu
hamburger. Header dapat berupa position:fixed
atau tidak, bergantung pada fungsi situs dan kebutuhan pengguna.
![Tombol instal kustom di header.](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-he-ae67d1ee86ff3.png?authuser=8&hl=id)
Jika digunakan dengan tepat, mempromosikan penginstalan PWA dari header situs Anda adalah cara yang bagus untuk memudahkan pelanggan yang paling setia untuk kembali ke pengalaman Anda. Piksel di header PWA Anda sangat berharga, jadi pastikan pesan ajakan (CTA) penginstalan Anda memiliki ukuran yang tepat, lebih penting daripada konten header lainnya, dan tidak mengganggu.
![Tombol instal kustom di header](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-he-37ffcc16ba69b.png?authuser=8&hl=id)
Pastikan Anda:
- Jangan tampilkan tombol instal kecuali jika
beforeinstallprompt
telah diaktifkan. - Evaluasi nilai kasus penggunaan yang diinstal untuk pengguna Anda. Pertimbangkan penargetan selektif untuk hanya menampilkan promosi Anda kepada pengguna yang cenderung akan mendapatkan manfaat dari promosi tersebut.
- Menggunakan ruang header yang berharga secara efisien. Pertimbangkan hal lain yang akan membantu untuk ditawarkan kepada pengguna di header, dan pertimbangkan prioritas promosi penginstalan dibandingkan opsi lainnya.
Menu navigasi
![Tombol instal khusus di menu navigasi](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-na-58019edc6068c.png?authuser=8&hl=id)
Menu navigasi adalah tempat yang tepat untuk mempromosikan penginstalan aplikasi karena pengguna yang membuka menu menandakan interaksi dengan pengalaman Anda.
Pastikan Anda:
- Hindari mengganggu konten navigasi yang penting. Tempatkan promosi penginstalan PWA di bawah item menu lainnya.
- Tawarkan presentasi singkat yang relevan tentang mengapa pengguna akan mendapatkan manfaat dari menginstal PWA Anda.
Halaman landing
Tujuan halaman landing adalah untuk mempromosikan produk dan layanan Anda, jadi ini adalah salah satu tempat yang tepat untuk memperluas jangkauan saat mempromosikan manfaat penginstalan PWA Anda.
![Permintaan penginstalan kustom di halaman landing.](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-prompt-a-5843b12d5bc42.png?authuser=8&hl=id)
Pertama, jelaskan proposisi nilai situs Anda, lalu beri tahu pengunjung apa yang akan mereka dapatkan dari penginstalan.
Pastikan Anda:
- Menarik fitur yang paling penting bagi pengunjung dan tekankan kata kunci yang mungkin telah mengarahkan mereka ke halaman landing Anda.
- Pastikan promosi penginstalan dan pesan ajakan (CTA) Anda menarik, tetapi hanya setelah Anda membuat proposisi nilai yang jelas. Bagaimanapun juga, ini adalah halaman landing Anda.
- Sebaiknya tambahkan promosi penginstalan di bagian aplikasi tempat pengguna menghabiskan sebagian besar waktu mereka.
Instal banner
Sebagian besar pengguna pernah melihat banner penginstalan di platform seluler dan terbiasa dengan interaksi yang ditawarkan oleh banner. Banner harus digunakan dengan hati-hati karena dapat mengganggu pengguna.
![Banner instal kustom di bagian atas halaman.](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-to-3aa411a9214c1.png?authuser=8&hl=id)
Pastikan Anda:
- Tunggu hingga pengguna menunjukkan minat pada situs Anda sebelum menampilkan banner. Jika pengguna menutup banner, jangan tampilkan lagi kecuali pengguna memicu peristiwa konversi yang menunjukkan tingkat interaksi yang lebih tinggi dengan konten Anda, seperti pembelian di situs e-commerce atau mendaftar akun.
- Berikan penjelasan singkat tentang manfaat penginstalan PWA Anda di banner. Misalnya, Anda dapat membedakan penginstalan PWA dari aplikasi iOS/Android dengan menyebutkan bahwa PWA hampir tidak menggunakan penyimpanan di perangkat pengguna atau bahwa PWA akan langsung diinstal tanpa pengalihan toko.
UI sementara
UI sementara, seperti pola desain Snackbar, akan memberi tahu pengguna dan memungkinkan mereka menyelesaikan tindakan dengan mudah, dalam hal ini, menginstal aplikasi. Jika digunakan dengan benar, pola UI semacam ini tidak mengganggu alur penggunaan, dan biasanya otomatis ditutup jika diabaikan oleh pengguna.
![Banner instal kustom sebagai snackbar.](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-sn-fc0c5df5e9391.png?authuser=8&hl=id)
Tampilkan snackbar setelah beberapa interaksi dengan aplikasi Anda. Jika muncul saat halaman dimuat, atau di luar konteks, snackbar dapat dengan mudah terlewatkan, atau menyebabkan kelebihan beban kognitif. Jika ini terjadi, pengguna akan menutup semua yang mereka lihat. Perlu diingat, pengguna baru di situs Anda mungkin belum siap untuk menginstal PWA. Oleh karena itu, sebaiknya tunggu hingga Anda mendapatkan sinyal minat yang kuat dari pengguna sebelum menggunakan pola ini, misalnya, kunjungan berulang, login pengguna, atau peristiwa konversi serupa.
![Banner instal kustom sebagai snackbar.](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-sn-b294fb32a9249.png?authuser=8&hl=id)
Pastikan Anda:
- Tampilkan snackbar selama antara 4 dan 7 detik agar pengguna memiliki cukup waktu untuk melihat dan bereaksi terhadapnya, tanpa menghalangi pengguna.
- Hindari menampilkannya di atas UI sementara lainnya seperti banner, dll.
- Tunggu hingga Anda memiliki sinyal minat yang kuat dari pengguna sebelum menggunakan pola ini, misalnya, kunjungan berulang, login pengguna, atau peristiwa konversi serupa.
Setelah konversi
Segera setelah peristiwa konversi pengguna, misalnya setelah pembelian di situs e-commerce, merupakan peluang yang sangat baik untuk mempromosikan penginstalan PWA Anda. Pengguna secara jelas berinteraksi dengan konten Anda, dan konversi sering menandakan bahwa pengguna akan berinteraksi dengan layanan Anda lagi.
![Promosi penginstalan setelah konversi.](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-con-effd5a7b38e75.png?authuser=8&hl=id)
Perjalanan pemesanan atau checkout
Menampilkan promosi penginstalan selama atau setelah perjalanan berurutan, seperti setelah pemesanan atau alur checkout. Jika menampilkan promosi setelah pengguna menyelesaikan perjalanan, sering kali Anda dapat membuatnya lebih terlihat karena perjalanan selesai.
![Promosi penginstalan setelah perjalanan pengguna.](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-a-u-2e0b33d2ff618.png?authuser=8&hl=id)
Pastikan Anda:
- Sertakan pesan ajakan (CTA) yang relevan. Pengguna mana yang akan mendapat manfaat dari menginstal aplikasi Anda, dan mengapa? Bagaimana hal tersebut relevan dengan perjalanan yang sedang mereka lakukan saat ini?
- Jika merek Anda memiliki penawaran unik untuk pengguna aplikasi yang diinstal, sebutkan penawaran tersebut.
- Hindari promosi di luar langkah berikutnya dalam perjalanan Anda atau Anda dapat berdampak negatif pada rasio penyelesaian perjalanan. Pada contoh e-commerce di atas, perhatikan bagaimana pesan ajakan (CTA) utama untuk checkout berada di atas promosi penginstalan aplikasi.
Alur daftar, login, atau logout
Promosi ini adalah kasus khusus untuk pola promosi perjalanan yang membuat kartu promosi dapat lebih terlihat.
![Tombol instal kustom di halaman pendaftaran.](https://web.developers.google.cn/static/articles/promote-install/image/a-custom-install-button-401ffb4e23752.png?authuser=8&hl=id)
Halaman ini biasanya hanya dilihat oleh pengguna yang aktif berinteraksi, di mana proposisi nilai PWA Anda sudah ditetapkan. Juga sering kali tidak banyak konten berguna lainnya yang dapat ditempatkan di laman ini. Dengan demikian, pesan ajakan (CTA) yang lebih besar tidak akan terlalu mengganggu selama hal tersebut tidak menghambat.
Pastikan Anda:
- Hindari mengganggu perjalanan pengguna di dalam formulir pendaftaran. Jika menggunakan proses multi-langkah, Anda mungkin ingin menunggu hingga pengguna menyelesaikan perjalanan.
- Promosikan fitur yang paling relevan kepada pengguna yang mendaftar.
- Pertimbangkan untuk menambahkan promosi penginstalan tambahan di area login aplikasi Anda.
Pola promosi inline
Teknik promosi inline memadukan promosi dengan konten situs. Hal ini sering kali lebih halus daripada promosi di antarmuka pengguna yang memiliki konsekuensi. Anda ingin promosi Anda cukup menarik sehingga pengguna yang tertarik akan melihatnya, tetapi tidak terlalu mengurangi kualitas pengalaman pengguna Anda.
Dalam Feed
Promosi penginstalan dalam feed akan muncul di antara artikel berita atau daftar kartu informasi lainnya di PWA Anda.
![Promosi penginstalan dalam feed konten.](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-with-06735d525d2b5.png?authuser=8&hl=id)
Tujuan Anda adalah menunjukkan kepada pengguna cara mengakses konten yang mereka nikmati dengan lebih mudah. Fokuskan untuk mempromosikan fitur dan fungsi yang akan membantu pengguna Anda.
Pastikan Anda:
- Batasi frekuensi promosi agar tidak mengganggu pengguna.
- Berikan pengguna kemampuan untuk menutup promosi.
- Ingat pilihan pengguna untuk menutupnya.