Cara Menerapkan Clerk.io Untuk Magento PWA: Panduan Langkah demi Langkah
Diterbitkan: 2023-05-25Mengintegrasikan Clerk.io dengan Magento Progressive Web App (PWA) Anda memberdayakan Anda untuk menawarkan rekomendasi yang disesuaikan dan melacak penjualan secara efektif. Posting blog ini akan memandu Anda melalui langkah-langkah untuk mengimplementasikan Clerk.io untuk Magento PWA dengan mulus, memungkinkan Anda untuk meningkatkan keterlibatan pelanggan dan meningkatkan konversi.
Mengapa Integrasi Clerk.io Dengan Magento PWA?
Mengintegrasikan Clerk.io dengan Magento PWA membawa beberapa manfaat utama ke toko online Anda:
- Rekomendasi yang Dipersonalisasi: Clerk.io menyediakan widget rekomendasi yang kuat yang dapat diintegrasikan dengan mulus ke halaman keranjang belanja, halaman kategori, dan halaman produk Anda. Widget ini memungkinkan Anda untuk menampilkan rekomendasi produk yang dipersonalisasi kepada pelanggan Anda, meningkatkan peluang cross-selling dan upselling.
- Pelacakan Penjualan yang Disempurnakan: Clerk.io menawarkan kemampuan pelacakan penjualan yang kuat, memungkinkan Anda mengumpulkan wawasan berharga tentang perilaku pelanggan dan mengukur keefektifan kampanye pemasaran Anda. Dengan melacak data penjualan, Anda dapat mengoptimalkan strategi dan mendorong pertumbuhan pendapatan.
Fitur Utama Untuk Integrasi
Sebelum terjun ke proses implementasi, mari jelajahi fitur utama yang ditawarkan Clerk.io untuk integrasi tanpa batas dengan Magento PWA:
- Widget Rekomendasi: Widget rekomendasi memungkinkan Anda menampilkan rekomendasi produk hasil personalisasi secara dinamis. Terapkan di keranjang, kategori, dan halaman produk untuk mendorong interaksi dan konversi pelanggan.
- Simpan Sinkronisasi Data: Clerk.io menyediakan proses sinkronisasi untuk memastikan PWA Magento Anda terhubung dengan mulus, memungkinkan platform untuk mengambil dan memanfaatkan data yang relevan secara efektif.
7 Langkah Untuk Mengimplementasikan Clerk.io Untuk Magento PWA
1. Buat Akun Pegawai dan Masuk
Mulailah dengan membuat akun Clerk.io dan masuk ke dasbor Clerk.io.
2. Tambahkan Toko
Setelah masuk ke my.clerk.io, langkah pertama adalah menambahkan toko Anda:
- Berikan Nama dan Domain toko web Anda
- Pilih Magento 2 sebagai Platform
- Pilih Mata Uang Anda
- Klik Tambahkan Toko Baru untuk melanjutkan
3. Instal dan Konfigurasikan Ekstensi
Untuk mengintegrasikan Clerk.io dengan PWA Magento Anda, Anda perlu menginstal dan mengonfigurasi ekstensi Clerk.io. Ikuti langkah ini:
- Jalankan perintah berikut di terminal Anda:
komposer memerlukan petugas/magento2 modul php bin/magento: aktifkan Clerk_Clerk php bin/magento setup:upgrade php bin/magento setup:di:kompilasi
- Setelah ekstensi diinstal, konfigurasikan dengan menavigasi ke Store → Configuration → Clerk dan masukkan kunci API Clerk.io Anda.
4. Sinkronkan toko Anda
Setelah mengonfigurasi ekstensi, penting untuk menyinkronkan toko Magento Anda dengan Clerk.io:
- Kembali ke Panduan Penyiapan di dasbor Clerk.io dan klik Sinkronkan Data Anda .
- Masukkan detail toko Anda dan klik Mulai Sinkronisasi untuk memulai proses sinkronisasi. Langkah ini memastikan bahwa data toko Anda terhubung dengan Clerk.io.
5. Siapkan dan Konfigurasikan Widget Rekomendasi
Lihat Memulai dengan Rekomendasi di Magento 2 untuk:
- buat bilah rekomendasi
- menentukan konten widget
- konfigurasikan tampilan konten melalui backend Magento
6. Menampilkan Widget Rekomendasi secara terprogram
Untuk menampilkan widget rekomendasi secara terprogram di keranjang, kategori, dan halaman produk, Anda perlu melakukan langkah-langkah berikut:
Buat modul untuk mengambil konfigurasi konten widget dari backend Magento.
- Tentukan variabel konfigurasi di file di.xml .
- Buat file schema.graphqls dengan kolom yang diperlukan untuk pengambilan API.
Kembangkan add-on untuk PWA untuk mengkueri data konfigurasi toko dan mengambil konten widget.
- Kueri GraphQl untuk mengambil data konfigurasi toko.
- Beberapa pengait khusus untuk melakukan kueri ke titik akhir Clerk API
https://api.clerk.io/v2?payload=
untuk mengambil data konten widget. - Komponen yang diperluas dari komponen inti PWA, dengan pencegat yang dapat ditargetkan secara terprogram yang memanggil pengait khusus dan memasukkan data konten berdasarkan konfigurasi.
- Beberapa stylesheet yang cocok dengan tema saat ini.
Kode terkait:
<!-- Tentukan variabel konfigurasi pada file di.xml. --> <nama ketik="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider"> <argumen> <nama argumen="extendedConfigData" xsi:type="array"> <item name="clerk_general_public_key" xsi:type="string">clerk/general/public_key</item> <item name="clerk_category_enabled" xsi:type="string">clerk/category/enabled</item> <item name="clerk_category_content" xsi:type="string">clerk/category/content</item> <item name="clerk_product_enabled" xsi:type="string">clerk/product/enabled</item> <item name="clerk_product_content" xsi:type="string">clerk/product/content</item> <item name="clerk_cart_enabled" xsi:type="string">clerk/cart/diaktifkan</item> <item name="clerk_cart_content" xsi:type="string">clerk/cart/content</item> </argumen> </argumen> </tipe>
//Buat file schema.grapqls ketik StoreConfig { petugas_umum_publik_key: String @doc(deskripsi: "kunci publik petugas") petugas_kategori_diaktifkan: Boolean @doc(deskripsi: "status konten kategori pegawai") petugas_kategori_konten: String @doc(deskripsi: "kelas konten kategori petugas") klerk_product_enabled: Boolean @doc(deskripsi: "status konten produk klerk") klerk_product_content: String @doc(deskripsi: "kelas konten produk clerk") petugas_cart_diaktifkan: Boolean @doc(deskripsi: "status konten keranjang pegawai") clerk_cart_content: String @doc(deskripsi: "status konten keranjang klerk") }
// Kueri GraphQl untuk mengambil data konfigurasi toko. ekspor const GET_STORE_CONFIG_DATA = gql` kueri getStoreConfigClerk { # eslint-disable-next-line @graphql-eslint/require-id-when-available storeConfig { store_code petugas_umum_kunci_publik petugas_kategori_diaktifkan petugas_kategori_konten petugas_produk_diaktifkan petugas_produk_konten petugas_cart_enabled petugas_cart_content } } `;
7. Aktifkan Pelacakan Penjualan Secara Terprogram
Untuk menerapkan pelacakan penjualan dengan Clerk.io di PWA Magento Anda, ikuti langkah-langkah di bawah ini:
- Buat komponen dan cakar untuk memperluas file tema inti Venia dan menangani panggilan API untuk melacak penjualan ke titik akhir Clerk.io
https://api.clerk.io/v2/log/sale
ke petugas setelah pesanan dilakukan. - Perluas file tema yang terkait dengan metode pembayaran Anda, seperti SagePay dan Stripe, untuk menyertakan pelacakan penjualan.
- Perluas
@magento/peregrine/lib/store/actions/checkout/asyncActions.js
untuk mengintegrasikan fungsionalitas yang diperlukan.
Dengan mengikuti langkah-langkah ini, Anda dapat berhasil mengintegrasikan Clerk.io dengan PWA Magento Anda dan memanfaatkan fitur-fitur canggihnya untuk meningkatkan pengalaman berbelanja bagi pelanggan Anda.
Contoh Etalase
Untuk representasi visual dari aksi integrasi Clerk.io, kunjungi situs demo kami.
- Halaman Kategori
- Halaman Produk
- Halaman Keranjang Belanja
- Pelacakan penjualan
Kata Akhir
Mengintegrasikan Clerk.io dengan Magento PWA menawarkan manfaat yang kuat untuk toko online Anda. Dengan mengikuti langkah-langkah yang disediakan, Anda dapat mengimplementasikan Clerk.io dengan mulus dan menikmati rekomendasi hasil personalisasi dan pelacakan penjualan yang efektif.
Jika Anda menghadapi tantangan apa pun selama proses integrasi atau lebih suka meminta ahli menanganinya untuk Anda, tim Tigren siap membantu. Dengan pengalaman lebih dari 5 tahun dalam pengembangan Magento PWA, kami memiliki pengetahuan dan keahlian yang mendalam untuk membantu Anda. Apakah Anda perlu membuat Magento PWA yang kuat dari awal, menggunakan tema Magento PWA, atau mengintegrasikannya dengan perangkat lunak pihak ketiga, tim kami siap memberikan solusi yang disesuaikan untuk memenuhi kebutuhan spesifik Anda.
Jangan ragu untuk menghubungi tim Tigren untuk mendapatkan bantuan ahli dalam memaksimalkan potensi PWA Magento Anda dan memastikan integrasi tanpa hambatan dengan Clerk.io.
Pos terkait:
Tidak Dapat Mempratinjau Kampanye Dalam Pementasan Konten Magento PWA? Inilah Cara Memperbaikinya