Integração Vtex

Este documento serve para determinar como é configurada a integração do Vetex, atenção atualmente para a integração Vtex x BuzzLead é necessário que exista já uma configuração do Google Tag Manager (GTM).
A integração do BuzzLead se dá em duas etapas, primeiramente é necessário configurar o acesso do BuzzLead para consultar situação dos pedidos lançados no Vtex.

Buzzlead x Vtex

1 - Acesse a tela de Integrações de E-commerce (Integrações -> E-Commerce);

2 - Preencha os campos com os dados pertinentes ao acesso;
* 2.1 Em plataforma selecione Vtex;
* 2.2 Nome da Loja informe o nome da Loja;
* 2.3 appKey informe o appKey da loja virtual;
* 2.4 appToken informe o appToken da Loja virtual

Caso tenham dúvidas com relação as informações do Vtex acesse o seguinte link
https://help.vtex.com/tutorial/criar-appkey-e-apptoken-para-autenticar-integracoes

Para gerar essas chaves, siga os passos abaixo:

No menu lateral do novo admin, clique em Gerenciamento da conta e, depois, em Contas.
No campo Buscar, digite o nome da sua conta e aperte Enter.
Ao clicar no nome da sua conta, você será redirecionado para a página Editar conta.
Na seção Segurança, clique em Gerar appKey e appToken.
Insira um nome para o par de appKey e appToken que você está criando.
Clique em Gerar novos tokens.
No campo que é exibido em seguida, fica o token. Por uma questão de segurança, ele é exibido apenas uma vez. Copie esse token e guarde-o em local seguro.
Atenção: todo par de appKey e appToken, quando é criado, nasce sem estar vinculado a um perfil de acessso. Então, depois de criá-lo, é necessário vinculá-lo ao perfil de acesso desejado.
Para isso, siga os passos abaixo:

Na seção Segurança da aba Contas, copie a appKey desejada, que se encontra na coluna Chave de aplicação.
Ainda no License Manager, acesse a aba Usuários e faça uma busca pela chave que você copiou.
Entre no usuário encontrado e associe-o aos perfis desejados. Essa appKey será capaz de autenticar integrações com os módulos e funcionalidades aos quais o perfil escolhido dá acesso.
Após realizar estes procedimentos, autentique-se na API utilizando os headers X-VTEX-API-appKey e X-VTEX-API-appToken da seguinte forma:

Utilize o X-VTEX-API-appKey para a Chave de aplicação informada no License Manager
Utilize o X-VTEX-API-appToken para o Token que foi gerado no License Manager
Em diferentes sistemas, providos por terceiros ou não, normalmente o appKey corresponde ao usuário e o appToken à senha.

3 - Salve a configuração.

Integração GTM x BuzzLead

**Atenção este processo é muito importante para a integração, atualmente a plataforma Vtex não permite execuções de scripts, por esta razão é necessário usar o GTM para enviar os dados da venda para o BuzzLead e desta forma poder obter dados da venda que foi convertida.**

Precisaremos usar a camada de dados do GTM para obter estas informações, esta camada é personalizável ou seja caso não esteja configurada esta camada aborte o processo e solicite a configuração.

Vamos começar:

Adicione a página de checkout o seguinte script;

<script>
	function getDataLayer(key) {
		for(var i = 0; i<dataLayer.length; i++) {
			if(dataLayer[i][key]) {
				return dataLayer[i][key];
			}
		}
	}
</script>
<script>
    window.Tracker({
        _event : 'bonus',
 
        // ID da campanha.
        campaignId: 'CODIGO_DA_SUA_CAMPANHA',
 
        // Valor total do pedido
        total  : getDataLayer('transactionTotal'),
 
        //Codigo de identificação da venda
        numeroPedido :  getDataLayer('transactionId'),
 
        //(Opcional) Para identificação e controle dos clientes indicados
        cliente: {
            nome: getDataLayer('transactionConsumer'), // Nome do cliente
            email: getDataLayer('transactionEmail'), // Email do cliente,
            documento: getDataLayer('transactionDoc')  //CPF ou CNPJ do cliente
        },
        //(Opcional) Para converter um bônus específico para campanhas com mais de bônus de recompensa
        index: '1'        
    });
</script>

Existem situações em que pode haver lentidão no processo de carregamento ou execução da pagina de checkout, nestes caso é interessante adicionar ao script um timeout para a execução.

<script>
	function getDataLayer(key) {
		for(var i = 0; i<dataLayer.length; i++) {
			if(dataLayer[i][key]) {
				return dataLayer[i][key];
			}
		}
	}
</script>
<script>
    setTimeout(window.Tracker({
        _event : 'bonus',
 
        // ID da campanha.
        campaignId: 'CODIGO_DA_SUA_CAMPANHA',
 
        // Valor total do pedido
        total  : getDataLayer('transactionTotal'),
 
        //Codigo de identificação da venda
        numeroPedido :  getDataLayer('transactionId'),
 
        //(Opcional) Para identificação e controle dos clientes indicados
        cliente: {
            nome: getDataLayer('transactionConsumer'), // Nome do cliente
            email: getDataLayer('transactionEmail'), // Email do cliente,
            documento: getDataLayer('transactionDoc')  //CPF ou CNPJ do cliente
        },
        //(Opcional) Para converter um bônus específico para campanhas com mais de bônus de recompensa
        index: '1'        
    }), 3000);
</script>

O exemplo acima possui o mesmo script no entanto neste casso foi adicionado um timeout de 3000 ms (3 segundos), isso significa que será executado somente após 3 segundos após o carregamento da página.

Actualizado em: 15/03/2023