如何為 Magento PWA 實施 Clerk.io:分步指南

已發表: 2023-05-25

將 Clerk.io 與您的 Magento 漸進式 Web 應用程序 (PWA) 集成使您能夠提供量身定制的建議並有效地跟踪銷售情況。 這篇博文將指導您完成為 Magento PWA 無縫實施 Clerk.io 的步驟,使您能夠增強客戶參與度並促進轉化。

為什麼 Clerk.io 與 Magento PWA 集成?

將 Clerk.io 與 Magento PWA 集成可為您的在線商店帶來幾個主要優勢:

  1. 個性化推薦: Clerk.io 提供強大的推薦小部件,可以無縫集成到您的購物車頁面、類別頁面和產品頁面。 這些小部件使您能夠向客戶顯示個性化的產品推薦,從而增加交叉銷售和追加銷售的機會。
  2. 增強的銷售跟踪: Clerk.io 提供強大的銷售跟踪功能,使您能夠收集有關客戶行為的寶貴見解並衡量營銷活動的有效性。 通過跟踪銷售數據,您可以優化策略並推動收入增長。

集成的主要功能

在深入實施過程之前,讓我們探討一下 Clerk.io 為與 Magento PWA 無縫集成而提供的關鍵功能:

職員.io
  1. 推薦小部件:推薦小部件使您能夠動態顯示個性化產品推薦。 在購物車、類別和產品頁面上實施它,以推動客戶參與和轉化。
  2. 存儲數據同步: Clerk.io 提供了一個同步過程,以確保您的 Magento PWA 無縫連接,使平台能夠有效地檢索和利用相關數據。

為 Magento PWA 實施 Clerk.io 的 7 個步驟

1. 創建文員賬戶並登錄

首先創建一個 Clerk.io 帳戶並登錄到 Clerk.io 儀表板。

2.添加商店

將 clerk.io 與 magento pwa 集成

登錄 my.clerk.io 後,第一步是添加您的商店:

  • 提供您的網上商店的名稱和域名
  • 選擇Magento 2作為平台
  • 選擇您的貨幣
  • 單擊添加新商店以繼續

3.安裝和配置擴展

要將 Clerk.io 與您的 Magento PWA 集成,您需要安裝和配置 Clerk.io 擴展。 按著這些次序:

  • 在您的終端中運行以下命令:
 作曲家需要職員/magento2
php bin/magento 模塊:啟用 Clerk_Clerk
php bin/magento 設置:升級
php bin/magento setup:di:compile
  • 安裝擴展後,通過導航到Store → Configuration → Clerk並輸入您的 Clerk.io API 密鑰來配置它。
clerk.io magento 2 pwa

4. 同步您的商店

配置擴展後,將您的 Magento 商店與 Clerk.io 同步很重要:

clerk.io pwa 集成指南
  • 返回 Clerk.io 儀表板中的設置指南,然後單擊同步您的數據
  • 輸入您的商店詳細信息並單擊開始同步以啟動同步過程。 此步驟確保您商店的數據與 Clerk.io 連接。
為 magento pwa github 實現 clerk io

5. 設置和配置推薦小部件

請參閱 Magento 2 上的建議入門以:

  • 創建推薦滑塊
  • 定義小部件內容
  • 通過 Magento 後端配置內容顯示
關於 Magento 2 的建議
Clerk.io 推薦

6. 以編程方式顯示推薦小部件

要以編程方式在購物車、類別和產品頁面上顯示推薦小部件,您需要執行以下步驟:

創建一個模塊以從 Magento 後端檢索小部件內容配置。

  • di.xml文件中定義配置變量。
  • 使用 API 檢索所需的字段創建schema.graphqls文件。

為 PWA 開發一個插件來查詢商店配置數據並獲取小部件內容。

  • 用於檢索存儲配置數據的 GraphQl 查詢。
  • 一些自定義掛鉤查詢 Clerk API 端點https://api.clerk.io/v2?payload=以獲取小部件內容數據。
  • PWA 核心組件的擴展組件,具有可編程定位的攔截器,可調用自定義掛鉤並根據配置插入內容數據。
  • 一些與當前主題相匹配的樣式表。

