Um guia para o modo de visualização do Gerenciador de tags do Google

Por que minha tag não é disparada? Que dados posso enviar para o Google Analytics? Por que esse gatilho não funcionou?

Quando se trata do Gerenciador de tags do Google, às vezes encontramos problemas que exigem uma investigação mais aprofundada do que está acontecendo. Uma das etapas mais importantes, mas comumente negligenciadas, no processo GTM é a depuração. Ele garante que todos os cenários possíveis de experiência do usuário sejam testados e a consistência dos dados seja validada.

Neste guia, mostrarei como utilizar o modo de visualização do Gerenciador de tags do Google (também conhecido como modo de visualização e depuração ) e compartilharei algumas práticas recomendadas.

O que é o modo de depuração do Gerenciador de tags do Google?

O modo de visualização do Gerenciador de tags do Google (também conhecido como modo de visualização e depuração, também conhecido como P&D) permite que você navegue em um site no qual seu código de contêiner GTM está implementado e visualize quais tags estão disparando, que tipo de dados eles enviam para plataformas de análise/marketing, etc.

Ao ativar o modo de visualização na interface do Gerenciador de tags do Google, você terá três guias do navegador (ou duas guias e uma janela adicional):

• Uma guia com a interface do Gerenciador de tags do Google
  
   .
• Uma nova guia para  tagassistant.google.com, onde o console de visualização real é exibido
  
   .
• Uma nova guia (ou janela) onde você vê seu site e um emblema do modo de visualização no canto inferior direito da tela.
  

Por que o modo de visualização é necessário? Porque não há nada pior do que trabalhar com GTM às cegas e tentar adivinhar se sua configuração está funcionando.

O modo de visualização do Gerenciador de tags do Google permite:

• Veja quais tags foram disparadas em interações específicas do site (por exemplo, um clique em um link ou envio de formulário)
• Quais tags não foram disparadas
• Os motivos pelos quais determinadas tags foram ou não disparadas
• Que tipo de variáveis ​​(e seus valores) estavam disponíveis na página
• Como a camada de dados  mudou na página quando várias interações estavam acontecendo, etc.

Pessoalmente, geralmente nunca confio no meu instinto quando se trata de modificar minhas configurações do GTM. Eu sempre os testo, mesmo os menores. Porque é o pior descobrir (depois de vários dias (ou talvez semanas)) que sua alteração recente quebrou algo na configuração de análise.

Teste sempre. Em seguida, publique suas alterações ao vivo.

Agora, vamos dar uma olhada em como o modo de visualização funciona e como trabalhar com ele.

Ativar visualização e modo de depuração

Para ativar o modo de depuração do Gerenciador de tags do Google, clique no  botão Visualizar no canto superior direito da interface do GTM (perto do botão Enviar  ).

Depois de clicar no botão Visualizar, uma nova guia do navegador será aberta com  tagassistant.google.com . 

Um pop-up solicitará que você insira o URL que deseja testar e depurar. Pode ser o endereço de uma página inicial ou pode ser o URL de uma página específica e, em seguida, pressione  Iniciar .

Uma nova guia (ou janela) do navegador deve aparecer onde você verá a URL inserida no pop-up anterior. Se a página não funcionar, tente ativar o modo de visualização novamente e desative esta caixa de seleção no pop-up da visualização:

Na parte inferior dessa página/guia, você deve ver o seguinte emblema:

E se você voltar para a  guia tagassistant.google.com , deverá ver esta mensagem de sucesso.

Se você não vir a mensagem de sucesso ou se o emblema de visualização mostrar que o depurador não está conectado, leia isto .

O layout da página de visualização do Gerenciador de tags do Google

O modo de depuração do Gerenciador de tags do Google (também conhecido como Console do Gerenciador de tags do Google ou apenas console do GTM ) consiste em seis partes principais:

