Blog

VTEX - Evento: checkout

A VTEX cria um evento no Tag Manager para cada etapa percorrida pelo usuário. Basicamente iremos mapear esses eventos e enviá-los para a Dito.

As propriedades são dos eventos serão as mesmas. Portanto, o processo de criação das tags será bem parecido, bastando mudar a propriedade que diferencia as etapas.

Confira abaixo a lista dos eventos criados pela VTEX.

  • email: E-mail
  • profile: Dados pessoais
  • shipping: Endereço de entrega
  • payment: Pagamento

Será criada uma tag para cada evento, bastando mudar a propriedade etapa.

  1. Cria uma nova tag escolhendo a opção Custom HTML Tag;

  2. Configure a tag com o código abaixo:

<script type="text/javascript">
        var total_frete = ({{orderFormShipping}} || 0) / 100;
        var total = {{orderFormTotal}} / 100;
        var subtotal = total - total_frete;

        dito.track({
          action: 'acessou-checkout-email', // Opções: acessou-checkout-pagamento, acessou-checkout-dados-pessoais, acessou-checkout-endereco-entrega
          data: {
            quantidade_produtos: {{orderFormProducts}}.length,
            total: total,
            subtotal: subtotal,
            total_frete: total_frete
          }
        });
      </script>

  1. No 3º passo, escolha a opção More;

  2. Na lista de Triggers, clique em New e selecione a opção Custom Event;

  3. No campo Event name, digite email;

  4. Clique em Save Trigger;

  5. Dê um nome para seu trigger: VTEX - Checkout - E-mail;

  6. Salve sua tag.

Repita o processo para o restante dos eventos: profile, shipping, payment.

Configuração das variáveis

  1. Na aba Variables, vá até a seção User-Defined Variables e clique no botão New;

  2. Selecione a opção Data Layer Variable;

  3. No campo Data Layer Variable Name, digite orderFormProducts;

  4. Dê um nome para sua variável: orderFormProducts

  5. Salve sua variável.

Repita o mesmo processo para o restantes das variáveis: orderFormTotal, orderFormShipping.

Voltar