Como implementar Clerk.io para Magento PWA: um guia passo a passo

Publicados: 2023-05-25

A integração do Clerk.io com seu Magento Progressive Web App (PWA) permite que você ofereça recomendações personalizadas e acompanhe as vendas com eficiência. Esta postagem do blog irá guiá-lo pelas etapas para implementar perfeitamente o Clerk.io para Magento PWA, permitindo que você aprimore o envolvimento do cliente e aumente as conversões.

Por que a integração do Clerk.io com o Magento PWA?

A integração do Clerk.io com o Magento PWA traz vários benefícios importantes para sua loja online:

  1. Recomendações personalizadas: o Clerk.io fornece widgets de recomendação poderosos que podem ser integrados perfeitamente à página do carrinho de compras, à página da categoria e à página do produto. Esses widgets permitem que você exiba recomendações personalizadas de produtos para seus clientes, aprimorando as oportunidades de venda cruzada e venda adicional.
  2. Rastreamento de vendas aprimorado: o Clerk.io oferece recursos robustos de rastreamento de vendas, permitindo que você reúna informações valiosas sobre o comportamento do cliente e meça a eficácia de suas campanhas de marketing. Ao acompanhar os dados de vendas, você pode otimizar suas estratégias e impulsionar o crescimento da receita.

Principais recursos para integração

Antes de mergulhar no processo de implementação, vamos explorar os principais recursos que o Clerk.io oferece para uma integração perfeita com o Magento PWA:

balconista.io
  1. Widget de Recomendações: O widget de recomendações permite que você exiba recomendações personalizadas de produtos dinamicamente. Implemente-o no carrinho, na categoria e nas páginas de produtos para impulsionar o engajamento e as conversões do cliente.
  2. Sincronização de dados da loja: Clerk.io fornece um processo de sincronização para garantir que seu Magento PWA esteja conectado perfeitamente, permitindo que a plataforma recupere e utilize dados relevantes de forma eficaz.

7 etapas para implementar Clerk.io para Magento PWA

1. Crie uma conta de funcionário e faça login

Comece criando uma conta Clerk.io e entrando no painel Clerk.io.

2. Adicionar loja

integrar o secretário.io com o magento pwa

Depois de fazer login em my.clerk.io, o primeiro passo é adicionar sua loja:

  • Forneça o nome e o domínio da sua loja virtual
  • Escolha Magento 2 como plataforma
  • Selecione sua moeda
  • Clique em Adicionar nova loja para continuar

3. Instale e configure a extensão

Para integrar Clerk.io com seu Magento PWA, você precisa instalar e configurar a extensão Clerk.io. Siga esses passos:

  • Execute os seguintes comandos em seu terminal:
 compositor requer funcionário/magento2
módulo php bin/magento: habilitar Clerk_Clerk
php bin/magento setup:upgrade
php bin/magento setup:di:compile
  • Após a instalação da extensão, configure-a navegando para Store → Configuration → Clerk e inserindo sua chave de API Clerk.io.
secretário.io magento 2 pwa

4. Sincronize sua loja

Após configurar a extensão, é importante sincronizar sua loja Magento com Clerk.io:

guia de integração do pwa do secretário.io
  • Volte para o Guia de configuração no painel do Clerk.io e clique em Sincronizar seus dados .
  • Insira os detalhes da sua loja e clique em Iniciar sincronização para iniciar o processo de sincronização. Esta etapa garante que os dados da sua loja estejam conectados ao Clerk.io.
implementar secretário io para magento pwa github

5. Configure e configure o widget de recomendações

Consulte o Getting Started with Recommendations on Magento 2 para:

  • criar controles deslizantes de recomendação
  • definir o conteúdo do widget
  • configurar exibição de conteúdo através do back-end do Magento
Recomendações sobre Magento 2
Recomendações do Clerk.io

6. Exibir programaticamente o widget de recomendações

Para mostrar programaticamente o widget de recomendações no carrinho, na categoria e nas páginas do produto, você precisa executar as seguintes etapas:

Crie um módulo para recuperar a configuração de conteúdo do widget do back-end do Magento.

  • Defina as variáveis ​​de configuração no arquivo di.xml .
  • Crie o arquivo schema.graphqls com os campos obrigatórios para recuperação da API.

Desenvolva um complemento para PWA para consultar os dados de configuração da loja e buscar o conteúdo do widget.

  • Consulta GraphQl para recuperar dados de configuração da loja.
  • Alguns ganchos personalizados para consultar o endpoint da API Clerk https://api.clerk.io/v2?payload= para buscar os dados de conteúdo do widget.
  • Componentes estendidos do componente principal do PWA, com interceptores programáveis ​​que chamam os ganchos personalizados e inserem dados de conteúdo com base na configuração.
  • Algumas folhas de estilo para combinar com o tema atual.

