Cara Menerapkan Clerk.io Untuk Magento PWA: Panduan Langkah demi Langkah

Diterbitkan: 2023-05-25

Mengintegrasikan 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:

  1. 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.
  2. 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:

petugas.io
  1. 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.
  2. 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

integrasikan petugas.io dengan magento pwa

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.
petugas.io magento 2 pwa

4. Sinkronkan toko Anda

Setelah mengonfigurasi ekstensi, penting untuk menyinkronkan toko Magento Anda dengan Clerk.io:

panduan integrasi pwa petugas.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.
terapkan petugas io untuk magento pwa github

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
Rekomendasi di Magento 2
Rekomendasi Clerk.io

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.
pegawai magento 2

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
contoh petugas.io di magento 2 pwa
  • Halaman Produk
petugas.io di halaman produk magento pwa
  • Halaman Keranjang Belanja
halaman keranjang belanja
  • Pelacakan penjualan
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