Google Developers Indonesia Blog: E-commerce dengan kecepatan AMP

Unknown · 04 October 2017

Klien Fastcommerce yang berbasis di Brasil merasakan peningkatan konversi sebesar 15% di mobile dibandingkan halaman non-AMP mereka.
WompMobile menciptakan pengalaman mobile yang efektif untuk situs e-commerce dan mengalami kenaikan konversi sebesar 105% dan penurunan bounce rate sebesar 31% dengan halaman AMP.
Wego.com, situs perjalanan terbesar di Timur Tengah dan Asia Pasifik, mengalami kenaikan konversi mitra sebesar 95% dan 3 kali lipat peningkatan konversi iklan setelah membuat versi AMP dari halaman landing utama.
AMP mendekati setengah dari lalu lintas mobile peritel organik Prancis Greenweez dan dari bulan Januari sampai Maret 2017, mereka mengalami peningkatan rasio konversi seluler sebesar 80% dan penurunan biaya akuisisi seluler sebesar 66%..

Kami telah melihat bahwa AMP memberikan pemuatan halaman almost-instant yang membuatnya ideal untuk interaksi pengguna pertama kali dengan situs Anda. Namun, pengalaman e-commerce lebih dari sekadar kecepatan, sehingga AMP adalah mitra ideal Anda dalam perjalanan ini. Bagi Anda yang ingin mengalami kesuksesan yang sama seperti Greenweez atau Fastcommerce, kami ingin berbagi ringkasan tentang semua hal yang bisa dilakukan mengenai e-commerce dengan AMP.

Dasar-Dasar

Mari mulai dengan dasar-dasar situs e-commerce Anda. Lihat AMP for E-commerce Getting Started di situs web AMPbyExample. Di sana Anda bisa menemukan contoh sandbox untuk mulai membangun halaman produk, halaman kategori produk, dan alur pembayaran/checkout. Sediakan pelanggan Anda dengan semua yang mereka butuhkan untuk membuat keputusan – ulasan, foto, kustomisasi produk, dan lainnya.

Beberapa hal menarik yang didukung AMP adalah:

Konten dinamis: Untuk memastikan pelanggan Anda selalu melihat informasi terbaru, amp-list dan amp-bind bisa digunakan untuk mengambil dan merender konten terbaru di halaman Anda.
Checkout/pembayaran: Anda bisa mengimplementasikan keranjang belanja dan memulai check-out langsung dari halaman AMP Anda. Anda bisa menggunakan Payment Request API, menggunakan amp-form, atau mengalihkan pengguna ke halaman non-AMP di situs Anda, semuanya terserah Anda. WompMobile berbagi implementasi pembayaran mereka di AMP Conf tahun ini, yang bisa Anda lihat dalam link video.
Personalisasi/log-in: amp-list bisa digunakan untuk memberikan konten yang dipersonalisasi kepada pelanggan Anda – baik dalam bentuk produk yang direkomendasikan atau penyimpanan status keranjang belanja mereka.
Pengujian A/B: Untuk mengetahui apa yang terbaik bagi pengguna, Anda bisa menggunakan amp-experiment untuk melakukan eksperimen pengalaman pengguna di halaman AMP.

Untuk fitur yang tidak didukung secara native, Anda bisa menggunakan amp-iframe untuk menyematkan konten dan menyertakan fitur seperti aplikasi chat, peta, atau fitur pihak ketiga yang lain. Atau jika mau, Anda juga bisa mengalihkan ke halaman non-AMP di situs Anda.

amp-bind

Banyak dari pengalaman e-commerce yang menarik dan berguna ini dimungkinkan dengan amp-bind, model interaktivitas yang memungkinkan Anda menghubungkan tindakan pengguna dengan status dokumen yang berbeda. Kembali di bulan Juli, kami menjelaskan secara detail tentang banyak contoh peluang baru yang dibawa amp-bind – inilah beberapa fitur utama yang bisa digunakan untuk e-commerce.

Pada contoh yang kami buat di bawah ini, Anda bisa melihat pemfilteran dan pengurutan sedang beraksi:

sort_filter

Dan seperti yang telah kami sebutkan, Anda mungkin menemukan lebih banyak lagi kemampuan daripada yang telah kami identifikasi. Jelajahi kemungkinan-kemungkinan itu dan bagikan dengan komunitas apa yang Anda temukan.

AMP + PWA

Ketika Wego, situs perjalanan terbesar di Timur Tengah, membangun kembali halaman landing mereka dengan AMP dan halaman yang lebih interaktif dengan PWA, mereka melihat peningkatan kinerja situs yang luar biasa. Halaman AMP mereka mengalami peningkatan lebih dari 10 kali lipat dalam kecepatan halaman dan peningkatan kunjungan halaman organik sebesar 12%.

Meskipun PWA mendukung fitur-fitur menarik bagaikan aplikasi, Service Worker yang diperlukan oleh PWA tidak tersedia saat pengguna pertama kali memuat situs Anda. AMP menyediakan titik masuk yang ideal bagi situs Anda sehingga memungkinkan PWA untuk memuat di belakang layar. Dengan implementasi AMP + PWA mereka, Wego mengalami 95% lebih banyak konversi dan 26% lebih banyak pengunjung ke situs mereka.

Seperti yang Anda lihat, situs e-commerce bisa mendapatkan keuntungan dari kombinasi ini: AMP secara dramatis mempercepat pemuatan halaman pertama di situs Anda dan PWA mempercepat waktu pemuatan untuk setiap klik berikutnya. Ini sangat berguna saat corong konversi membentang dalam beberapa halaman.

Dan sebagai bonusnya, PWA juga mendukung fitur-fitur menarik bagaikan aplikasi, seperti tombol add-to-homescreen, notifikasi push, keandalan dalam kondisi jaringan yang buruk, dan fungsionalitas bahkan saat pengguna offline.

Untuk mempelajari lebih lanjut tentang cara mengimplementasikan situs AMP + PWA, silakan lihat tutorial video dan panduan kami.

Analytics

amp-analytics mendukung fitur analytics pihak ketiga dan solusi analytics internal Anda sendiri. Anda bisa menemukan daftar semua fitur pihak ketiga yang telah dibuat dalam konfigurasi untuk digunakan dengan komponen amp-analytics di sini – termasuk Adobe Analytics, Google Analytics, Clicky Web Analytics, dan banyak lagi. Untuk contoh implementasi internal, lihat AMP Dengan Contoh pada Analytics. Pada AMP Conf awal tahun ini, perusahaan seperti eBay dan Pinterest juga membahas secara terperinci tentang cara mereka menggabungkan analytics ke AMP, jadi silakan lihat link videonya untuk mempelajari lebih lanjut.

* * *

AMP Project berkomitmen membantu situs untuk memanfaatkan format dengan kecepatan kilat ini untuk keuntungan e-commerce. Anda bisa menanti munculnya sumber daya tambahan, seperti template e-commerce baru di AMPstart.com dalam beberapa bulan mendatang. Terima kasih kepada komunitas development AMP untuk karya dan masukan Anda. Seperti biasa, mohon beri tahu kami bila ada masalah atau permintaan fitur.

E-commerce dengan kecepatan AMP

118 comments :

Labels

Archive