Código relacionado:

 <!-- Defina a variável de configuração no arquivo di.xml. -->
<type name="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
        <argumentos>
            <argument name="extendedConfigData" xsi:type="array">
                <item name="clerk_general_public_key" xsi:type="string">secretário/general/public_key</item>
                <item name="clerk_category_enabled" xsi:type="string">funcionário/categoria/ativado</item>
                <item name="clerk_category_content" xsi:type="string">funcionário/categoria/conteúdo</item>
                <item name="clerk_product_enabled" xsi:type="string">funcionário/produto/ativado</item>
                <item name="clerk_product_content" xsi:type="string">funcionário/produto/conteúdo</item>
                <item name="clerk_cart_enabled" xsi:type="string">funcionário/carrinho/ativado</item>
                <item name="clerk_cart_content" xsi:type="string">balconista/carrinho/conteúdo</item>
            </argumento>
        </argumentos>
    </tipo> 
 //Cria o arquivo schema.grapqls
digite StoreConfig {
    escriturário_general_public_key: String @doc(descrição: "chave pública do escriturário")
    escriturário_category_enabled: Booleano @doc(descrição: "status de conteúdo da categoria de funcionário")
    escriturário_category_content: String @doc(descrição: "classe de conteúdo de categoria de escriturário")
    escriturário_produto_enabled: Booleano @doc(descrição: "status do conteúdo do produto do escriturário")
    escriturário_produto_conteúdo: String @doc(descrição: "classe de conteúdo do produto do escriturário")
    escriturário_cart_enabled: Booleano @doc(descrição: "status do conteúdo do carrinho do funcionário")
    escriturário_cart_content: String @doc(descrição: "status do conteúdo do carrinho do funcionário")
} 
 //Consulta GraphQl para recuperar dados de configuração da loja.
exportar const GET_STORE_CONFIG_DATA = gql`
    query getStoreConfigClerk {
        # eslint-disable-next-line @graphql-eslint/require-id-quando-disponível
        lojaConfig {
            store_code
            secretário_general_public_key
            escriturário_category_enabled
            escriturário_categoria_conteúdo
            funcionário_produto_enabled
            funcionário_produto_conteúdo
            balconista_cart_enabled
            balconista_carrinho_content
        }
    }
`;

7. Habilite o rastreamento de vendas programaticamente

Para implementar o rastreamento de vendas com Clerk.io em seu Magento PWA, siga as etapas abaixo:

  • Crie componentes e garras para estender os arquivos principais do tema Venia e lidar com chamadas de API para rastrear vendas para o ponto de extremidade https://api.clerk.io/v2/log/sale do Clerk.io para o balconista depois que um pedido é feito.
  • Estenda os arquivos temáticos relacionados aos seus métodos de pagamento, como SagePay e Stripe, para incorporar o rastreamento de vendas.
  • Estenda @magento/peregrine/lib/store/actions/checkout/asyncActions.js para integrar a funcionalidade necessária.
balconista magento 2

Seguindo estas etapas, você pode integrar Clerk.io com sucesso ao seu Magento PWA e aproveitar seus recursos poderosos para aprimorar a experiência de compra de seus clientes.

Um Exemplo de Vitrine

Para obter uma representação visual da integração do Clerk.io em ação, visite nosso site de demonstração.

  • Página da categoria
exemplos de funcionario.io em magento 2 pwa
  • Página do produto
escriturário.io na página do produto magento pwa
  • Página do Carrinho de Compras
página do carrinho de compras
  • Acompanhamento de vendas
rastreamento de vendas

Palavras Finais

A integração do Clerk.io com o Magento PWA oferece benefícios poderosos para sua loja online. Seguindo as etapas fornecidas, você pode implementar perfeitamente o Clerk.io e desfrutar de recomendações personalizadas e rastreamento de vendas eficaz.

Se você encontrar algum desafio durante o processo de integração ou preferir que especialistas cuidem disso para você, a equipe Tigren está aqui para ajudar. Com mais de 5 anos de experiência no desenvolvimento de Magento PWA, temos profundo conhecimento e experiência para ajudá-lo. Se você precisa criar um poderoso Magento PWA do zero, utilizar um tema Magento PWA ou integrá-lo a software de terceiros, nossa equipe está pronta para fornecer soluções personalizadas para atender aos seus requisitos específicos.

Não hesite em entrar em contato com a equipe Tigren para obter assistência especializada para maximizar o potencial do seu Magento PWA e garantir uma integração perfeita com o Clerk.io.

Postagens relacionadas:

Não é possível visualizar uma campanha na preparação de conteúdo do Magento PWA? Veja como corrigi-lo