Eventos do GTM no checkout

Por padrão, o checkout emite eventos em cada uma de suas etapas. Esses eventos podem ser monitorados e usados para integrar com o Google Tag Manager (GTM) para rastrear ações do usuário. Veja a seguir exemplos e detalhes de cada evento.

Ao iniciar o checkout

Quando o cliente acessa o checkout, disparamos o evento abaixo com os dados do carrinho ativo no momento:

dataLayer.push({
  event: "init-checkout",
  init_checkout_data: {
    items: [
      {
        sku: "24023",
        name: "Meu produto",
        image: "link-imagem-produto",
        price: 428.76,
        total: 428.76,
        quantity: 1,
        has_stock: true,
        details: [],
        increment: 1,
        path: "/url-do-produto"
      }
    ],
    id: "88693",
    subtotal: "428.7600",
    total: "428.7600",
    discount: 0,
    shipping_description: "",
    delivery_price: 0,
    coupon: null,
    count: 1,
    custom_inputs: {},
    conversion_id: 83089
  }
})

Dependendo da plataforma que você utiliza, você pode ter acesso a dados adicionais. Para visualizar esses dados, basta inspecionar o código no seu navegador.

Ao atualizar o checkout

Sempre que algo muda no carrinho — como a aplicação de um desconto, a alteração do total após a seleção de um meio de pagamento, entre outros — disparamos o seguinte evento:

dataLayer.push({
  event: "update-checkout",
  update_checkout_data: {
    items: [
      {
        sku: "24023",
        name: "Meu produto",
        image: "link-imagem-produto",
        price: 428.76,
        total: 428.76,
        quantity: 1,
        has_stock: true,
        details: [],
        increment: 1,
        path: "/url-do-produto"
      }
    ],
    id: "88693",
    subtotal: "428.7600",
    total: "428.7600",
    discount: 0,
    shipping_description: "",
    delivery_price: 0,
    coupon: null,
    count: 1,
    custom_inputs: {},
    conversion_id: 83089
  }
})

Dependendo da plataforma que você utiliza, é possível acessar dados adicionais. Para visualizá-los, basta inspecionar o código no seu navegador.

Ao cadastrar um usuário

Quando um cliente cria sua conta no checkout, disparamos o seguinte evento:

