Acompanhar o comportamento do Preenchimento automático com o Google Analytics 4

1. Introdução

Este codelab mostra como rastrear o comportamento de preenchimento automático nos seus formulários da Web usando o Google Analytics 4 (GA4). Ele se baseia nos conceitos e na motivação para medir o preenchimento automático discutidos em artigos como Medir o preenchimento automático do navegador nos seus formulários em web.dev.

Você vai aprender a:

• Implemente JavaScript para detectar interações de preenchimento automático, incluindo quando um campo é preenchido automaticamente, manualmente ou uma combinação dos dois.
• Defina um evento personalizado do GA4 para acompanhar o status do preenchimento automático.
• Envie dados de preenchimento automático como parâmetros personalizados para o GA4.
• Configure dimensões personalizadas no GA4 para geração de relatórios.
• Entenda como analisar os dados coletados.

Essa abordagem permite entender com que frequência os usuários usam o preenchimento automático, quais campos são preenchidos automaticamente com mais frequência e identificar possíveis problemas com a usabilidade do formulário. Assim, você terá insights sobre como melhorar a experiência do usuário e aumentar as conversões.

Pré-requisitos

• Conhecimento básico de HTML, CSS e JavaScript.
• Uma propriedade do Google Analytics 4 configurada no seu site.
• Familiaridade com a biblioteca gtag.js para enviar eventos ao GA4.
• Acesso ao HTML do formulário que você quer rastrear.
• Entendimento básico dos relatórios do Google Analytics 4.

O que você vai aprender

• Como detectar o comportamento de preenchimento automático usando JavaScript, considerando diferentes cenários de interação do usuário.
• Como criar eventos personalizados do GA4 com parâmetros significativos.
• Como enviar parâmetros de evento personalizados para o GA4, incluindo identificadores de formulário e campo.
• Como configurar dimensões personalizadas no GA4 para analisar os dados coletados.

O que é necessário

• Um editor de texto ou ambiente de desenvolvimento integrado.
• Um navegador da Web com ferramentas para desenvolvedores.
• O código do seu site.
• Sua conta do Google Analytics 4.

2. Implementar a lógica de detecção de preenchimento automático

Nesta etapa, vamos adicionar código JavaScript à sua página da Web. Esse script monitora os campos do formulário para detectar quando eles são preenchidos usando o recurso de preenchimento automático de um navegador em vez de entrada manual.

Exemplo de estrutura de formulário HTML

Primeiro, vamos analisar o exemplo de formulário HTML com que vamos trabalhar. Os principais pontos são:

• O formulário tem um id (por exemplo, myForm) e, idealmente, um atributo data-form-id (por exemplo, data-form-id="myForm").
• Cada campo de entrada que você quer rastrear precisa de um id exclusivo (por exemplo, id="name", id="email").

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

O JavaScript de rastreamento do preenchimento automático

Este é o código JavaScript que realiza a detecção. Ele inicializa o rastreamento, detecta mudanças nos campos especificados, determina o status do preenchimento automático e envia um evento ao GA4 quando o formulário é enviado.

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

Configuração (crucial!)

Antes que o script funcione corretamente, você precisa modificar estas duas linhas no código JavaScript:

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

Ação necessária:se você não atualizar formId e fieldsToTrack para corresponder aos IDs específicos do formulário e dos campos HTML, o script de acompanhamento não vai encontrar os elementos do formulário e nenhum dado será enviado ao Google Analytics.

Prática recomendada: use data-form-id. O script fornecido prioriza o uso do atributo data-form-id do formulário (se presente) ao enviar o parâmetro form_id para o GA4. Isso geralmente é mais robusto do que depender apenas do atributo id, principalmente se você rastrear vários formulários ou usar frameworks que podem manipular IDs de elementos. Verifique se data-form-id está definido no seu

para esse benefício.

Explicação do código:

• form.dataset.formId: recebe o valor do atributo data-form-id para usá-lo como parâmetro formId.
• event.preventDefault(): impede o envio padrão do formulário, permitindo que enviemos o evento antes de enviar o formulário.
• gtag('event', 'autofill_form_interaction', ...): envia o evento personalizado com os seguintes parâmetros:
• form_id: o ID do formulário.
• field_id: o ID do campo.
• autofill_status: o status atual do preenchimento automático do campo.
• form.submit(): envia o formulário depois de enviar o evento para o GA4.
• document.addEventListener('DOMContentLoaded', ...): garante que o script só seja executado depois que a estrutura HTML da página for totalmente carregada, evitando erros ao tentar encontrar elementos que ainda não existem.

3. Teste

• Envie o formulário no navegador.
• Use os relatórios Tempo real ou DebugView no GA4 para verificar se o evento autofill_form_interaction está sendo enviado.
• Verifique se os parâmetros de evento estão preenchidos corretamente (por exemplo, form_id, field_id, autofill_status).

Dica profissional para testes:use o DebugView no GA4 (em "Configurar" > "DebugView") para uma validação detalhada e em tempo real de eventos e parâmetros. Ele fornece informações mais imediatas e granulares do que o Relatório de tempo real padrão durante o teste.

Correspondência exata necessária:ao criar dimensões personalizadas, verifique se o nome do "Parâmetro de evento" inserido no GA4 (por exemplo, field_id) corresponde exatamente à chave de parâmetro usada na chamada gtag('event', ...) no código JavaScript, incluindo sublinhados e maiúsculas/minúsculas.

