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

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:

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

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.

4. Sincronize sua loja

Após configurar a extensão, é importante sincronizar sua loja Magento com Clerk.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.

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

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.

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

• Página do produto

• Página do Carrinho de Compras

• Acompanhamento 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