Como integrar uma configuração do Magento 2 sem cabeça

O que você vai aprender

Saiba como integrar o Klaviyo a uma configuração do Magento 2 sem cabeça. Se estiver usando o Magento 2 para alimentar o back-end da sua loja de comércio eletrônico, mas uma estrutura diferente para o front-end (como o React.js, Angular etc.), então as informações a seguir são relevantes para o senhor.

Essa integração requer três etapas:

1. Conecte sua loja Magento 2 por meio da integração nativa do Klaviyo para sincronizar dados de pedidos, catálogos e assinantes.
2. Adicione manualmente trechos de código ao seu site para ativar a funcionalidade de rastreamento no local.
3. (Se estiver usando uma estrutura de URL personalizada para seu catálogo de produtos) Adicione regras de reescrita para URLS de produtos.

Conecte a integração nativa do Klaviyo

Primeiro, conecte sua loja Magento 2 por meio da integração nativa do Klaviyo para sincronizar dados de pedidos, catálogos e assinantes, seguindo as etapas em Introdução ao Magento 2.

Grande parte da integração do Klaviyo com o Magento 2 depende da obtenção de dados por meio da API do servidor do Magento. Normalmente, isso não é afetado pelo uso de um front-end desacoplado, e a integração nativa rastreará os seguintes eventos sem configuração adicional:

• Pedido feito
• Pedido atendido
• Remessa cumprida
• Pedido cancelado
• Pedido reembolsado
• Início do checkout

Além disso, observe que:

• Os eventos de check-out iniciados serão sincronizados, desde que o senhor ainda esteja criando orçamentos e atribuindo um endereço de e-mail a eles quando o usuário fizer o check-out.
• Se o senhor tiver ativado a sincronização de clientes inscritos na tabela de boletins informativos do Magento 2, a sincronização deverá funcionar como previsto.

Adicionar manualmente trechos de código

Se estiver usando uma configuração headless, o senhor deve adicionar manualmente o JavaScript "Active on Site" do Klaviyo (também conhecido como Klaviyo.js) ao seu site. O Klaviyo.js rastreia quando os usuários estão ativos no seu site e habilita os formulários do Klaviyo. 

Também fornecemos snippets que permitem que o senhor faça o seguinte:

• Rastreamento de produtos visualizados
  Rastreie quando um usuário visualiza produtos específicos em seu site (o que pode ser aproveitado em um fluxo de abandono de navegação).
• Rastreamento de itens vistos recentemente
  Rastreie os itens visualizados recentemente no perfil de um usuário.
• Rastreamento de itens adicionados ao carrinho
  Rastreie quando um usuário adiciona um item ao carrinho.
• Rastreamento de usuários conectados
  Se o senhor tiver a funcionalidade de criação de conta, rastreie quando um usuário fizer login.

Ativo no local 

Adicione o seguinte snippet do Klaviyo.js para que ele apareça em todas as páginas do seu site. Isso habilitará o rastreamento Active on Site e os formulários do Klaviyo. Certifique-se de substituir PUBLIC_API_KEY por sua chave de API pública do 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, o senhor precisará carregar o objeto Klaviyo em qualquer página em que queira adicionar um dos seguintes snippets (como Viewed Product, Added to Cart etc.). O objeto klaviyo só precisa ser carregado uma vez por página.

Para carregar o objeto klaviyo, instale manualmente o seguinte snippet 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]=argumentos[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 quiser configurar um fluxo de abandono de navegação ou criar segmentos com base na atividade de navegação do produto, o senhor precisará adicionar o rastreamento de eventos JavaScript para a métrica Viewed Product. Todas as métricas do Viewed Product estão vinculadas a perfis de usuários. No modelo da página do 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>

Certifique-se de atualizar os valores das propriedades JSON no snippet para que eles extraiam dinamicamente as informações relevantes necessárias para essa propriedade.

Itens visualizados recentemente

Além disso, há outro snippet que permite que as entradas sejam adicionadas a um feed visual "Recently Viewed Items" no perfil do usuário. O seguinte snippet pode ser adicionado diretamente abaixo do snippet Viewed Product. 

Não se esqueça de substituir item.___ no snippet pelo objeto de item que sua plataforma usa para as propriedades do produto.

<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
     "Título": item.ProductName,
    "ItemId": item.ProductID,
    "Categories": item.Categories,
    "ImageUrl": item.ImageURL,
    "Url": item.URL,
    "Metadados": {
       "Brand": item.Brand,
       "Price": item.Price,
       "CompareAtPrice": item.CompareAtPrice
     }
   });
 </script>

Adicionado ao carrinho

Se quiser enviar e-mails sobre carrinhos abandonados aos visitantes que adicionam itens ao carrinho, mas não chegam à página de checkout, o senhor deverá acompanhar a métrica Added to Cart. Um cliente deve ser identificado (ou seja, cookied) 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",
     "Itens": [{
         "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 contas no seu site, talvez seja necessário adicionar um código adicional para identificar e rastrear os usuários conectados. Esse código deve ser executado quando o usuário tiver feito login.

Aqui está um exemplo de script para que o senhor possa começar:

klaviyo.identify({
  "$email" : customer.email,
  "$first_name" : customer.first_name,
  "$last_name" : customer.last_name
});

Adicionar regras de reescrita para URLs de produtos

Seu catálogo de produtos do Magento 2 deve ser sincronizado normalmente com o Klaviyo por meio de nossa integração nativa, mas se o senhor estiver usando uma estrutura de URL personalizada, precisará adicionar algumas regras de reescrita à sua base de código.

O URL padrão do produto do Magento 2 segue a estrutura abaixo:

https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]

Se sua loja estiver usando uma estrutura de URL como:

https://[YOUR STORE]/products/[Product Name]

Em seguida, o senhor precisará adicionar algumas regras de reescrita à sua base de código para redirecionar os links de produtos padrão do Magento 2 para sua estrutura de URL personalizada

Recursos adicionais

• Primeiros passos com o Magento 2.x (CE e EE)
• Requisitos do sistema de integração do Magento
• Referência de dados do Magento 2