Как реализовать Clerk.io для Magento PWA: пошаговое руководство

Опубликовано: 2023-05-25

Интеграция Clerk.io с вашим прогрессивным веб-приложением Magento (PWA) позволит вам предлагать индивидуальные рекомендации и эффективно отслеживать продажи. Этот пост в блоге проведет вас через этапы беспрепятственного внедрения Clerk.io для Magento PWA, что позволит вам повысить вовлеченность клиентов и повысить конверсию.

Зачем нужна интеграция Clerk.io с Magento PWA?

Интеграция Clerk.io с Magento PWA дает вашему интернет-магазину несколько ключевых преимуществ:

  1. Персональные рекомендации: Clerk.io предоставляет мощные виджеты рекомендаций, которые можно легко интегрировать на страницу корзины покупок, страницу категории и страницу продукта. Эти виджеты позволяют отображать персонализированные рекомендации по продуктам для ваших клиентов, расширяя возможности перекрестных и дополнительных продаж.
  2. Усовершенствованное отслеживание продаж: Clerk.io предлагает надежные возможности отслеживания продаж, позволяющие вам собирать ценную информацию о поведении клиентов и измерять эффективность ваших маркетинговых кампаний. Отслеживая данные о продажах, вы можете оптимизировать свои стратегии и стимулировать рост доходов.

Ключевые особенности для интеграции

Прежде чем погрузиться в процесс внедрения, давайте рассмотрим ключевые функции, которые Clerk.io предлагает для бесшовной интеграции с Magento PWA:

clerk.io
  1. Виджет рекомендаций: виджет рекомендаций позволяет динамически отображать персонализированные рекомендации по продуктам. Реализуйте его на страницах корзины, категории и продукта, чтобы повысить вовлеченность клиентов и конверсию.
  2. Синхронизация данных магазина: Clerk.io обеспечивает процесс синхронизации, чтобы обеспечить беспрепятственное подключение вашего Magento PWA, позволяя платформе эффективно извлекать и использовать соответствующие данные.

7 шагов по внедрению Clerk.io для Magento PWA

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: di: компиляция
  • После установки расширения настройте его, перейдя в Магазин → Конфигурация → Клерк и введя свой ключ API Clerk.io.
clerk.io magento 2 pwa

4. Синхронизируйте свой магазин

После настройки расширения важно синхронизировать ваш магазин Magento с Clerk.io:

clerk.io руководство по интеграции pwa
  • Вернитесь к Руководству по установке на панели инструментов Clerk.io и нажмите «Синхронизировать ваши данные» .
  • Введите данные своего магазина и нажмите «Начать синхронизацию» , чтобы начать процесс синхронизации. Этот шаг гарантирует, что данные вашего магазина связаны с Clerk.io.
реализовать клерк io для magento pwa github

5. Установите и настройте виджет рекомендаций

Обратитесь к рекомендациям по началу работы с Magento 2, чтобы:

  • создавать рекомендательные ползунки
  • определить содержимое виджета
  • настроить отображение контента через бэкенд Magento
Рекомендации по Magento 2
Рекомендации Clerk.io

6. Программное отображение виджета рекомендаций

Чтобы программно отобразить виджет рекомендаций на страницах корзины, категории и товара, необходимо выполнить следующие шаги:

Создайте модуль для получения конфигурации содержимого виджета из серверной части Magento.

  • Определите переменные конфигурации в файле di.xml .
  • Создайте файл schema.graphqls с необходимыми полями для получения API.

Разработайте надстройку для PWA, чтобы запрашивать данные конфигурации магазина и получать содержимое виджета.

  • Запрос GraphQl для получения данных о конфигурации магазина.
  • Некоторые пользовательские хуки для запроса к конечной точке API Clerk 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">клерк/категория/включено</item>
                <item name="clerk_category_content" xsi:type="string">клерк/категория/содержание</item>
                <item name="clerk_product_enabled" xsi:type="string">клерк/продукт/включено</item>
                <item name="clerk_product_content" xsi:type="string">клерк/продукт/контент</item>
                <item name="clerk_cart_enabled" xsi:type="string">клерк/корзина/включено</item>
                <item name="clerk_cart_content" xsi:type="string">клерк/корзина/контент</item>
            </аргумент>
        </аргументы>
    </тип> 
 //Создаем файл schema.grapqls
введите StoreConfig {
    clerk_general_public_key: String @doc(описание: "открытый ключ клерка")
    clerk_category_enabled: Boolean @doc(description: "статус содержимого категории клерка")
    clerk_category_content: String @doc(описание: "класс содержимого категории клерка")
    clerk_product_enabled: Boolean @doc(описание: "содержимое продукта продавца")
    clerk_product_content: String @doc(описание: «класс содержимого продукта клерка»)
    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-когда-доступен
        storeConfig {
            store_code
            clerk_general_public_key
            clerk_category_enabled
            clerk_category_content
            clerk_product_enabled
            clerk_product_content
            clerk_cart_enabled
            clerk_cart_content
        }
    }
`;

7. Включите отслеживание продаж программно

Чтобы внедрить отслеживание продаж с помощью Clerk.io в Magento PWA, выполните следующие действия:

  • Создавайте компоненты и talons для расширения основных файлов темы Venia и обработки вызовов API для отслеживания продаж в конечную точку Clerk.io https://api.clerk.io/v2/log/sale для продавца после размещения заказа.
  • Расширьте файлы тем, связанные с вашими способами оплаты, такими как SagePay и Stripe, чтобы включить отслеживание продаж.
  • Расширьте @magento/peregrine/lib/store/actions/checkout/asyncActions.js чтобы интегрировать необходимые функции.
клерк мадженто 2

Следуя этим шагам, вы сможете успешно интегрировать Clerk.io с вашим Magento PWA и использовать его мощные функции для повышения качества обслуживания ваших клиентов.

Демонстрационный пример

Для наглядного представления интеграции Clerk.io в действии посетите наш демонстрационный сайт.

  • Страница категории
примеры clerk.io в magento 2 pwa
  • Страница продукта
clerk.io на странице продукта magento pwa
  • Страница корзины покупок
страница корзины покупок
  • Отслеживание продаж
отслеживание продаж

Заключительные слова

Интеграция Clerk.io с Magento PWA предлагает мощные преимущества для вашего интернет-магазина. Следуя приведенным инструкциям, вы сможете беспрепятственно внедрить Clerk.io и пользоваться персональными рекомендациями и эффективным отслеживанием продаж.

Если вы столкнулись с какими-либо трудностями в процессе интеграции или предпочитаете, чтобы специалисты справились с этим за вас, команда Tigren всегда готова помочь. Обладая более чем 5-летним опытом разработки Magento PWA, мы обладаем глубокими знаниями и опытом, чтобы помочь вам. Если вам нужно создать мощное Magento PWA с нуля, использовать тему Magento PWA или интегрировать ее со сторонним программным обеспечением, наша команда готова предоставить индивидуальные решения для удовлетворения ваших конкретных требований.

Не стесняйтесь обращаться к команде Tigren за экспертной помощью в максимальном использовании потенциала вашего Magento PWA и обеспечении бесшовной интеграции с Clerk.io.

Похожие сообщения:

Не удается предварительно просмотреть кампанию в Magento PWA Content Staging? Вот как это исправить