Como integrar uma configuração headless do Magento 2
O que você vai aprender
Saiba como integrar o Klaviyo a uma configuração headless do Magento 2. Se você usa o Magento 2 para alimentar o back-end da sua loja e-commerce, mas usa uma estrutura diferente para o front-end (como React.js, Angular etc.), então as informações a seguir são relevantes para você.
Esta integração exige 3 etapas:
- Conecte sua loja Magento 2 via a integração nativa da Klaviyo para sincronizar dados de pedidos, catálogo e assinantes.
- Adicione manualmente snippets de código ao seu site para ativar a funcionalidade de rastreamento no site.
- (Se você estiver usando uma estrutura de URL personalizada para o seu catálogo de produtos) Adicione regras de rewrite para URLs de produtos.
Conecte a integração nativa do Klaviyo
Primeiro, conecte sua loja Magento 2 via integração nativa do Klaviyo para sincronizar dados de pedidos, catálogo e assinantes seguindo as etapas no Guia de introdução do Magento 2.
Uma grande parte da integração do Klaviyo com o Magento 2 depende da busca de dados por meio da API do lado do servidor do Magento. Normalmente, isso não é afetado pelo uso de um frontend desacoplado, e a integração nativa vai rastrear os seguintes eventos sem nenhuma configuração adicional:
- Pedido Realizado
- Pedido Atendido
- Remessa Atendida
- Pedido Cancelado
- Pedido Reembolsado
- Checkout Iniciado
Além disso, saiba que:
- Os eventos de Iniciou o checkout serão sincronizados desde que você ainda esteja criando cotações e atribuindo um endereço de e-mail a elas quando o usuário finalizar a compra.
- Se você ativou a sincronização de clientes que se inscrever-se na tabela de newsletter do Magento 2, a sincronização deve funcionar conforme o esperado.
Adicionar snippets de código manualmente
Se você estiver usando uma configuração headless, precisará adicionar manualmente o JavaScript “Active on Site” da Klaviyo (também conhecido como Klaviyo.js) ao seu site. O Klaviyo.js rastreia quando os usuários estão com atividade no seu site e habilita os formulários da Klaviyo.
Também fornecemos snippets que permitem que você faça o seguinte:
- Rastreamento de Produto Visualizado
Acompanhe quando um usuário visualiza produtos específicos no seu site (o que pode ser aproveitado em um fluxo de carrinho abandonado). - Rastreamento de itens visualizados recentemente
Acompanhe itens visualizados recentemente no perfil de um usuário. - Rastreamento de Adicionado ao Carrinho
Acompanhe quando um usuário adiciona um item ao carrinho. - Rastreamento de usuário conectado
Se você tiver a funcionalidade de criação de conta, rastreie quando um usuário fizer login.
Ativo no Site
Adicione o snippet a seguir do Klaviyo.js para que ele apareça em todas as páginas do seu site. Isso vai ativar o rastreamento Com atividade no site e os formulários do Klaviyo. Não se esqueça de substituir PUBLIC_API_KEY pela sua chave de API pública da Klaviyo.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Depois de adicionar o Klaviyo.js, você precisará carregar o objeto Klaviyo em qualquer página em que você quiser adicionar um dos snippets a seguir (como Produto visualizado, Adicionado ao carrinho etc.). O objeto klaviyo só precisa ser carregado uma vez por página.
Para carregar o objeto klaviyo, instale manualmente o snippet a seguir nas páginas necessárias:
<script type="text/javascript"> !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>Produto Visualizado
Se você quiser configurar um fluxo de carrinho abandonado ou criar segmentos com base na atividade de navegação de produtos, você precisará adicionar rastreamento de eventos JavaScript para a métrica Viewed Product. Todas as métricas Viewed Product estão vinculadas a perfis de usuários. No modelo da sua página de produto, adicione o seguinte snippet.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
var item = {
"ProductName": item.ProductName,
"ProductID": item.ProductID,
"SKU": item.SKU,
"Categories": item.Categories,
"ImageURL": item.ImageURL,
"URL": item.URL,
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
};
klaviyo.track("Viewed Product", item);
</script>Não se esqueça de atualizar os valores das propriedades JSON no snippet para que eles sejam preenchidos dinamicamente com as informações relevantes necessárias para essa propriedade.
Itens visualizados recentemente
Além disso, há outro snippet que permite adicionar entradas a um feed visual de “itens visualizados recentemente” no perfil do usuário. O snippet a seguir pode ser adicionado diretamente abaixo do snippet Produto visualizado.
Não se esqueça de substituir item.___ no snippet pelo objeto item que sua plataforma usa para propriedades do produto.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"Title": item.ProductName,
"ItemId": item.ProductID,
"Categories": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Metadata": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>Adicionado ao Carrinho
Se você quiser enviar e-mails de carrinho abandonado para visitantes que adicionam itens ao carrinho, mas não chegam à página de checkout, você vai querer rastrear uma métrica de Added to Cart. É necessário que o cliente seja identificado (ou seja, com cookie) para rastrear esse evento. Aqui está um exemplo de solicitação em que o carrinho já continha um item (Winnie the Pooh) e outro item acabou de ser adicionado ao carrinho (A Tale of Two Cities):
<script type="text/javascript">
klaviyo.track("Added to Cart", {
"$value": 29.98,
"AddedItemProductName": "A Tale of Two Cities",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Fiction", "Classics", "Children"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"ItemNames": ["Winnie the Pooh", "A Tale of Two Cities"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Items": [{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": ["Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": ["Fiction", "Classics"]
}
]
});
</script>Usuários conectados
Se os clientes puderem criar conta no seu site, talvez você queira adicionar código adicional para identificar e rastrear usuários conectados. Esse código deve ser executado uma vez depois que o usuário fizer login.
Aqui está um exemplo de script para você começar:
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});Adicione regras de reescrita para URLs de produtos
Seu catálogo de produtos do Magento 2 deve sincronizar normalmente com o Klaviyo por meio de nossas integrações nativas. No entanto, se você estiver usando uma estrutura de URL personalizada, precisará adicionar algumas regras de reescrita à sua base de código.
A URL do produto padrão do Magento 2 segue a estrutura abaixo:
https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]Se a sua loja estiver usando uma estrutura de URL como:
https://[YOUR STORE]/products/[Product Name]Em seguida, você precisará adicionar algumas regras de reescrita à sua base de código para redirecionar os links padrão de produto do Magento 2 para sua estrutura de URL personalizada