Como configurar a análise de rastreamento de formulários com o Google Tag Manager e o Google Analytics
Publicados: 2022-04-12A taxa de conversão é uma das medidas mais simples e ao mesmo tempo mais importantes de eficiência de marketing. Ele mostra quantos usuários concluíram uma ação de destino: fizeram uma compra, se inscreveram para receber e-mails, solicitaram uma ligação, etc. Para registrar e analisar as vendas do e-commerce, temos o Google Analytics, que é relativamente fácil de configurar. No entanto, é necessário mais esforço para rastrear formulários enviados em um site.
Isso porque os formulários são de tipos diferentes e usam tecnologias diferentes para enviar dados ao servidor. Depois que os dados são enviados com sucesso, alguns campos do formulário são atualizados. Outros mostram uma janela pop-up. Um terceiro tipo redireciona o usuário para uma página de agradecimento. O método de rastreamento de formulários depende da tecnologia usada.
Neste artigo, mostramos como coletar dados de formulários de diferentes maneiras e transferi-los para o Google Analytics.
Índice
- Método 1. Página de agradecimento separada
- Método 2. Enviar acionador de formulário no Gerenciador de tags do Google
- Etapa 1. Ativar variáveis de formulário
- Etapa 2. Ajuste o gatilho
- Etapa 3. Verifique se o gatilho funciona
- Etapa 4. Crie a tag
- Etapa 5. Configure seu destino no Google Analytics
- Método 3. Acionador de disponibilidade do elemento no Gerenciador de tags do Google
- Método 4. Rastrear formulários que usam AJAX
- Etapa 1. Crie uma tag para verificar como seu formulário funciona
- Etapa 2. Crie uma variável de camada de dados
- Etapa 3. Crie o acionador
- Método 5. Eventos DataLayer como gatilho
- Quanto tempo os usuários gastam preenchendo seus formulários
Método 1. Página de agradecimento separada
Se o usuário for redirecionado para uma página separada com um URL diferente depois de preencher o formulário, acompanhar as visitas a esse URL é o método mais fácil de acompanhar o envio do formulário. Basta você criar um target com o tipo “Landing Page” no Google Analytics.
Digamos que você queira acompanhar as inscrições para um webinar. A página de agradecimento após o registro bem-sucedido fica assim: https://www.site.com/registration/thankyou
No painel Admin, em Configurações de exibição , em Destinos, clique em Destino e, em seguida, clique em Personalizado . Especifique o nome do destino, selecione o tipo de destino e insira o endereço da página de agradecimento:
O que é importante considerar: o URL da sua página de agradecimento deve ser único – ou seja, deve haver apenas uma página no site com esse endereço, e os usuários não devem conseguir acessar essa página sem preencher o formulário. Caso contrário, o Google Analytics pode registrar dados imprecisos sobre a conquista de sua meta.
Melhores Casos de Marketing OWOX BI
BaixeMétodo 2. Enviar acionador de formulário no Gerenciador de tags do Google
Se seus programadores configuraram corretamente a transmissão de dados de um formulário por meio do botão de envio, para envios de rastreamento de formulários, você pode usar o acionador integrado do Gerenciador de tags do Google. A julgar pelos comentários na Internet, essa situação é encontrada com pouca frequência, mas vale a pena tentar.
Usando esse método, quando um usuário preenche e envia um formulário, o gatilho envia um evento gtm.formSubmit para a matriz dataLayer.
Observação: antes de acessar as configurações, verifique se a tag de visualização de página está ativada no Gerenciador de tags do Google para todas as páginas do site.
Etapa 1. Ativar variáveis de formulário
Para isso, abra o menu Variáveis no GTM, clique em Configurar e selecione todas as variáveis na seção Formulários:
Etapa 2. Ajuste o gatilho
Você precisa de um ID de formulário ou atributo de classe de formulário para criar um gatilho. Você pode vê-los no código HTML clicando com o botão direito do mouse em seu formulário e clicando em Explorar Item no Firefox ou Visualizar Código no Chrome:
Em nosso exemplo, o id do formulário é send-request-form, que usaremos ao configurar o gatilho.
Vá para o menu Triggers , clique em New , abra Trigger Settings e selecione Submit Form :
Na janela que se abre, você verá duas caixas de seleção:
Wait for tags – Se você habilitar esta opção, o formulário não será enviado até que todas as tags associadas a ele sejam ativadas ou o tempo especificado expire.
Verificar validação – É melhor habilitar esta opção. Caso contrário, o gatilho será acionado mesmo quando o usuário não tiver preenchido os campos obrigatórios.
Depois de ativar a verificação de erros, são exibidas configurações adicionais. Se você habilitar o gatilho, especifique o URL da página que contém seu formulário. E se você ativar o gatilho, especifique o ID do formulário que mencionamos acima:
Crie um nome conveniente e compreensível para o gatilho, como Enviar uma solicitação, e salve-o.
Etapa 3. Verifique se o gatilho funciona
Antes de publicar alterações em um contêiner, use o modo de visualização no Gerenciador de tags do Google. Abra a página com o formulário, preencha e clique em enviar. No console de depuração, um evento gtm.formSubmit deve aparecer.
Se esse evento não aparecer, esse método de rastreamento não funcionará para você. Nesse caso, tente um dos outros métodos descritos neste artigo.
Caso o evento apareça, ainda é necessário realizar mais um teste para verificar se o trigger funciona corretamente. Abra um formulário, deixe algum campo obrigatório em branco e envie o formulário. Se um evento gtm.formSubmit aparecer novamente no console de depuração, o gatilho interno funcionará incorretamente e não ajudará você. Se o evento não foi transferido, ótimo! Vá para as próximas etapas.
Etapa 4. Crie a tag
Agora você precisa criar uma tag que enviará ao Google Analytics informações de que o formulário foi enviado. Para fazer isso, acesse o menu Tags , clique em Novo, abra Configuração de tags e selecione Google Analytics – Universal Analytics.
Para maior clareza, você pode nomear a tag da mesma forma que o acionador. A seguir, preencha os seguintes campos:
- Tipo de tag – selecione {{Configurações do Google Analytics}}
- Tipo de faixa - selecione "Evento"
- Categoria – o mesmo que a tag e o acionador por conveniência
- Ação - Enviando
- Rótulo – por exemplo, {{Form ID}})
- Não-Interação – deixe “Falso”
Se você quiser ativar a tag, selecione o acionador que você criou na Etapa 3 e clique em Salvar :
Está pronto! Você pode verificar como a tag gerada funciona ao enviar um formulário usando o modo de visualização do Gerenciador de tags do Google ou usando o relatório de eventos em tempo real no Google Analytics.
Etapa 5. Configure seu destino no Google Analytics
Depois de publicar o contêiner com as alterações, você precisa configurar o destino no Google Analytics para considerar o envio de formulários como conversões. Para fazer isso, adicione uma nova meta própria nas configurações de visualização do Google Analytics. Selecione o tipo de evento e preencha os campos Categoria, Ação e Atalho da mesma forma que você fez quando configurou a tag no Gerenciador de tags do Google:
Salve o alvo. Feito. Você configurou o rastreamento de formulários sem alterar nenhum código em seu site!
Método 3. Acionador de disponibilidade do elemento no Gerenciador de tags do Google
Se uma janela aparecer no site com um agradecimento ou uma mensagem sobre o envio bem-sucedido após o envio de um formulário, você poderá tentar outro gatilho GTM integrado. Ele é acionado quando um item específico aparece na tela (no nosso caso, uma janela pop-up) e despacha um evento gtm.elementVisibility para o dataLayer.
Para configurar este acionador, você deve conhecer o seletor CSS do item monitorado. Para localizar esse seletor, clique com o botão direito do mouse na janela e selecione Exibir código . Você está procurando a seguinte linha:
Para copiar o seletor CSS, clique com o botão direito do mouse na linha e selecione Copiar – Copiar seletor:
Em nosso exemplo, o seletor se parece com isso: #webinar_marketing_automation > div.
Em seguida, crie um novo acionador selecionando o tipo de visibilidade do elemento :
Preencha os seguintes campos:
- Nome do gatilho – por exemplo, “Obter gravação de webinar”
- Método de Seleção – Seletor CSS
- Seletor de Elemento – Insira o valor que você copiou do código HTML da janela pop-up.
- Regra de gatilho – Se você tiver um formulário na página, deixe a opção “Uma vez por página”. Se houver vários formulários e uma mensagem aparecer, você pode selecionar "Uma vez por elemento".
- Em seguida, marque a caixa “Registrar alterações do DOM”.
- Disparar Condições de Ativação – Ao selecionar “Alguns eventos de visibilidade”, você pode especificar a página onde a mensagem pop-up ou texto aparece.
- Salve o gatilho.
Depois de criar o acionador de Disponibilidade do Elemento, você deve ajustar as mesmas configurações conforme descrito em detalhes no Método 2:
- Adicione uma nova tag ao GTM que enviará dados de envio de formulário ao Google Analytics e anexe o gatilho criado a ele.
- Visualize como a tag funciona quando o formulário é enviado.
- No Google Analytics, defina o destino do evento para acompanhar as conversões.
Método 4. Rastrear formulários que usam AJAX
Se os formulários do seu site usarem a tecnologia AJAX, os dados serão transferidos do navegador para o servidor em segundo plano e a página não será recarregada. Para configurar o rastreamento do envio de formulários AJAX, você pode usar este script da Lunametrics:
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script> Este código verifica se seu formulário realmente usa AJAX, então cria a variável e aciona no Google Tag Manager.
Etapa 1. Crie uma tag para verificar como seu formulário funciona
No Gerenciador de tags do Google, abra Tags , clique em Novo , clique em Configuração de tags e selecione HTML personalizado . Copie o código acima e cole-o na caixa de texto. Especifique todas as páginas como acionadores:
Em seguida, ative a visualização do GTM, abra a página do formulário, preencha o formulário e envie-o.
Se no console de depuração aparecer um evento ajaxComplete (como na captura de tela acima), seu formulário usa AJAX e esse método de rastreamento combina com você. Nesse caso, leia mais.
Etapa 2. Crie uma variável de camada de dados
Se você clicar no evento ajaxComplete no console de visualização e abrir a guia Data Layer, verá quais informações são passadas para a matriz de camada de dados após o envio do formulário.
Estamos interessados na linha de resposta neste código; contém texto informando que o formulário foi enviado com sucesso:
Esta linha pode ser usada para criar a variável e acionar no Google Tag Manager. Abra a seção Variables no GTM, clique em Create e, na tela Variable Configuration, selecione Data Layer Variable. No campo Data Layer Variable Name, escreva attribute.response (é possível nomear duas variáveis da mesma forma) e salve as configurações.
Por que inserir attribute.response em vez de response ? Porque atributos é um objeto que contém a chave de resposta e seu valor. Ao fazer isso, apontamos o GTM para o caminho exato para os dados que nos interessam.
Depois de criar uma variável, é necessário verificá-la. Para isso, envie um formulário em modo de visualização. Clique no evento ajaxComplete e abra a guia Variáveis no Google Tag Manager. Se você vir a variável attribute.response e o texto sobre o envio bem-sucedido do formulário, significa que você configurou tudo corretamente.
Etapa 3. Crie o acionador
Na seção Configuração do acionador, clique em Criar, depois em Configuração do acionador e selecione o tipo de evento Usuário . Especifique ajaxComplete no campo Nome do Evento. Em seguida, como condição para ativar o gatilho, selecione Alguns eventos personalizados e registre uma condição: a variável attribute.response contém {digite seu texto personalizado sobre o envio bem-sucedido do formulário}.
Depois disso, o que resta é:
- Adicionando uma nova tag de acompanhamento de eventos ao GTM que enviará informações de envio de formulário ao Google Analytics e anexará o gatilho criado a ele.
- Usando o modo de visualização para verificar como a tag funciona ao enviar um formulário.
- Definir o destino do evento para rastrear conversões no Google Analytics.
Descrevemos essas configurações em detalhes acima na seção Método 2. Enviar acionador de formulário no Gerenciador de tags do Google.
Método 5. Eventos DataLayer como gatilho
O rastreamento de formulários usando o método dataLayer .push é, a nosso ver, a solução mais confiável e versátil. A única desvantagem é que, se você não entender o código, precisará da ajuda de desenvolvedores.
Preparar especificações técnicas para desenvolvedores
Faça uma lista das configurações que deseja transferir no dataLayer depois que o formulário for enviado com sucesso. Peça aos seus desenvolvedores para adicionar este código a todas as páginas com formulários que você deseja monitorar:
dataLayer.push({
'evento':'Formulários',
'variável': 'valor'
})
Onde:
- Evento é o nome de um evento. Você pode substituí-lo por qualquer evento que seja conveniente para você.
- Variável é um conjunto de todas as variáveis que você deseja transferir junto com um evento.
Depois que seus programadores configurarem o método dataLayer.push para todos os formulários, você poderá verificar como ele funciona. Para isso, inclua uma prévia no Google Tag Manager e preencha o formulário em seu site. No console de depuração, deve haver um novo evento (no nosso exemplo, chama-se OWOX). Ao clicar em um evento e ir para a aba dataLayer, você verá todos os parâmetros que são transferidos para o array de dados:
No exemplo do nosso evento na captura de tela acima (baixando um arquivo PDF do blog), consideramos como configurar o rastreamento com o GTM.
Primeiro, crie todas as variáveis de usuário necessárias: eventCategory, eventAction, eventLabel, etc. Em seguida, selecione a seção Variable Type in User-Defined Variables e insira um nome de variável entre chaves: {{eventCategory}}:
Em seguida, crie um trigger do tipo Custom Event. Nas configurações, especifique o nome do evento e defina o gatilho para disparar em Todos os eventos personalizados:
Em seguida, crie uma tag que encaminhará eventos para o Google Analytics. Defina o tipo de tag como Google Analytics – Universal Analytics e defina o tipo de rastreamento como Evento.
Além disso, preencha estes campos:
- Categoria – {{eventCategory}}
- Ação – {{eventAction}}
- Rótulo – {{eventLabel}}
Em seguida, selecione uma variável {{configurações do Google Analytics}} e o acionador que você criou na etapa anterior:
Tudo está pronto. Tudo o que resta é verificar se a tag funciona no modo de visualização do GTM e nos relatórios do Google Analytics em tempo real.
Quanto tempo os usuários gastam preenchendo seus formulários
Agora que você pode descobrir quantos usuários preencheram o formulário com sucesso, será útil descobrir quais problemas foram encontrados por aqueles que não o preencheram.
Seus desenvolvedores precisam adicionar ao dataLayer os nomes e valores de todos os parâmetros necessários para a análise de formulários. Isso ajudará você a acompanhar:
- Tempo desde a abertura da página até a ativação do campo
- Tempo desde a ativação do campo até a desativação do campo
- Tempo desde a ativação do primeiro campo até o primeiro envio do formulário
- Tempo desde a ativação do primeiro campo até o envio bem-sucedido do formulário
- Tempo desde a ativação do primeiro campo até o envio do formulário com falha
- Tempo para obter uma resposta do servidor sobre o envio bem-sucedido de um formulário
- Tempo para obter uma resposta do servidor sobre o envio de um formulário sem sucesso
- Tempo desde a ativação do formulário até quando um usuário sai do formulário (sem enviá-lo com sucesso)
Depois de configurar a coleta desses dados no Google Analytics, você poderá importar esses dados para o Google BigQuery – por exemplo, usando OWOX BI. Em seguida, você pode criar qualquer relatório de análise de formulário no Planilhas Google usando o complemento gratuito OWOX BI BigQuery Reports.
Esses relatórios ajudarão você a encontrar e corrigir problemas na usabilidade de seus formulários e, assim, aumentar sua taxa de conversão.
Aqui estão alguns exemplos de tais relatórios e as perguntas que eles podem responder:
1. Ao interagir com quais campos de formulário os usuários encontram um erro com mais frequência?
2. Quanto tempo os usuários gastam para preencher o formulário?
3. Quanto tempo os usuários gastam preenchendo o formulário e do que isso depende?
PS Se você precisar de ajuda para configurar a análise de formulários e criar um sistema de métricas personalizado para sua empresa, envie um email para [email protected] ou preencha o formulário de contato no site da OWOX.