dataLayer.push({
  event: "signup",
  signup_data: {
    email: "leonardo@email.com",
    firstname: "leonardo",
    lastname: "vilarinho",
    cpf: "134.716.616-54",
    custom_inputs: {}
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizá-los, basta inspecionar o código diretamente no seu navegador.

Ao autenticar um usuário

Quando um cliente faz login ou o checkout detecta que ele já está autenticado, disparamos o seguinte evento:

dataLayer.push({
  event: "login",
  login_data: {
    email: "leonardo@email.com",
    firstname: "leonardo",
    lastname: "vilarinho",
    cpf: "134.716.616-54",
    custom_inputs: {}
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizá-los, basta inspecionar o código diretamente no seu navegador.

Ao editar um usuário

Quando um cliente faz alterações nos seus dados ou passa pela etapa de perfil, disparamos o seguinte evento:

dataLayer.push({
  event: "customer-update",
  customer_update_data: {
    email: "leonardo@email.com",
    firstname: "leonardo",
    lastname: "vilarinho",
    cpf: "134.716.616-54",
    custom_inputs: {}
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizá-los, basta inspecionar o código diretamente no seu navegador.

Ao selecionar um endereço

Quando um cliente seleciona ou edita um endereço durante o processo de checkout, disparamos o seguinte evento:

dataLayer.push({
  event: "address-select",
  address_select_data: {
    city: "Ituiutaba",
    firstname: "leonardo",
    lastname: "vilarinho",
    street: "Rua Juquinha Gouveia",
    id: "12",
    phone: "(34) 99882-7432",
    number: "224",
    complement: "",
    neighborhood: "Residencial Jardim Europa II",
    state: "Minas Gerais",
    cep: "38308409",
    custom_inputs: {},
    is_default: false
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizá-los, basta inspecionar o código diretamente no seu navegador.

Ao selecionar um pagamento

Quando um cliente seleciona o método de pagamento para finalizar a compra, disparamos o seguinte evento:

dataLayer.push({
  event: "payment-select",
  payment_select_data: {
    type: "pix",
    gateway: "mpago",
    discount: 0,
    criterias: {headers: {}, original: [], exception: null}
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizá-los, basta inspecionar o código diretamente no seu navegador.

Ao finalizar a compra

Quando um cliente clica para finalizar a compra, disparamos o seguinte evento:

dataLayer.push({
  event: "purchase",
  purchase_data: {
    subtotal: "428.7600",
    items: [
      {
        sku: "24023",
        name: "Meu produto",
        image: "link-da-imagem-do-produto",
        price: 428.76,
        quantity: 1,
        total: 394.46,
        quantity: 1,
        has_stock: true,
        details: [],
        increment: 1,
        path: "/link-do-produto"
      }
    ],
    total: "424.3600",
    discount: 34.3,
    shipping_description: "TRANSPORTADORA - Normal (9 dias úteis)",
    delivery_price: 29.9,
    coupon: null,
    count: 1,
    custom_inputs: {},
    conversion_id: 83089,
    order: "200000058",
    method: "pix"
  }
})

Dependendo da plataforma utilizada, você poderá acessar dados adicionais. Para visualizar essas informações, basta inspecionar o código diretamente no seu navegador.

Ao acessar uma página

Sempre que o cliente troca de página no checkout, disparamos o evento abaixo:

dataLayer.push({
  event: "page",
  location: {
    href: "link-completo-do-checkout",
    origin: "https://checkout.app.com",
    protocol: "https:",
    host: "checkout.app.com",
    hostname: "checkout.app.com",
    port: "",
    pathname: "/checkout/etapa",
    search: "dados-query-string-do-checkout",
    hash: ""
  },
  title: "Compra finalizada"
})

Em cada etapa do checkout, o pathname será diferente, representando a fase atual do processo. Seguem os pathname disponíveis:

• /checkout/verify - assim que o cliente entra no checkout.
• /checkout/login - tela de login.
• /checkout/register - tela de cadastro.
• /checkout/confirmation - tela de recuperação de senha.
• /checkout/profile - tela de perfil do usuário logado.
• /checkout/address - tela para seleção do endereço de entrega.
• /checkout/shipping - tela para seleção do meio de entrega.
• /checkout/payment - tela de pagamento.
• /checkout/success - tela de pedido finalizado.

Ao remover um produto

Quando um produto é removido do carrinho, enviamos o seguinte evento após a remoção, contendo informações sobre o produto removido e o estado atual do carrinho:

dataLayer.push({
  event: "cart-remove-item",
  cart_remove_item_data: {
    product: {
      sku: "24023",
      name: "Meu produto",
      price: 428.76,
    },
    cart: {
      items: [
        {
          sku: "24023",
          name: "Meu produto",
          image: "link-imagem-produto",
          price: 428.76,
          total: 428.76,
          quantity: 1,
          has_stock: true,
          details: [],
          increment: 1,
          path: "/url-do-produto"
        }
      ],
      id: "88693",
      subtotal: "428.7600",
      total: "428.7600",
      discount: 0,
      shipping_description: "",
      delivery_price: 0,
      coupon: null,
      count: 1,
      custom_inputs: {},
      conversion_id: 83089
    }
  }
})

Dependendo da plataforma que você está utilizando, pode ser possível acessar mais dados. Para explorar essas informações, basta inspecionar os dados no navegador.

Ao atualizar um produto

Quando um produto é editado no carrinho, enviamos o seguinte evento com as informações sobre o produto atualizado e o estado atual do carrinho após a alteração:

dataLayer.push({
  event: "cart-update-item",
  cart_update_item_data: {
    product: {
      sku: "24023",
      name: "Meu produto",
      price: 428.76,
    },
    cart: {
      items: [
        {
          sku: "24023",
          name: "Meu produto",
          image: "link-imagem-produto",
          price: 428.76,
          total: 428.76,
          quantity: 1,
          has_stock: true,
          details: [],
          increment: 1,
          path: "/url-do-produto"
        }
      ],
      id: "88693",
      subtotal: "428.7600",
      total: "428.7600",
      discount: 0,
      shipping_description: "",
      delivery_price: 0,
      coupon: null,
      count: 1,
      custom_inputs: {},
      conversion_id: 83089
    }
  }
})

Dependendo da plataforma que você está utilizando, pode ser possível acessar mais dados. Para explorar essas informações, basta inspecionar os dados no navegador.