相關代碼:

 <!-- 在di.xml文件中定義配置變量。 -->
<type name="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
        <參數>
            <argument name="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">職員/類別/內容</item>
                <item name="clerk_product_enabled" xsi:type="string">clerk/product/enabled</item>
                <item name="clerk_product_content" xsi:type="string">店員/產品/內容</item>
                <item name="clerk_cart_enabled" xsi:type="string">clerk/cart/enabled</item>
                <item name="clerk_cart_content" xsi:type="string">clerk/cart/content</item>
            </參數>
        </參數>
    </類型> 
 //創建schema.grapqls文件
輸入 StoreConfig {
    clerk_general_public_key: String @doc(description: "職員公鑰")
    clerk_category_enabled: Boolean @doc(description: "文員類別內容狀態")
    clerk_category_content: String @doc(description: "文員類別內容類")
    clerk_product_enabled: Boolean @doc(description: "店員產品內容狀態")
    clerk_product_content: String @doc(description: "文員產品內容類")
    clerk_cart_enabled: Boolean @doc(description: "店員購物車內容狀態")
    clerk_cart_content: String @doc(description: "店員購物車內容狀態")
} 
 //用於檢索商店配置數據的 GraphQl 查詢。
導出常量 GET_STORE_CONFIG_DATA = gql`
    查詢 getStoreConfigClerk {
        # eslint-disable-next-line @graphql-eslint/require-id-when-available
        存儲配置{
            商店代碼
            clerk_general_public_key
            clerk_category_enabled
            職員類別內容
            clerk_product_enabled
            職員_產品_內容
            clerk_cart_enabled
            clerk_cart_content
        }
    }
`;

7. 以編程方式啟用銷售跟踪

要在您的 Magento PWA 中使用 Clerk.io 實現銷售跟踪,請按照以下步驟操作:

  • 創建組件和爪子以擴展核心 Venia 主題文件並處理 API 調用以在下訂單後跟踪銷售到 Clerk.io 的端點https://api.clerk.io/v2/log/sale to clerk。
  • 擴展與您的支付方式相關的主題文件,例如 SagePay 和 Stripe,以合併銷售跟踪。
  • 擴展@magento/peregrine/lib/store/actions/checkout/asyncActions.js以集成必要的功能。
店員 magento 2

通過執行這些步驟,您可以成功地將 Clerk.io 與您的 Magento PWA 集成,並利用其強大的功能來增強客戶的購物體驗。

展示示例

如需 Clerk.io 集成操作的可視化表示,請訪問我們的演示站點。

  • 類別頁面
magento 2 pwa 中的 clerk.io 示例
  • 產品頁面
magento pwa 產品頁面上的 clerk.io
  • 購物車頁面
購物車頁面
  • 銷售跟踪
銷售跟踪

最後的話

將 Clerk.io 與 Magento PWA 集成可為您的在線商店帶來強大的優勢。 按照提供的步驟,您可以無縫實施 Clerk.io 並享受個性化推薦和有效的銷售跟踪。

如果您在集成過程中遇到任何挑戰,或者更願意讓專家為您處理, Tigren團隊隨時為您提供幫助。 憑藉超過 5 年的 Magento PWA 開發經驗,我們擁有深入的知識和專業知識來幫助您。 無論您是需要從頭開始構建強大的 Magento PWA、使用 Magento PWA 主題,還是將其與第三方軟件集成,我們的團隊都準備好提供量身定制的解決方案來滿足您的特定要求。

不要猶豫,聯繫 Tigren 團隊尋求專家幫助,以最大限度地發揮您的 Magento PWA 的潛力並確保與 Clerk.io 的無縫集成。

相關文章:

無法在 Magento PWA 內容暫存中預覽活動? 這是修復它的方法