4. Configurar dimensões personalizadas no GA4

Para usar os parâmetros field_id e autofill_status nos relatórios do GA4, crie dimensões personalizadas:

1. Acesse sua propriedade do GA4.
2. Acesse Configurar > Definições personalizadas.
3. Crie uma dimensão personalizada:
   • Parâmetro de evento : field_id
   • Nome da dimensão : Field ID
   • Escopo:evento
4. Crie outra dimensão personalizada:
   • Parâmetro de evento : autofill_status
   • Nome da dimensão : Autofill Status
   • Escopo:evento
5. Crie uma terceira dimensão personalizada:
   • Parâmetro de evento : form_id
   • Nome da dimensão : Form ID
   • Escopo:evento

Importante: atraso no processamento: as dimensões personalizadas recém-criadas podem levar até 48 horas para serem processadas pelo Google Analytics. Não será possível ver ou usar essas métricas nos seus relatórios imediatamente após a criação. Planeje de acordo e volte mais tarde.

5. Analisar dados no GA4

Depois de coletar dados, você pode analisá-los nos relatórios do GA4:

1. Acesse Relatórios > Engajamento > Eventos.
2. Selecione seu autofill_form_interaction evento.
3. Use o menu suspenso Dimensão secundária para selecionar suas dimensões personalizadas (por exemplo, "ID do campo", "Status do preenchimento automático", "ID do formulário"). Adicionar "ID do campo" mostra quais campos específicos do formulário estão acionando o evento autofill_form_interaction.Para ter insights mais detalhados sobre como cada campo foi preenchido, marque "Status do preenchimento automático" como outra dimensão ao lado de "ID do campo". Essa combinação mostra diretamente a distribuição dos tipos de interação para cada campo.
4. Crie Análises detalhadas para ter mais insights sobre os dados. Você pode usar diferentes técnicas, como:
   • Formato livre: para analisar os dados e criar visualizações personalizadas.
   • Tabela: para ver os dados em formato de tabela.
   • Funil: para analisar a jornada do usuário no formulário. Uma análise detalhada de funil pode ajudar a visualizar como os usuários avançam em um formulário de várias etapas, destacando potencialmente os estágios em que o comportamento de preenchimento automático (ou a ausência dele) afeta a progressão.
   

Acesse insights mais detalhados:embora os relatórios de eventos padrão sejam úteis, use as Análises detalhadas do GA4 (formato livre, análise detalhada de funil etc.) combinadas com suas dimensões personalizadas "ID do campo" e "Status do preenchimento automático" para uma análise muito mais rica e flexível do comportamento de preenchimento automático do usuário.

Exemplos de perguntas que você pode responder com esses dados:

• Quais campos são preenchidos automaticamente com mais frequência?
• Com que frequência os usuários usam o preenchimento automático?
• Há campos específicos em que os usuários costumam preencher as informações manualmente?
• O comportamento do preenchimento automático muda com o tempo?
• Como o comportamento do preenchimento automático muda dependendo do formulário?

6. Outras considerações

• Validação de formulário:considere como a validação de formulário afeta a detecção de preenchimento automático. Se a validação falhar, o evento de mudança poderá não ser acionado corretamente.
• Formulários dinâmicos:se você tiver formulários dinâmicos, verifique se o código JavaScript pode processar mudanças no número e nos IDs dos campos. Talvez seja necessário usar MutationObserver para acompanhar as mudanças no formulário.
• Performance:evite adicionar muito JavaScript à sua página. Teste o código para verificar o impacto no desempenho.
• Privacidade do usuário:tenha cuidado com a privacidade do usuário ao coletar dados. Evite coletar informações sensíveis sem consentimento adequado.
• Limites de eventos:o GA4 tem limites para o número de eventos e parâmetros que você pode enviar. Planeje sua implementação de acordo com isso.
• Vários formulários:se você tiver vários formulários na mesma página, adapte o código para acompanhar todos eles. Você precisará adaptar o seletor formId e o listener de eventos a cada formulário.
• Acessibilidade:garanta que sua implementação seja acessível a usuários com deficiências.
• Teste:teste sua implementação em diferentes navegadores e dispositivos para garantir que ela funcione conforme o esperado.

7. Conclusão

Você conseguiu! Desde a configuração dos listeners JavaScript até a configuração dessas dimensões personalizadas no Google Analytics 4, você concluiu as etapas e realmente dominou o acompanhamento do preenchimento automático. Agora você está totalmente equipado e pronto para transformar os dados coletados em experiências do usuário genuinamente agradáveis e eficientes nos seus formulários.

Prepare-se para receber insights valiosos! Você poderá identificar exatamente como os usuários interagem com cada campo, descobrir quais partes dos formulários se beneficiam mais do preenchimento automático e identificar pontos de fricção que podem ter ficado invisíveis antes. Com esse conhecimento, você pode fazer ajustes inteligentes e direcionados, simplificar a jornada do usuário, reduzir o abandono de formulários e aumentar ainda mais as taxas de conversão.

Agora você tem o poder de otimizar e refinar continuamente seus formulários da Web. Pense nisso não apenas como um codelab concluído, mas como o início de uma aventura emocionante e contínua no design orientado a dados. Então, aproveite seus novos superpoderes analíticos, teste melhorias e faça com que seus formulários não sejam apenas funcionais, mas absolutamente incríveis para todos os usuários que interagem com eles. Boa otimização!