1. Linha do tempo do evento . Exibe todos os eventos na camada de dados (por exemplo, visualizações de página, envios de formulários, cliques, etc.). Um item = um evento (aka dataLayer.push). Não os confunda com eventos do Google Analytics. Esses são dois conceitos diferentes, que discuti em outro post do blog .
2. Etiquetas . Exibe quais tags dispararam no evento da camada de dados selecionado e quais não dispararam.
3. Variáveis ​​. Exibe informações detalhadas sobre variáveis ​​no evento selecionado, incluindo o tipo de variável, o tipo de dados retornado e o valor resolvido.
4. Camada de Dados . Exibe o objeto de mensagem exato conforme foi enviado para a camada de dados para o evento selecionado e a aparência da camada de dados após a conclusão da transação da mensagem. Todos os pontos de dados disponíveis aqui podem ser transformados em variáveis ​​(que aparecerão na  guia Variáveis ). Continue lendo para saber mais.
5. Erros . Se notar algum número na aba (ao invés de 0), clique nele e veja a causa.
6. Cabeçalho. Aqui você pode ver o status do modo de visualização (se ele está conectado à janela do site recém-aberta ou não). Além disso, se você tiver o Universal Google Analytics implementado via gtag.js ou estiver executando o Google Analytics 4 em seu site, verá um menu suspenso para alternar entre

Linha do tempo do evento

Todos os eventos na camada de dados  são exibidos no lado esquerdo do console Preview and Debug, Event Timeline. Sempre que uma página é carregada, três eventos devem ser exibidos na lista – Container Loaded (anteriormente conhecido como Pageview ), DOM ready e Window carregado .

Se você vir mais eventos (por exemplo,  Message ), tudo bem. Mas todos os três eventos mencionados devem aparecer na lista de cada página.

Se você está perdendo o evento Container Loaded , provavelmente há um caso de camada de dados quebrada. Publiquei uma postagem no blog explicando o problema e a solução quando o  evento Container Loaded não aparece no modo GTM P&D .

Além disso, quando você navega de uma página para outra em seu site (que você está depurando), todos os eventos no modo de visualização serão agrupados com base nessas páginas.

Por que sempre há três eventos em cada página?

O que eles querem dizer?

Container Loaded (também conhecido como gtm.js ) é o primeiro momento em que o GTM começa a carregar e quando nossos scripts de rastreamento podem ser acionados. Por exemplo, é quando você deve disparar a tag de rastreamento de exibição de página do Google Analytics. Mesmo que a página não tenha terminado de carregar, seu script de rastreamento ainda será iniciado. Anteriormente, esse evento era chamado de Pageview .

 O evento DOM Ready (também conhecido como gtm.dom ) ocorre quando o HTML do site é baixado, o documento da página é renderizado e um visitante começa a ver os elementos do seu site. Saiba mais .

O evento Window Loaded (também conhecido como gtm.load ) é acionado somente quando todo o resto (incluindo Javascript) termina de carregar.

Quais são outros possíveis eventos do Gerenciador de tags do Google?

Na verdade, a lista de eventos é interminável.

O Gerenciador de tags do Google oferece uma lista de acionadores integrados, como exibição de página (incluindo  exibição de página, pronto para DOM e carregado em janela ), clique ( clique no link e  clique em qualquer elemento ), envio de formulário , cronômetro , alteração do histórico , erro de Javascript , etc

Depois que um gatilho é ativado, ele procura interações específicas em seu site. Por exemplo, o  acionador de envio de formulário procura por envios de formulário e o acionador de clique no link  aguarda interações quando um visitante clica em qualquer link.

Quando ocorre a interação desejada, esse evento aparece na Linha do tempo do evento.

Então, por que eu disse que a lista de eventos do GTM é interminável? É por causa do último tipo de trigger, chamado  Custom.

Um evento personalizado é um evento definido por você, seu desenvolvedor ou uma solução de terceiros implementada em seu site.

Se você quiser saber mais sobre rastreamento de evento personalizado, dê uma olhada no vídeo abaixo (mas lembre-se de que neste vídeo eu estava usando a versão mais antiga do modo de visualização):

Ao clicar em qualquer evento na linha do tempo, você pode ver quais tags foram disparadas e quais não foram. É aí que a  guia Tags se torna super importante.

Tag

Esta aba exibe todos os tags disponíveis divididos em dois grupos: os que dispararam no evento selecionado e os que não dispararam. O que torna esta seção incrível é a capacidade de descobrir por que uma determinada tag foi ou não disparada.

Escolha qualquer evento na Linha do tempo do evento (1) e clique na tag de seu interesse (2).

O que você verá é uma visão muito mais detalhada do que acontece com essa tag:

1. Propriedades da etiqueta.
2. Acionadores da tag.
3. Gatilhos de bloqueio.

Se você estiver usando gatilhos mais complexos com várias condições, poderá ver o status de cada condição (dê uma olhada na captura de tela abaixo). A caixa de seleção verde indica que a condição foi atendida. Caso contrário, aparecerá um X vermelho.

Além disso, no canto superior direito do modo de visualização (enquanto você ainda clicou na tag, você pode alternar entre “Nomes” e “Valores”. Isso afetará como as variáveis ​​são exibidas em sua tag.

Se você escolher  Names , verá seus nomes reais, mas se quiser ver seus valores naquele momento, mude para  Values ​​.

Para mim, mudar para “Valores” é mais conveniente. Isso me permite identificar rapidamente quais valores foram enviados para minhas ferramentas de análise/marketing.

Além disso, você pode verificar rapidamente se os valores em seu gatilho correspondem aos seus requisitos.

MUITO IMPORTANTE: Não depure tags individuais com um  resumo selecionado acima da linha do tempo do evento. Esta é uma maneira incorreta de fazer isso. Sempre selecione primeiro o evento no fluxo de eventos e só então clique na tag para depurar.

Variáveis

OK, vamos para a  guia Variáveis . Ele exibe informações detalhadas sobre variáveis ​​no evento selecionado , incluindo o tipo de variável, o tipo de dado retornado e o valor resolvido.

Estas variáveis ​​estão ao seu dispor. Você pode inseri-los em qualquer tag ou gatilho que desejar (ou até mesmo em outra variável) , seja uma tag de evento do Google Analytics, tag de evento Mixpanel ou qualquer outra coisa. As variáveis ​​podem ser incluídas colocando-as entre chaves {{ }}. Dê uma olhada no exemplo abaixo.

Alterne entre eventos GTM (na linha do tempo) e você verá como os valores das variáveis ​​mudam dependendo do contexto.

Camada de Dados

A guia Camada de dados é provavelmente a parte mais subestimada do console de visualização do GTM entre os iniciantes (e, com bastante frequência, também entre os novos usuários intermediários).

Esta guia mostra o objeto de mensagem exato que foi enviado para a camada de dados  para o evento selecionado e a aparência da camada de dados após a conclusão da transação da mensagem.

Em outras palavras, você pode ver todos os dados atualmente disponíveis na camada de dados e quais valores estavam disponíveis após cada evento do Gerenciador de tags do Google. E a melhor parte: cada ponto de dados (enviado para a camada de dados) pode ser transformado em uma variável no Google Tag Manager.

Mesmo que você veja algumas informações úteis na guia Camada de dados, não poderá usá-las no GTM até criar variáveis ​​para elas.

A guia de variáveis ​​(do painel de depuração do Gerenciador de tags do Google) exibe apenas as variáveis ​​configuradas na interface do Gerenciador de tags do Google, por exemplo, Caminho da página, URL da página etc. Portanto, se você tiver algo interessante na camada de dados que gostaria de passar para o Google Analytics, você precisará criar uma variável de camada de dados  na interface do GTM.

Digamos que você queira enviar um evento do Google Analytics quando alguém deixar um comentário. Com cada evento, você também deseja enviar o nome completo do autor do artigo. Dessa forma, você verá quais autores geram o maior envolvimento do leitor.

Na conta do Gerenciador de tags do Google, você deve ir para Variáveis ​​e criar uma nova com as seguintes configurações ( dlv significa  variável da camada de dados ):

Depois  de atualizar o modo P&D E seu site na janela do navegador,  você deverá ver uma nova variável na  guia Variáveis  ​​a cada novo carregamento de página. Posteriormente, você pode incluir essa variável {{dlv – Post Author}} nas tags do Google Analytics (ou qualquer outra).

Em minha outra postagem no blog, como rastrear formulários AJAX com o Gerenciador de tags do Google , expliquei como você pode se aprofundar na camada de dados, extrair valores aninhados e transformá-los em variáveis ​​GTM. Essa técnica simples já foi útil tantas vezes que mal consigo imaginar como costumava trabalhar sem ela.

guia de erros

Eu não visito esta guia com muita frequência (porque poucas tags realmente lançam erros que são exibidos lá). Mas se notar algum número na aba (ao invés de 0), clique nele e veja a causa. Essa guia é exibida se um modelo de tag do GTM não foi acionado devido a um erro. Aqui está um guia rápido sobre isso .

Atualize o modo de visualização

Se você fizer algumas alterações no contêiner e quiser visualizá-las no site, deverá atualizar o modo de visualização.

Para fazer isso, você deve ir para a interface do Gerenciador de tags do Google e pressionar  Visualizar  novamente. Em seguida, conclua as etapas e o modo de visualização será recarregado.

Compartilhar o modo de visualização do GTM

Para compartilhar o modo de visualização com alguém, primeiro você precisa ativar o modo de visualização e, no canto superior direito, clicar em três pontos > Compartilhar .

Em seguida, aparecerá um pop-up onde você terá que:

1. Digite o link do site onde o modo de visualização deve ser ativado
2. Selecione qual container habilitar (se houver vários GTM Containers ou GTAGs). IMPORTANTE: você deve selecionar o contêiner GTM no menu suspenso
   
3. Copie o link e compartilhe com alguém que você deseja

Outra opção é clicar no ícone X no canto superior esquerdo (enquanto estiver no modo de visualização), ativar a  caixa de seleção Manter o domínio… ativado para depuração e clicar em Fechar depurador.

Então você verá a lista de todos os modos de visualização que você ativou. Ao lado da visualização que você deseja compartilhar, clique em três pontos e clique em  Compartilhar.

Depois de clicar nele, o pop-up acima mencionado aparecerá.

Se você ativou o modo de visualização em algum momento, basta acessar  tagassistant.google.com  e concluir as mesmas etapas descritas acima.

Sair do modo de visualização

Se você deseja sair do modo de visualização, a melhor maneira é clicar em Concluir no emblema do modo de visualização (exibido no canto inferior direito do seu site).

Se isso não ajudar e você continuar vendo esse selo em todas as exibições de página do site, leia este guia .

Depurando vários domínios (com o mesmo contêiner)

Se você estiver trabalhando com vários domínios (que fazem parte da mesma jornada do cliente) e esses domínios estiverem usando o mesmo contêiner do Gerenciador de tags do Google, será necessário ativar o modo de visualização em ambos os domínios.

Primeiro, abra tagassistant.google.com (ou apenas clique no botão Visualizar na interface do GTM) e insira o domínio do segundo site. Conclua todas as etapas necessárias para ativar o modo de visualização.

Em seguida (também em  tagassistant.google.com ), clique no ícone X no canto superior esquerdo + selecione  Manter o domínio XXXXX habilitado para depuração . Clique em Fechar depurador. Dessa forma, você manterá o 2º site no modo de visualização.

Em seguida, pressione o botão Visualizar na interface do GTM OU o botão Adicionar domínio  em  tagassistant.google.com  e adicione o domínio do primeiro site. Conclua todas as etapas necessárias até que o site 1 seja aberto em uma nova guia ou janela.

O que fizemos aqui foi definir o  cookie primário _TAG_ASSISTANT=X em ambos os domínios (e isso é necessário para que o modo de visualização funcione). É por isso que agora você pode navegar entre os dois domínios no modo de visualização e verá todos os eventos/dados provenientes de ambos os sites.

Depurando iFrames

O novo modo de visualização também oferece suporte à depuração de iFrames. Mas há mais coisas relacionadas a isso. Por  isso, publiquei um post separado no blog .

Depurando gtag.js

Se você tiver o GTAG (um código de acompanhamento mais recente do Google Analytics/Google Ads) em execução em seu site (ou se tiver implementado o Google Analytics 4), também poderá visualizar hits com o novo modo de visualização (porque eles são enviados com gtag () comandos).

Depois de habilitar o modo de visualização e depuração em um determinado domínio, você pode alternar para algum GTAG ID no menu suspenso (no canto superior esquerdo).

Além disso, se você estiver trabalhando com Zonas (esse é um recurso do GTM360), também poderá encontrar contêineres de zona.

Se você alternar para a depuração de GTAG, poderá ver um conteúdo diferente da linha do tempo do evento. Além disso, algumas das guias desaparecerão (como Tags e Variáveis). Em vez disso, você verá hits que foram enviados, camada de dados e erros.

Sinta-se à vontade para clicar nesses hits e ver quais parâmetros foram enviados com uma solicitação gtag.js.

Aprimoramentos com a extensão do Chrome do Assistente de tags

Você pode melhorar o modo de visualização instalando uma extensão de navegador chamada Tag Assistant Companion . Isso é especialmente útil se você odeia quando seu site (durante a depuração) é aberto em uma nova janela (pelo menos é o que acontece no Google Chrome).

Com a extensão instalada, seu site será aberto em uma nova guia (em vez de uma janela) quando você ativar o modo de visualização. Isso significa que você pode usar coisas como depuração móvel novamente.

Além disso, você poderá depurar várias guias ao mesmo tempo.

Além disso, algumas formas/emojis aparecem na linha do tempo do evento e no emblema do modo de visualização (no seu site). Eles são adicionados para ajudá-lo a distinguir rapidamente qual janela está sendo depurada no momento.

No meu vídeo (no início deste tutorial), também mostrei que você pode ver essas formas/emojis no título da página. Infelizmente, esse recurso foi removido rapidamente após o lançamento devido a várias reclamações de usuários (esse recurso poluía relatórios que continham o título da página).

Além disso, o Tag Assistant Companion ajuda você a depurar iframes .

Exclua a referência tagassistant.google.com e remova gtm_debug=x do URL

Ao usar o modo de visualização do GTM, você começará a ver o tráfego de tagassistant.google.com (isso significa que suas sessões podem vir dele). Além disso, em seus relatórios do GA, você começará a ver exibições de página contendo gtm_debug=x.

Em ambos os casos, se isso for um problema para você, eu diria que você deve excluir seu tráfego dos relatórios do GA. Para fazer isso, vá para Admin > Propriedade > Fluxos de dados > Selecione seu fluxo de dados da Web > Configurar tags > Mostrar tudo > Listar referências indesejadas e adicione  tagassitant.google.com lá.

Falando do gtm_debug=x nos relatórios (e removendo-o), siga este guia .

Se o modo de visualização do Gerenciador de tags do Google não estiver funcionando

Se você estiver enfrentando dificuldades com o modo de visualização e depuração (por exemplo, ele não é exibido), leia este guia de solução de problemas . Eu mantenho este post do blog o mais atualizado possível.

Mais algumas dicas

Aqui estão mais algumas dicas rápidas que não cabem em nenhum capítulo anterior deste post do blog:

• Se você vir o evento “Mensagem” antes do evento de exibição de página na linha do tempo do evento do console de visualização e depuração, não se preocupe. Isso significa que seu desenvolvedor, plug-in ou solução específica de terceiros enviou alguns dados para a camada de dados, mas esse dataLayer.push não continha uma chave de “evento”. Use o modo de depuração GTM para explorar quais dados exatos foram enviados naquele momento. Talvez você encontre algo útil!
• Embora o modo de depuração do Gerenciador de tags do Google seja uma parte muito importante da implantação de tags, não é a única ferramenta que você deve usar. Aqui está uma lista de extensões do Chrome do Gerenciador de tags do Google que facilitarão muito o seu trabalho.
• Se você estiver depurando eventos do Google Analytics, SEMPRE verifique-os nos relatórios em tempo real do GA. É a melhor maneira de verificar e reagir a erros sem demora.
• Um monte de outras dicas de depuração do GTM está disponível aqui .

Modo de visualização do Gerenciador de tags do Google: conclusão

O modo de visualização do Gerenciador de tags do Google (também conhecido como modo de depuração do Gerenciador de tags do Google ou simplesmente modo de visualização e depuração ) é uma parte essencial da implantação de tags, o que nos ajuda a garantir que todos os cenários possíveis de experiência do usuário sejam testados e a consistência dos dados seja validada.

Isso nos traz mais transparência sobre o que está acontecendo nos bastidores, quais dados estão sendo buscados ou enviados, por que uma determinada tag não está sendo disparada, etc.

Mas é importante entender que este não é o único lugar onde você deve verificar/testar sua implementação de gerenciamento de tags. Há muito mais coisas que você precisa ter em mente .

Perdi alguma coisa relacionada ao modo de depuração do Gerenciador de tags do Google? Se sim, deixe-me um comentário abaixo.