Como configurar o rastreamento de eventos do Google Analytics para um formulário de registro

O que você vai aprender

Aprenda a enviar a atividade dos seus formulários de registro do Klaviyo para o Google Analytics 4 (GA4), incluindo aberturas, envios e fechamentos de formulário. Você também pode marcar interações importantes, como form_submit, como eventos principais no GA4. Siga este processo de 2 etapas:

1. Adicione um snippet de código ao seu site para enviar os dados do formulário de registro do Klaviyo para o Google Analytics.
2. Marque os eventos que são importantes para o seu negócio como eventos-chave no Google Analytics.

Antes de começar

Antes de adicionar o snippet, verifique se um formulário da Klaviyo está ativo no seu site e se a sua tag do Google está configurada para sua propriedade do GA4. O snippet usa gtag, que precisa ser definido e configurado na página antes que ocorram eventos do formulário. Este snippet envia eventos do formulário para o GA4; ele não instala o Google Analytics.

Configurar o rastreamento de eventos dos seus formulários de registro no Google Analytics exige colar um snippet de código no seu site. Se você não se sentir à vontade para colar código e não tiver um desenvolvedor para ajudar, a Klaviyo tem uma ampla rede de parceiros no nosso Diretório de parceiros. 

Acompanhe a atividade do formulário do Klaviyo

Você pode acompanhar a atividade de formulários do Klaviyo no Google Analytics adicionando um listener para o evento klaviyoForms e enviando um evento do GA4 para cada interação que você quiser medir. Instale o listener uma vez em cada página em que você quiser acompanhar formulários e garanta que ele seja carregado antes da atividade do formulário que você quer capturar.

• Se você estiver usando a Shopify, cole o snippet no arquivo theme.liquid em uma nova linha acima da tag de fechamento </body>. Observe que, se você estiver usando páginas de produto personalizadas, talvez seja necessário adicionar esse snippet a um arquivo de tema diferente ou às suas páginas de produto personalizadas individuais.
• Como alternativa, se o seu tema Shopify 2.0 tiver uma seção ou bloco de Liquid personalizado, adicione o snippet lá em cada modelo em que o seu formulário aparecer. Escolha um método de instalação por página para evitar o envio de eventos duplicados.
• Se você estiver usando uma vitrine Stencil do BigCommerce, use o Gerente de scripts dessa vitrine para adicionar o snippet ao rodapé nas páginas da vitrine.

Use o listener a seguir com gtag.js para enviar aberturas de formulário, envios, envios de etapas, redirecionamentos de URL e fechamentos para o Google Analytics:

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

Salve as alterações do seu site e, em seguida, siga as etapas de teste abaixo para confirmar que o listener envia eventos para sua propriedade do GA4.

Para monitorar diferentes versões de formulário ou fazer um teste A/B de variantes, adicione form_version_id aos parâmetros de cada chamada gtag que você quer comparar. Por exemplo, use esta chamada no branch form_open:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'form_version_id': e.detail.formVersionId })

Substitua a chamada a seguir em vez de adicionar uma segunda chamada. Mantenha form_id definido como e.detail.formId para que o listener use o formulário que acionou o evento:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId })

Para comparar versões em relatórios ou explorações do GA4, crie uma dimensão personalizada com escopo de evento para form_version_id. Use o mesmo processo para outros parâmetros personalizados sobre os quais você quer criar relatórios, como step_name.

Em um formulário de várias etapas, o navegador pode enviar mais de 1 evento submit durante uma única interação com o formulário. Com o snippet acima, cada um desses eventos envia um evento form_submit para o GA4. O evento de envio é acionado nas seguintes circunstâncias:

• Em formulários com ações de inscrição por e-mail ou SMS, quando um e-mail ou número de telefone é enviado com sucesso, isso aciona um evento de envio.
• Em formulários que coletam assinaturas de e-mail e SMS em etapas separadas, o envio de cada etapa de assinatura aciona um evento de envio. Por exemplo, enviar a etapa de e-mail e, em seguida, a etapa de SMS envia 2 eventos form_submit para o GA4.
• Em formulários que contêm apenas campos de perfil, como campos de texto, a primeira etapa enviada que coleta esses campos aciona um evento de envio. Para enviar a etapa, clique em um botão com Ação definido como Enviar formulário.

O evento stepSubmit é acionado quando cada etapa é enviada. O snippet envia essas interações para o GA4 como form_step_submit, com form_id e step_name para que você possa identificar o formulário e a etapa.

Teste seu código de rastreamento

Depois de instalar o código de rastreamento no seu site, você pode testá-lo para garantir que os dados estão sendo rastreados. Para testar seu código:

1. Acesse seu site e interaja com o formulário (por exemplo, enviando ou fechando).
2. Abra o Google Analytics, selecione a propriedade do GA4 configurada para o seu site e navegue até Relatórios > Em tempo real.
3. Em Contagem de eventos por nome do evento, procure o evento que corresponde à sua ação. Por exemplo, fechar o formulário envia form_close. Selecione o evento para verificar se o parâmetro form é um formulário do Klaviyo e se form_id corresponde ao formulário que você testou. Em um formulário de várias etapas, verifique form_submit e form_step_submit conforme você envia cada etapa de assinatura.

Se você não estiver vendo seus eventos, verifique se o Google Analytics está configurado corretamente e se o snippet de código que você usou está correto. Além disso, observe que seus eventos só ficarão visíveis no Realtime por 30 minutos. Consulte [GA4] Relatório Realtime para mais detalhes.

Marque eventos importantes do formulário como eventos-chave

Depois de confirmar que os eventos de formulário chegam ao GA4, escolha quais interações são importantes o suficiente para marcar como eventos principais. Por exemplo, escolha form_submit para medir os envios. Você precisa de acesso de Editor ou Administrador para concluir a configuração abaixo.

1. No Google Analytics, navegue até Administrador > Exibição de dados > Eventos. Abra a guia Eventos recentes e encontre o evento que você quer marcar, como form_submit.
2. Clique no ícone de estrela ao lado do evento para marcá-lo como um evento principal.

Se o seu evento ainda não apareceu, você pode marcar um novo evento como evento-chave com antecedência. Use o nome exato enviado pelo snippet, como form_submit.

Para contar os envios de um formulário específico, crie um evento separado com base em valores de parâmetros com as condições correspondentes event_name igual a form_submit e form_id igual ao ID desse formulário. Dê a ele um nome de evento distinto e, em seguida, marque esse novo evento como um evento-chave.

O GA4 conta eventos principais de acordo com o método de contagem do evento: Uma vez por evento conta cada ocorrência, enquanto Uma vez por sessão conta uma vez dentro de uma sessão. Revise as contagens de eventos principais do seu formulário em Administrador > Exibição de dados > Eventos na guia Eventos principais.

Recursos adicionais