Coletar dados usando ferramentas como o Google Analytics é fundamental para expandir o alcance online do seu negócio, converter leads em clientes e otimizar uma estratégia de marketing digital para criar relacionamentos mais fortes com seu público.
No entanto, coletar dados é mais fácil falar do que fazer. O Google Analytics e outras ferramentas de análise semelhantes ajudam no processo, mas funcionam de forma mais eficaz com a adição de tags.
O que são tags do Google?
Tags, em um sentido geral, são pedaços de código que você incorpora no javascript ou HTML do seu site para extrair certas informações.
Para os profissionais de marketing, as informações de tags necessárias geralmente incluem quanto tempo os usuários visitam uma página em seu site, envios de formulários, como chegaram ao site, em quais links clicaram ou até mesmo em quais produtos removeram do carrinho de compras.
Cada tag rastreia algo diferente. Por exemplo, você pode criar uma tag apenas para ver quantas pessoas preenchem o formulário na sua página “Fale Conosco”. Essa tag pode enviar informações mais precisas para o Google Analytics, AdWords ou outro terceiro.
Infelizmente, a codificação manual de tags pode ser um processo tedioso e difícil para profissionais de marketing sem muita experiência em desenvolvimento ou codificação, além de consumir muito tempo para preencher tickets para o departamento de TI.
Com o Gerenciador de tags do Google, todo o processo de marcação se torna muito mais fácil. Tudo o que você faz é inserir um código nas páginas do seu site uma vez e, a cada vez que quiser criar uma tag, o Gerenciador de tags do Google a codifica e a incorpora para você.
O que é o Gerenciador de tags do Google?
O Gerenciador de tags do Google é um sistema de gerenciamento de tags que permite criar e monitorar tags em uma interface de usuário, sem escrever um novo código toda vez que você deseja criar uma tag. Você simplesmente incorpora o código do Google Tag Manager em cada página do seu site. Isso elimina o processo manual de criação de tags, tornando seu processo de marketing mais eficiente e preciso.
O Gerenciador de tags do Google faz algumas coisas: primeiro, ele permite que seus desenvolvedores e departamento de TI se concentrem em tarefas mais amplas, eliminando o fardo de codificar cada tag de marketing individual.
Em segundo lugar, como o Gerenciador de tags do Google codifica as tags para você, ele reduz significativamente a possibilidade de erro humano.
E terceiro, o Gerenciador de tags do Google permite que seu departamento de marketing assuma o controle total sobre as tags que eles criam e monitoram. Dar aos seus profissionais de marketing controle total sobre suas tags aumenta a eficiência. Além disso, o uso de tags melhora a precisão do seu sistema analítico, garantindo relatórios de maior qualidade e uma melhor percepção do seu verdadeiro público online.
Com tudo isso dito, ainda é uma ferramenta que você pode querer experimentar antes de decidir se é um ajuste perfeito – talvez você já tenha um sistema de marcação instalado ou não sinta que precisa desse nível de organização, já que seu site geralmente não precisa de novas tags.
O Gerenciador de tags do Google é gratuito, então você pode experimentá-lo praticamente sem riscos. Aqui, mostraremos como configurar uma conta, como criar uma nova tag, como usar o Gerenciador de tags do Google com sua conta do Google Analytics e como incorporar a ferramenta no WordPress.
Depois disso, você pode decidir por si mesmo se é o sistema certo para o seu negócio.
Como configurar o Gerenciador de tags do Google
Configurar uma conta
Configurar uma conta gratuita é um processo fácil de duas etapas, mas é separado de qualquer outra conta do Google Analytics ou Gmail. Para garantir uma configuração simples para você, registramos nosso processo de configuração de uma conta.
Aqui está o que você faz:
1. Inscreva-se para uma conta.
Acesse o Gerenciador de tags do Googlee clique no botão verde “Inscreva-se gratuitamente”. Ele solicitará que você insira o nome da sua conta (empresa), país e URL do site, bem como onde deseja usar o Google Tag (web, iOS, android, AMP). Quando terminar, clique no botão azul “Criar”.
2. Siga as instruções de codificação.
Em seguida, você receberá códigos e instruções para incluir um código no alto do <head> da sua página e o outro após a tag de abertura <body>. Você pode fazer isso agora ou aplicar os códigos em seu site mais tarde (eles podem ser acessados em seu painel). Assim que terminar, clique em “Ok”.
Configurar uma etiqueta
Depois de criar uma conta do Gerenciador de tags do Google, a primeira coisa que você vai querer aprender é como configurar uma tag.
Você pode criar configurações ilimitadas de tags no Google Tag Manager.
Isso é útil para criar relatórios detalhados sobre o comportamento do seu público, mas pode se tornar ineficiente se você não organizar suas tags adequadamente.
O Google recomenda usar a seguinte convenção de nomenclatura: tipo de tag – nome do aplicativo – detalhes.
Talvez você nomeie uma configuração de marcação, “Conversões do Google AdWords – iOS – campanha 2018-02” e depois outra, “Google Analytics – CTA – página Sobre nós”.
Desta forma, você pode identificar e coletar corretamente dados relacionados a campanhas ou páginas específicas.
Por exemplo, a segunda tag, “Google Analytics – CTA – página Sobre nós”, informa o desempenho do botão de call-to-action Sobre nós. Essas informações são valiosas e podem ser perdidas se você nomear suas tags de maneira mais geral, como “botão CTA”.
Agora que esclarecemos isso, vamos verificar como configurar uma tag:
1. Crie uma nova tag no painel do Google Tag Manager.
No painel do Gerenciador de tags do Google, clique no botão “Adicionar uma nova tag”, circulado abaixo em vermelho.
2. Configure sua tag.
Dê um título à sua tag e clique em qualquer lugar na caixa superior “Configuração da tag” para escolher um tipo de tag.
3. Escolha um tipo de tag.
Existem dezenas de tipos de tags (nem todos são exibidos aqui e você também pode personalizar um tipo de tag). Eu escolhi “Google Analytics clássico”.
4. Vincule sua tag ao rastreamento do Google Analytics.
Se você deseja que sua tag seja rastreada no Google Analytics, a próxima etapa será inserir seu ID de propriedade da Web, encontrado em sua conta do Google Analytics. Em seguida, selecione um “Tipo de faixa”. Eu escolhi “Page View”, mas há muitas outras opções.
5. Escolha um acionador para determinar quando a tag é gravada.
Em seguida, escolha um gatilho (um gatilho significa quando você deseja que a tag seja gravada, ou seja, “toda vez que alguém visita a página”). Escolhi “Todas as páginas” para obter informações sempre que alguém visualiza qualquer uma das minhas páginas da web, mas isso varia de acordo com seus propósitos.
6. Salve sua etiqueta.
Quando estiver satisfeito com as informações nas caixas “Tag Configuration” e “Triggering”, clique no botão azul “Save”.
7. Ative sua etiqueta pressionando “Enviar”.
Em seguida, clique no botão azul “Enviar”. Sua tag não funcionará até que você faça isso.
Ao clicar em “Enviar”, você será direcionado para a página “Configuração de envio”. Existem duas opções: “Publicar e Criar Versão” ou “Criar Versão”. Como estou pronto para inserir a tag em todas as páginas do meu site, selecionei “Publicar e criar versão” e pressionei o botão azul “Publicar” no canto superior direito.
8. Adicione um nome e uma descrição às suas tags para mantê-las organizadas.
Por fim, você verá esta “Descrição da versão do contêiner”. Para manter suas tags organizadas, adicione um nome e uma descrição para entender o que você está tentando registrar com essa tag.
9. Certifique-se de que sua tag apareça no relatório “Resumo da versão”.
Agora, você criou com sucesso sua primeira tag.
Gerenciador de tags do Google e Google Analytics
Se você deseja usar o Gerenciador de tags do Google em conjunto com o Google Analytics, há algumas etapas que você precisa seguir. No entanto, é um esforço que vale a pena — incorporar tags em seu site aumentará a precisão de seus relatórios do Google Analytics.
Primeiramente, você precisará remover o código GA das páginas do seu site. Você só precisará do código de tag do Gerenciador de tags do Google incorporado – se usar os dois, ele relatará tudo duas vezes e bagunçará seus dados.
Em segundo lugar, você provavelmente desejará criar uma variável para seu ID de acompanhamento do Google Analytics. Uma variável é uma ferramenta do Gerenciador de tags do Google destinada a aumentar sua eficiência salvando dados adicionais (opcionais) que você fornece.
Se você salvar seu GA Tracking ID como uma variável, não precisará procurá-lo toda vez que criar uma nova tag para o Google Analytics (o que deixa a pessoa preguiçosa em mim muito feliz).
Como criar uma variável no Google Tag Manager
1. Clique em “Variáveis” na página inicial do Google Tag Manager.
2. Em “Variáveis definidas pelo usuário”, clique em “Novo”.
3. Nomeie sua variável.
Chamei-o de “ID de rastreamento GA” para que eu me lembrasse. Em seguida, clique na caixa “Configuração de variáveis”.
4. Escolha um tipo de variável.
Escolha “Constante” como seu tipo de variável, pois você não deseja que o ID mude para tags diferentes.
5. Salve suas configurações.
Agora, insira seu número de ID de rastreamento do Google Analytics na caixa “Valor” e selecione “Salvar” no canto superior direito.
Em seguida, vamos editar nossa “TestTag1” que criamos anteriormente neste post e incluir a nova variável que você acabou de criar.
Como Editar uma Tag e Alterar seu Valor
1. Escolha uma tag para editar.
De volta à sua página inicial, selecione “Tags” na barra lateral. Clique na tag que deseja editar (eu cliquei em “TestTag1”).
2. Clique no ícone “+” cinza ao lado da caixa “ID da propriedade da Web”.
3. Edite uma variável.
Uma caixa “Escolha uma variável” aparecerá e a primeira opção, “ID de rastreamento do GA”, é a variável que acabamos de criar. Selecione isso.
4. Clique em Salvar.
Agora, o “ID da propriedade da Web” da sua tag deve estar escrito (ou o nome que você deu à sua variável). Clique em salvar e sua tag é atualizada.
Gerenciador de tags do Google para WordPress
Se sua empresa usa o WordPress para hospedar seu site, há um processo fácil de duas etapas para integrar o Gerenciador de tags do Google ao WordPress.
No entanto, se preferir fazê-lo manualmente, é relativamente simples de fazer. Só vai ficar tedioso se você tiver várias páginas diferentes em seu site e quiser usar tags em todas elas — você terá que copiar e colar um código abaixo da tag <body> em cada página.
Aqui está o que você faz:
1. Copie o código da etiqueta.
Copie o código do Google Tag Manager que você recebeu durante o processo de configuração. Se você já configurou sua conta, clique no código azul “Google Tag Manager” ao lado de “Workspace Changes” na página inicial do Google Tag Manager (circulado abaixo em vermelho). Esse código azul também fornecerá seu código específico do Gerenciador de tags do Google.
2. Instale o código no WordPress.
Agora, cole esse código abaixo da tag <body> de cada página do seu site WordPress.
Agora, seu site WordPress está preparado para todas as tags que você deseja criar no Gerenciador de tags do Google. O Gerenciador de tags do Google codificará automaticamente tags futuras e as incorporará em qualquer página selecionada.
Em comparação com as versões anteriores, o Google Analytics 4 oferece mais recursos de rastreamento integrados . Isso inclui downloads de arquivos , cliques de saída , rastreamento de rolagem e muito mais. Mas você sabia que o rastreamento de rolagem integrado no Google Analytics 4 rastreia apenas quando alguém rola abaixo da marca de 90% da altura da página?
E se você também quiser rastrear outros limites (por exemplo, 25%, 50%, 75%)?
Nesta postagem do blog, gostaria de mostrar como implementar o rastreamento de rolagem com o Google Analytics 4 e o Gerenciador de tags do Google e personalizá-lo com base em suas necessidades. Existem duas abordagens possíveis aqui, e explicarei ambas.
Você provavelmente já ouviu falar que o Google Analytics 4 tem um modelo de dados muito mais flexível do que seus antecessores. Mas com grande flexibilidade vem maior responsabilidade. Portanto, você deve decidir de antemão como nomeará e estruturará seus eventos de rolagem. Existem basicamente duas abordagens:
Uma rolagem do nome do evento com o parâmetro percent_scrolled (essa abordagem é baseada no que a medição aprimorada está rastreando)
Nome de evento exclusivo para cada limite de rolagem, por exemplo , scroll_25, scroll_50, scroll_75, scroll_90 (ou qualquer outra taxonomia semelhante). Neste caso, não há necessidade de ter o parâmetro percent_scrolled porque já podemos vê-lo na lista de eventos.
Qual deles você deve escolher?
A primeira abordagem ( rolagem do nome do evento + parâmetro percent_scrolled ) requer o registro de uma dimensão personalizada (se quiser vê-la nos relatórios padrão ou no Looker Studio), e você pode ter até 50 dimensões personalizadas por propriedade do GA4. Se você estiver perto de atingir o limite, esta opção pode não ser adequada para você.
A segunda abordagem (nome de evento exclusivo para cada limite de rolagem, por exemplo, scroll_25, scroll_50). Essa solução é um pouco mais conveniente em relatórios como Exploração de caminho , mas se você decidir usar 10 limites, isso significa 10 nomes de eventos diferentes na lista/relatório. Isso será conveniente para você?
Portanto, cabe a você decidir qual opção escolher.
É um evento e (opcionalmente) uma dimensão personalizada
Ou 4 (ou mais) nomes de eventos distintos
Agora, vamos para a configuração real.
Desativar rastreamento automático de rolagem no GA4
Como vamos configurar o rastreamento de rolagem personalizado com o Google Analytics 4, não há necessidade de manter o nativo ativado. Estamos assumindo o controle!
No Google Analytics, vá para Admin > Fluxos de dados > Selecione seu fluxo de dados da web. Em seguida, clique no ícone de engrenagem…
…e desative o rastreamento de rolagem. Clique em Salvar.
Configurar um gatilho de rolagem
Embora o Gerenciador de tags do Google tenha recursos de rastreamento de rolagem, eles são desativados por padrão.
Vá para Gerenciador de tags do Google > Gatilhos > Novo > Profundidade de rolagem e insira as seguintes configurações:
Se desejar, você pode alterar as porcentagens ou aplicar outros ajustes. A configuração que você vê acima é a mais comum.
Salve o gatilho.
Ativar variável(is) de rolagem
Embora precisemos de apenas uma variável de rolagem nesta configuração, você pode ativar todas elas no contêiner (não haverá nenhum impacto negativo significativo no desempenho da sua página). Vá para Variables > Configure (na seção Built-in variables ) e habilite todas as variáveis relacionadas à rolagem:
Configurar a tag de evento do GA4
Agora é hora de configurar a tag de evento do GA4 que enviará o evento de rolagem. Nesta parte, presumo que você já conheça alguns princípios básicos do GA4 e tenha instalado a tag de configuração do GA4 no GTM.
Depois de instalar a tag de configuração do GA4 no Gerenciador de tags do Google, é hora de escolher qual abordagem implementar:
Uma rolagem de evento com o parâmetro percent_scrolled ?
Vários nomes de eventos de rolagem (um para cada limite) e nenhum parâmetro personalizado relacionado à rolagem
Opção #1: Um evento de rolagem com um parâmetro
No Gerenciador de tags do Google, vá para Tags > Novo > Evento GA4 e insira as seguintes configurações:
Aqui, estamos seguindo a convenção de nomenclatura de Medição aprimorada . Sempre que um visitante ultrapassar um determinado limite de rolagem (configurado em seu acionador de rolagem), essa tag de evento será acionada e, junto com o evento de rolagem , você também enviará o parâmetro personalizado percent_scrolled .
Se quiser usar/ver esse parâmetro em relatórios padrão do GA4 ou no Looker Studio, você também deve acessar GA4 Admin > Definições personalizadas, clicar em Criar dimensão personalizada e inserir as seguintes configurações:
Salve esta dimensão.
Depois de começar a enviar eventos de rolagem, você começará a vê-los em seus relatórios dentro de 24 a 48 horas e poderá usar/ver a dimensão personalizada Porcentagem de rolagem.
Opção nº 2: vários nomes de eventos (um para cada limite de rolagem)
Se você decidir seguir essa abordagem, vá para Tags > Novo > Evento GA4 e insira as seguintes configurações (que estão no Gerenciador de tags do Google):
Aqui, estamos usando a mesma variável Scroll Depth Threshold, mas desta vez, ela é inserida no nome do evento. Portanto, se um visitante ultrapassar o limite de 25%, o nome do evento será scroll_25. Se for 50% — scroll_50 , etc.
Nesse caso, você não precisa criar nenhuma dimensão personalizada.
Teste tudo e publique
Agora, vamos testar tudo. No Gerenciador de tags do Google, clique no botão Visualizar no canto superior direito. Em seguida, insira a URL do seu site onde você testará o rastreamento de rolagem e clique em Iniciar.
Depois de ser redirecionado para o seu site, role para baixo (pelo menos abaixo do limite de 50%).
Em seguida, volte para o modo de visualização (certifique-se de verificar seu contêiner atual).
E você deve ver pelo menos dois eventos de profundidade de rolagem no modo de visualização. Clique em qualquer um deles e verifique se sua tag de evento do GA4 foi disparada. Então confira outro:
Você também pode clicar em uma tag, alternar para Valores e ver que tipo de dados foi enviado ao Google Analytics.
E agora, temos que verificar se o GA4 realmente recebeu os dados. No Google Analytics, vá para DebugView (localizado em Admin > Debugview ). Se houver mais de um dispositivo, você terá que encontrar o seu (no canto superior esquerdo do DebugView).
Como saber qual é o seu? Bem, um deles deve estar enviando eventos de rolagem. Talvez isso ajude a distinguir.
Se tudo estiver configurado corretamente, você deverá começar a ver os eventos scroll ou scroll_xx . Você pode clicar neles e verificar quais outros parâmetros foram enviados com ele.
Na captura de tela abaixo, você verá como deve ser o evento seguindo a primeira abordagem.
Se tudo estiver correto, vá para o Gerenciador de tags do Google, clique em ENVIAR no canto superior direito e depois em PUBLICAR.
Relatórios de rastreamento de rolagem no Google Analytics 4
Depois de começar a rastrear a rolagem no Google Analytics 4, você precisará aguardar de 24 a 48 horas para ver os dados em relatórios regulares.
Você verá os novos eventos de rolagem na lista Relatórios > Engajamento > Eventos (na barra lateral esquerda).
Se você clicar nesse evento, verá vários gráficos adicionais sobre ele.
Se você quiser ver os dados de rolagem em uma página específica do seu site, vá para Explorar > Relatório de formulário livre e faça algumas configurações adicionais.
Configuração #1a: Se você usar um nome de evento de rolagem + quiser analisar a rolagem em uma página
Na coluna Variáveis de Exploração, clique no ícone de adição ao lado de Dimensões .
Localize e adicione a dimensão Percentual rolado (lembre-se: você pode precisar de até 24 horas para começar a ver essa dimensão na lista).
Além disso, adicione a dimensão Page Path
Em seguida, na coluna Configurações da guia , adicione a dimensão Porcentagem de rolagem na seção Linhas .
Não deixe nada na seção Colunas .
Na seção Valores , adicione Usuários Ativos e Contagem de Eventos.
Na seção Filtros, adicione dois filtros:
O nome do evento corresponde exatamente à rolagem
E se quiser restringir a uma página específica, você pode inserir outro filtro com o caminho da página contém xxxxx (por exemplo, /pages/contact-us/). Lembre-se de que o caminho da página não contém um domínio. Você pode ver os exemplos de Caminhos de página em GA4 > Engajamento > Páginas e telas (e, em seguida, alternar para Caminho de página e Classe de tela acima da tabela).
Em seguida, o relatório pode ser algo como isto:
Nesse relatório, você pode ver quantas pessoas em uma determinada página atingiram determinados limites de rolagem.
Configuração #1b: Se você usar um nome de evento de rolagem + analisar várias páginas
Esta é uma variação alternativa da configuração anterior. No exemplo nº 1a, reduzimos a apenas uma única página. Neste exemplo, veremos várias páginas na mesma tabela.
Na coluna Variáveis de Exploração, clique no ícone de adição ao lado de Dimensões.
Localize e adicione a dimensão Percentual rolado (esta é uma dimensão integrada do GA4).
Além disso, adicione a dimensão Page Path
Em seguida, na coluna Configurações da guia , adicione a dimensão Caminho da página na seção Linhas . Selecione para mostrar 25 linhas (ou até mais).
Adicione a dimensão Porcentagem de rolagem na seção Colunas
Na seção Valores , adicione Contagem de eventos.
Na seção Filtros, adicione os seguintes filtros:
O nome do evento corresponde exatamente à rolagem
Percent Scrolled não corresponde exatamente (não definido) (se isso estiver incomodando você e não houver muitos eventos que atendam a esse critério. Caso contrário, você deve identificar e corrigir o problema “não definido”.).
Em seguida, o relatório pode ser algo como isto:
No momento da gravação deste vídeo, parece que você pode classificar os dados apenas pela coluna Totais. Espero que isso mude no futuro.
Configuração nº 2a: Se você usar vários nomes de evento de rolagem + analisar uma página
Se você decidir usar eventos distintos para cada limite de rolagem (por exemplo , scroll_25, scroll_50 etc.), aqui está um exemplo de relatório que você pode criar para uma página específica.
Na coluna Variáveis de Exploração, clique no ícone de adição ao lado de Dimensões. Encontre e adicione a dimensão Page Path e aplique-a.
Em seguida, na coluna Configurações da guia , inclua a dimensão Nome do evento na seção Linhas .
Não deixe nada na seção Colunas .
Na seção Valores , adicione Usuários Ativos e Contagem de Eventos.
Na seção Filtros, adicione os seguintes filtros:
O nome do evento contém scroll (se os nomes dos seus eventos forem scroll_25, scroll_50 , etc.). Dessa forma, corresponderemos a todos os eventos de rolagem, independentemente do nome completo do evento.
E se quiser restringir a uma página específica, você pode inserir outro filtro com o caminho da página contém xxxxx (por exemplo, /pages/contact-us/). Lembre-se de que o caminho da página não contém um domínio. Você pode ver os exemplos de Caminhos de página em GA4 > Engajamento > Páginas e telas (e, em seguida, alternar para Caminho de página e Classe de tela acima da tabela). Consulte a configuração nº 1a nesta postagem do blog para obter mais detalhes.
Em seguida, o relatório pode ser algo como isto:
Aqui vemos quantos usuários ultrapassaram 25%, 50% e outros limites em uma determinada página do site.
Configuração nº 2b: Se você usar vários nomes de eventos de rolagem + analisar várias páginas
Esta é uma variação alternativa da configuração anterior. No exemplo nº 2a, reduzimos a apenas uma única página. Neste exemplo, veremos várias páginas na mesma tabela.
Na coluna Variáveis de Exploração, clique no ícone de adição ao lado de Dimensões. Encontre e adicione a dimensão Page Path e aplique-a.
Em seguida, na coluna Configurações da guia , adicione a dimensão Caminho da página na seção Linhas . Selecione para mostrar 25 linhas (ou até mais).
Adicione a dimensão Nome do evento na seção Colunas
Na seção Valores , adicione Contagem de eventos.
Na seção Filtros, adicione o seguinte filtro: Nome do evento contém rolagem.
Em seguida, o relatório pode ser algo como isto:
Aqui você pode ver suas páginas “mais roladas” e como o drop-off muda em cada limite.
Rastreamento de rolagem com o Google Analytics 4: palavras finais
E esse é o fim de mais um post do Google Analytics 4 aqui no Analytics Mania. Existem basicamente duas abordagens que você pode escolher se decidir personalizar o rastreamento de rolagem:
Rastreie um único evento com um parâmetro adicional para limites de rolagem
Ou não use nenhum parâmetro, mas inclua o limite no nome do evento
No começo, eu estava usando a abordagem de “nome de evento único”, mas com o tempo, a segunda abordagem tornou-se cada vez mais atraente.
Data Layer é um dos principais conceitos do Google Tag Manager, que garante o máximo de flexibilidade, portabilidade e facilidade de implementação. Sem ele, não haveria variáveis ou gatilhos no GTM, nenhuma tag seria disparada. Ele mantém o gerenciamento de tags funcionando corretamente e é a chave para desbloquear o potencial do Gerenciador de tags do Google.
Já publiquei vários artigos neste blog relacionados a este tema , mas estão dispersos. É por isso que decidi reunir todos os recursos, dicas e conhecimentos importantes (que acumulei até agora) e colocá-los em um só lugar.
Este é um tutorial estendido da camada de dados do Gerenciador de tags do Google que explica:
O que é a Camada de Dados?
Por que é útil?
Como usá-lo?
Melhores práticas ao lidar com a camada de dados.
Duas opções adicionais para aprender a camada de dados
Este artigo de blog é uma compilação de todos os recursos necessários para começar. Mas há muito o que você pode ler e implementar.
No curso para iniciantes, temos uma visão geral sólida do que é Data Layer em geral, por que é importante e como trabalhar com ela. Também permito que você interaja diretamente com a camada de dados e ganhe mais experiência dessa maneira.
No curso intermediário, mergulhamos muito mais fundo em tópicos que estão fora do escopo desta postagem do blog. Compreender todo o potencial (e tecnicalidades) da camada de dados é a chave para implementações de rastreamento bem-sucedidas.
Folha de referência da camada de dados
Assine nossa newsletter e receba a lista de
10 coisas que você deve saber sobre a camada de dadosSE INSCREVER
Cancele a assinatura a qualquer momento
#1. O que é camada de dados?
Tecnicamente falando, uma camada de dados é um array JavaScript que armazena certas informações. Se isso não soar familiar, aqui está uma explicação mais simples.
É uma camada invisível/virtual do site onde você, seus desenvolvedores ou várias ferramentas podem armazenar dados (sobre o usuário, conteúdo da página, etc.). A partir daí, o Gerenciador de tags do Google lê essas informações, usa-as em tags/gatilhos/variáveis ou as envia para ferramentas como Google Analytics, Google Ads, Facebook Pixel, etc.
A camada de dados é criada automaticamente assim que você coloca o snippet de JavaScript do contêiner do Gerenciador de tags do Google no código-fonte de seu website . Você não precisa adicionar mais nada, a menos que queira preenchê-lo com dados adicionais.
Essas informações adicionais na camada de dados do Gerenciador de tags do Google podem ser passadas colocando um snippet de camada de dados adicional acima do snippet GTM ou usando o método dataLayer.push (que é o melhor método, na minha opinião).
Continue lendo este tutorial da camada de dados do Gerenciador de tags do Google para descobrir por que dataLayer.push deve ser sua única opção para adicionar os dados à camada de dados.
#2. Armazenando dados na camada de dados (dataLayer.push)
Há duas maneiras de enviar dados para a camada de dados. Na verdade, existe apenas um que você deve usar, mas para fins de conhecimento, vou mencionar os dois:
Adicionando um snippet de camada de dados acima do snippet de contêiner do GTM (esse método é chamado de declaração de camada de dados).
Ou enviando dados com o método dataLayer.push.
Qual é a diferença, você pergunta?
O primeiro método é útil se você quiser enviar dados personalizados logo que a página for carregada, por exemplo, dados do produto quando a página do produto for carregada. Você pode querer enviar os dados do produto da camada de dados para o meta pixel (com o evento View Content).
Nesse caso, seus desenvolvedores devem adicionar um snippet de camada de dados acima do contêiner de rastreamento do Gerenciador de tags do Google com parâmetros como ID do produto, título do produto etc. Veja um exemplo:
<script>
camadadados = [{
'ID do produto': '123456',
'productTitle': 'Produto incrível',
'preço do produto': '13,00'
}];
</script>
<!-- Gerenciador de tags do Google -->
...
<!-- Fim do Gerenciador de tags do Google -->
Posteriormente, com a ajuda da variável Data Layer , você pode ler essa informação e transferi-la para o Meta Pixel.
O segundo método (o que eu recomendo) ( dataLayer.push ) permite enviar dados adicionais quando certos eventos ocorrem em seu site. Aqui estão alguns exemplos:
Digamos que você tenha um formulário de inscrição em um boletim informativo que não pode ser rastreado facilmente com um ouvinte de formulário padrão no Gerenciador de tags do Google. Você deve pedir ao desenvolvedor do site para disparar um evento de camada de dados quando um novo assinante preencher o formulário com êxito.
Se desejar, você pode solicitar ao seu desenvolvedor informações adicionais (por exemplo, localização do formulário, porque você pode ter mais de um formulário na mesma página).
Ou, por exemplo, quando um visitante adiciona um produto ao carrinho, um evento Data Layer (contendo as informações do produto) pode ser disparado.
Se você quiser aprender mais sobre dataLayer.push , leia este guia .
Gostou deste tutorial de camada de dados do Gerenciador de tags do Google até agora? Considere se inscrever! Basta digitar seu endereço de e-mail no formulário abaixo. Prometo compartilhar apenas conteúdo GTM incrível.
Folha de referência da camada de dados
Assine nossa newsletter e receba a lista de
10 coisas que você deve saber sobre a camada de dadosSE INSCREVER
Cancele a assinatura a qualquer momento
#3. Lendo dados da camada de dados
Imagine que existem vários autores neste blog:
Mim
John Doe
Jack Torrance
etc.
Quero determinar quais autores escrevem o conteúdo mais envolvente e depois segmentar as sessões no Google Analytics. Eu uso o plugin WordPress do Tamás Geiger que armazena o nome do autor do post na camada de dados. Se você não tiver o WP, peça a um desenvolvedor para adicionar pontos de dados adicionais à camada de dados.
O trecho fica assim:
<cabeça>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push [{
pagePostAutor: 'Julius Fedorovicius'
}];
</script>
<!-- Gerenciador de tags do Google -->
...
<!-- Fim do Gerenciador de tags do Google -->
</head>
#3.1. Variável da Camada de Dados
O Gerenciador de tags do Google, por padrão, não reconhece dados personalizados na camada de dados. Quero dizer que você não pode usá-lo, a menos que use a variável de camada de dados.
Para criar uma variável, você precisará especificar a chave da camada de dados do valor que deseja recuperar. Quando a variável for resolvida, ela retornará o que foi inserido recentemente na chave. Fácil assim!
Se eu quisesse buscar o valor pagePostAuthor , precisaria definir a chave pagePostAuthor nas configurações da variável.
Digamos que você queira enviar um evento para o Google Analytics 4 quando alguém deixar um comentário. Digamos que você queira enviar o nome completo do autor do artigo junto com o evento. Dessa forma, você verá quais autores geram o maior envolvimento do leitor.
Neste exemplo, não entrarei em detalhes sobre como criar uma tag. Vou apenas demonstrar como extrair os dados do Data Layer e transformá-los em uma variável (dentro do Google Tag Manager).
Na sua conta do Gerenciador de tags do Google, vá para Variáveis e crie uma Variável de camada de dados com as seguintes configurações:
É isso! Salve esta variável, atualize o modo de visualização e depuração (P&D) e abra o site no qual você está trabalhando. Você deve então ver sua variável recém-criada na guia Variáveis da janela Visualizar e Depurar.
#3.2. Versão da camada de dados
Outra configuração disponível na variável de camada de dados é a versão. Ao selecionar a versão, você está instruindo o Gerenciador de tags do Google a tratar os valores no modelo de dados de duas maneiras diferentes.
#3.2.1. Versão 1
A versão 1 é bastante limitada e não permite acessar valores aninhados. Se você criar uma variável de camada de dados e tentar acessar as informações armazenadas em pagePostAuthor (no exemplo abaixo), você falhará porque não está na raiz do objeto (em vez disso, é um filho direto da chave de atributos ).
Ver? Não há chave de atributos e pagePostAuthor está no nível raiz.
Essa não é a única limitação da versão 1. Quando você envia os dados para a camada de dados, ela sobrescreve todo o objeto.
Confuso? Aqui está um exemplo.
Imagine que temos dois códigos push da camada de dados com dados diferentes. O primeiro push contém apenas pagePostAuthor , o outro inclui mais duas chaves, pageCategory e pagePostType .
Como resultado final, você teria apenas dois valores na camada de dados: pageCategory e pagePostType . Porque? Porque o segundo push para o objeto authorData substituiu completamente os dados do primeiro push.
Então, qual é o objetivo da 1ª versão? Parece uma coisa inútil, você pode dizer.
Isso não é inteiramente verdade. Percebi que às vezes (por exemplo, no GA4 e-commerce), é importante ter uma camada de dados “limpa” sem valores anteriores, o que significa que toda vez que um window.dataLayer.push ocorre, ele apaga completamente os dados antigos e armazena o novo.
#3.2.2. Versão 2
A 2ª versão é muito mais flexível. Ele permite acessar valores e matrizes aninhados e mesclar dados.
Vamos voltar ao exemplo anterior de dois pushes de camada de dados subsequentes. O primeiro push contém apenas pagePostAuthor , enquanto o segundo inclui mais duas chaves, pageCategory e pagePostType .
Simo Ahava postou um guia detalhado sobre versões de camada de dados . Se ainda tiver alguma dúvida, vá conferir.
#3.2.3. Valor padrão
A última configuração na Variável da camada de dados é Valor padrão . Se você estiver tentando acessar o valor de uma chave específica na camada de dados E essa chave não existir, um valor padrão de “ indefinido ” será retornado.
Às vezes, pode ser necessário obter um valor padrão diferente (por exemplo, não definido ), vazio ou o que for adequado à sua meta de negócios. Nesse caso, clique na caixa de seleção e defina o valor padrão.
#3.3. Mas e quanto a outras estruturas de dados?
Lembre-se de que os dados podem ser armazenados na camada de dados usando diferentes estruturas. Aqui está um exemplo onde a chave pagePostAuthor está no nível raiz:
Nos dois primeiros exemplos, inserir o nome da chave (pagePostAuthor) não retornaria seu valor. Há algo mais que você precisa saber.
#3.4. Extrair dados de chaves filhas
Esta seção pode parecer confusa, então farei isso o menos técnico possível.
As chaves que são descendentes de outras chaves são chamadas de chaves filhas (para ser honesto, encontrei vários termos sobre esta, mas a chave filha parece ser a mais compreensível para não desenvolvedores).
No exemplo abaixo, você pode ver que os atributos estão no primeiro nível e pagePostAuthor está no segundo.
Aqui, pagePostAuthor é uma chave filha porque está aninhada na chave de atributos .
Para extrair seu valor, você deve alterar ligeiramente uma configuração em uma variável (dentro do Gerenciador de tags do Google). Em vez de pagePostAuthor , você deve inserir attribute.pagePostAuthor como o nome da variável da camada de dados.
E se pagePostAuthor também tivesse uma chave filha? O que você faria?
{
atributos: {
pagePostAutor: {
autorNome: 'Julius Fedorovicius',
authorTag: 'Gerenciador de tags do Google'
}
}
}
Isso mesmo. Você deve definir o caminho completo para essa chave específica: attribute.pagePostAuthor.authorName , e assim por diante. Cada nível deve ser separado por um ponto.
Acessar chaves filhas na camada de dados é bastante comum. Quando alguém me pede para dar um exemplo, sempre falo sobre o ouvinte AJAX que rastreia envios de formulário AJAX.
Existem muitas chaves aninhadas. Para extrair dados da camada de dados, você precisará usar a notação de ponto nas configurações da variável da camada de dados, por exemplo, attribute.response .
#3.5. Extrair dados de membros da matriz
Eu estava trabalhando com um desenvolvedor na implementação do acompanhamento de comércio eletrônico com o GA4 . Seguindo as diretrizes do Google , pedi a um desenvolvedor que enviasse dados de pedidos bem-sucedidos para a camada de dados. Então, eu poderia buscar esse evento por meio de uma tag GA4 no Gerenciador de tags do Google.
É muito importante que o desenvolvedor siga as diretrizes e envie os dados usando a estrutura conforme as instruções do Google. Aqui está o exemplo oficial de sua base de conhecimento:
Você sabe o que? Esta informação é muito útil. Digamos que eu também queira enviar esses dados de pedido para outras ferramentas de marketing. Fazia sentido para mim enviar dados para preço, nome e quantidade. Aqui está o que eu *poderia* fazer por preço .
Infelizmente, isso não funcionaria. O mesmo aconteceria com ecommerce.items.price, ecommerce.items.item_name , etc. Todas essas variáveis de camada de dados recém-criadas sempre retornaram indefinidas. Então, oque há de errado?
Notou algo suspeito? No meu exemplo de comércio eletrônico do GA4 (retirado da Base de conhecimento do Google), ecommerce.items tem 2 chaves item_name , 2 chaves de preço etc. Então, como o Gerenciador de tags do Google saberá em qual valor estou interessado? O primeiro item ou o segundo? E o que aconteceria se um usuário comprasse 5 produtos?
O que estamos lidando aqui é chamado de arrays. ecommerce.itens. É uma matriz contendo dois produtos com as mesmas coleções de chaves: item_id, item_name, item_category, preço e quantidade .
Em Javascript, se você quiser extrair o valor do preço do primeiro produto, você precisa usar ecommerce.items[0].price (o índice começa em 0). O Gerenciador de tags do Google não suporta colchetes nesse contexto, então você precisa usar a notação de ponto. Portanto, a chave final ficaria assim: ecommerce.items.0.price.
No Gerenciador de tags do Google, sua variável de camada de dados deve ficar assim:
Quando definido corretamente, isso não retornará o valor do primeiro item. Consulte a captura de tela abaixo.
Se houver 5 produtos na matriz e você quiser acessar o preço do 5º produto, o nome da variável da camada de dados deve ser ecommerce.items.4.price . Lembre-se, o índice aqui começa do zero, então o primeiro produto não é o 1º, mas o 0º.
Cansado? Se sim, sinta-se à vontade para marcar este tutorial de camada de dados do Gerenciador de tags do Google e retornar mais tarde.
Folha de referência da camada de dados
Assine nossa newsletter e receba a lista de
10 coisas que você deve saber sobre a camada de dadosSE INSCREVER
Cancele a assinatura a qualquer momento
#4. Enviar dados da camada de dados para outras ferramentas
Um ponto de verificação rápido em nosso Tutorial de camada de dados do Gerenciador de tags do Google. Até agora, vamos ver o que conseguimos:
Os dados personalizados foram armazenados na camada de dados (graças às suas habilidades de codificação, às habilidades de codificação do seu desenvolvedor ou a algum plug-in de terceiros).
O Gerenciador de tags do Google começou a reconhecer esses dados personalizados (graças à variável Data Layer).
Agora, precisamos enviar esses dados para outras ferramentas, como o Google Analytics 4.
#4.1. Ativar modo de visualização e depuração no Gerenciador de tags do Google
Vamos voltar ao exemplo de buscar o nome do autor que está mais pronto em meu site. Portanto, devemos verificar se o Google Tag Manager captura um valor na variável pagePostAuthor.
No painel do GTM, entre no modo de visualização e depuração (clicando no botão Visualizar )
Quando o modo de depuração estiver ativado, uma nova guia deverá ser carregada onde você deverá inserir a URL do seu site.
Clique em Iniciar e o URL será aberto em uma nova guia.
Clique em Variáveis na guia do modo de visualização e procure por pagePostAuthor . Verifique o seu valor. Se pagePostAuthor retornar undefined , você deve verificar novamente se inseriu um nome de variável de camada de dados correto no painel de administração do GTM (a propósito, diferencia maiúsculas de minúsculas).
No meu caso, a variável pagePostAuthor está definida corretamente porque obtenho o valor Julius Fedorovicius .
#4.2. Enviar variável de camada de dados pagePostAuthor para o Google Analytics
Volte para sua conta do Gerenciador de tags do Google.
Vá para Tags e clique em Novo .
Clique na caixa Configuração de tags .
Selecione a tag Google Analytics: Configuração do GA4 . Se você não tiver um, crie um.
Digite o nome da tag – GA4 config (na verdade, você pode nomeá-la como quiser)
Agora é hora de configurar a tag. Insira seu código de avaliação do GA4.
Digite o nome do evento como page_view
Clique em Parâmetros do Evento
Digite o nome do parâmetro como page_post_author e {{dlv – pagePostAuthor}} variável da camada de dados no campo Valor . No Gerenciador de tags do Google, as variáveis estão entre colchetes duplos {{}}.
Na seção Acionamento , escolha uma condição que corresponda quando seu público visita qualquer artigo na página do Blog. No meu caso, seria Todas as exibições de página em que URL de clique contém blogs/notícias/ .
Dessa forma, a cada visualização de página, você enviará o valor de uma variável pagePostAuthor como um parâmetro de evento.
É assim que você pode transferir dados adicionais da camada de dados do Gerenciador de tags do Google para o Google Analytics. Mas não se limite apenas a dimensões personalizadas. Você pode usar variáveis de camada de dados para Meta Pixel , LinkedIn Insight Tag, etc.
#4.3. Crie uma dimensão personalizada no Google Analytics 4
page_post_author é um parâmetro personalizado definido por você (ou seu desenvolvedor). O Google Analytics 4 não exibirá o parâmetro em seus relatórios, a menos que você o adicione como uma dimensão personalizada. Vamos nomeá-lo como Autor do post da página (na verdade, você pode chamá-lo do que quiser).
Faça login na sua conta do Google Analytics 4.
Abra a conta do seu site e clique em Admin . Você deve ver algo assim:
Clique em Dimensões personalizadas. Selecione Criar uma dimensão personalizada para adicionar o parâmetro personalizado desejado (neste caso, page_post_author ).
Digite o nome da dimensão como autor da postagem da página (ou qualquer outra coisa), escolha evento como um escopo, adicione page_post_author como parâmetro do evento e clique em criar.
#5. Usando dados da camada de dados como gatilhos
A camada de dados também pode ser usada para regras de disparo de tags mais avançadas. Por exemplo, você pode disparar uma tag de remarketing do Google Ads somente quando um usuário estiver em um plano gratuito. Vamos dar uma olhada mais de perto neste exemplo.
Abra o painel de administração do Gerenciador de tags do Google.
Vá para Tags e clique em Novo .
Insira um nome, ou seja, tag de remarketing do Google Ads
Escolha o tipo de tag – Remarketing de anúncios do Google
Insira o ID de conversão e o rótulo de conversão
Deixe todas as outras configurações como padrão e clique em Continuar
Na seção Triggering, clique no ícone Plus no canto superior direito e digite o nome – sugiro “Pageview – Users with the free plan”. Escolha Visualização de página como um tipo de acionador.
Suponha que você não queira que essa tag seja disparada em todas as páginas. Na seção This Trigger Fires on , clique em Some Page Views e insira a seguinte regra: dlv – pricingPlan equals Free . Isso significa que a tag de remarketing do Google Ads será acionada somente quando a variável da camada de dados do pricingPlan for exatamente gratuita. Usuários premium não acionarão a regra.
#6. Usando eventos da camada de dados como gatilhos
Outro exemplo comum de gatilhos baseados em camada de dados é usar eventos. Além dos dados personalizados, você também pode enviar eventos para a camada de dados usando window.dataLayer.push .
Não seria bom passar os dados de formLocation para o Google Analytics? O Gerenciador de tags do Google não captura esse parâmetro por padrão, portanto, precisamos criar outra variável. Acesse Variáveis > Variáveis definidas pelo usuário e clique em Novo .
Eu recomendo nomeá-lo como dlv – formPosition .
Escolha o tipo – Variável da Camada de Dados. Variable Name – formPosition (exatamente como o parâmetro é chamado no exemplo de código anterior). Deixe todas as outras configurações como estão e clique em Create Variable.
Por fim, vamos criar uma tag de evento do Google Analytics quando um novo assinante enviar seu endereço de e-mail.
Vá para Tags e clique em Novo
Escolha o tipo de tag – Google Analytics: evento GA4
Defina o parâmetro ID de rastreamento da tag de configuração.
Adicione o nome do evento como new_subscriber .
Nos Parâmetros do Evento, coloque form_location como o Nome do Parâmetro e {{dlv – formPosition}} como o valor.
Para condições de acionamento, selecione o acionador Personalizado – novo assinante de e-mail criado anteriormente.
Clique em Continuar
Feito. Você está pronto para ir!
Os seguintes (e últimos) passos são:
Verifique todas as novas tags no console de visualização e depuração do Gerenciador de tags do Google (se elas disparam corretamente)
Verifique Debugview na conta do Google Analytics (se o evento new_subscriber está funcionando corretamente)
Camada de dados do Gerenciador de tags do Google: conclusão
Se você leu todo o tutorial da camada de dados do Gerenciador de tags do Google, muito bem (e obrigado)! Se você pulou para o resumo sem ler tudo, sugiro marcar esta página para que possa retornar mais tarde.
Neste tutorial da camada de dados do Gerenciador de tags do Google, expliquei os principais conceitos do que é a camada de dados, por que você deve se preocupar em aprender mais sobre ela, por que é importante etc. até a conclusão, então alerta de spoiler, é SUPER IMPORTANTE.
Em poucas palavras, eis o que é a Camada de Dados e como ela funciona:
Data Layer é um local central (camada virtual) de um site onde você, seus desenvolvedores, várias ferramentas podem armazenar dados (sobre o usuário, seu comportamento, etc.). A partir daí, o Google Tag Manager lê essas informações e as envia posteriormente para outras ferramentas, Google Analytics, Google Ads, Facebook, etc.
A camada de dados não é um lugar mágico em um servidor onde você mantém os dados. É um armazenamento de dados temporário criado após o carregamento do GTM e é completamente apagado sempre que a página é atualizada ou fechada.
Quando o código do Gerenciador de tags do Google é carregado na página, a camada de dados é criada automaticamente.
Se você deseja ter alguns dados personalizados na camada de dados, você (ou seu desenvolvedor) deve usar o método window.dataLayer.push para enviar os dados. Se você não sabe codificar, peça aos desenvolvedores para fazer isso ou procure plug-ins/ferramentas de terceiros que possam fazer isso.
Por padrão, o Google Tag Manager não reconhece dados personalizados armazenados no DL. Portanto, você precisa criar variáveis de camada de dados no GTM. No caso de eventos da camada de dados, você também precisa criar acionadores de eventos personalizados .
Por fim, sinta-se à vontade para inserir variáveis da camada de dados em tags (dentro do Gerenciador de tags do Google), por exemplo, tag de evento do Google Analytics 4, tag HTML personalizada etc. As variáveis devem estar entre colchetes duplos {{ }}.
Há algo que eu perdi neste tutorial de camada de dados do Gerenciador de tags do Google? Deixe-me saber na seção de comentários abaixo.
Para quem não sabe, Elementor é um construtor de sites ou WordPress muito popular. Quão popular? Aqui estão as estatísticas do Builtwith :
De qualquer forma, vamos focar mais em uma única funcionalidade deste plugin, form. E mais especificamente – como rastrear envios de formulário Elementor com Google Tag Manager e Google Analytics.
O ouvinte AJAX não está funcionando
Sempre que tenho que rastrear um determinado formulário, verifico como ele funciona para o usuário final. Envio o formulário e verifico se:
Redireciona para uma página de “obrigado”
Ou talvez apenas mostre uma mensagem de “obrigado” sem fazer mais nada
Ou talvez esse formulário esteja no iFrame, etc.
Dependendo da lista de itens acima, um método de rastreamento de formulário diferente deve ser escolhido.
No caso do Elementor, notei que o formulário não recarrega a página nem redireciona o visitante para nenhum outro lugar. Ele apenas exibe uma mensagem de “obrigado”. Nota: se o seu formulário redirecionar para outra página, pule para um dos últimos capítulos deste artigo , onde forneço uma solução.
Normalmente, quando apenas uma mensagem de sucesso é exibida, isso indica que o formulário está usando AJAX e pode ser rastreado seguindo este método . Infelizmente, desta vez, a técnica não funcionou.
É por isso que mudei para outra opção.
Gatilho de visibilidade do elemento para o resgate!
Este gatilho permite rastrear o momento em que um determinado elemento aparece na tela. No meu caso, o formulário Elementor exibe a seguinte mensagem sempre que um formulário é enviado com sucesso .
Para verificar se o gatilho funcionará, precisamos criar um. Na interface do GTM, vá para Gatilhos > Novo > Escolha o gatilho “Visibilidade do elemento” que se parece com este:
Precisamos instruir o Gerenciador de tags do Google em qual elemento exato estamos interessados. Existem dois métodos de seleção de como podemos realmente escolher essa mensagem de sucesso. É um seletor de ID ou CSS. Neste ponto, ainda não temos certeza de qual é a melhor opção, então vamos inspecionar o elemento de mensagem real.
Volte para o site onde o Formulário Elementor está presente, clique com o botão direito nele e clique em Inspecionar. Infelizmente, no meu caso, a mensagem de sucesso não possui nenhum ID. Isso significa que o ID (como método de seleção não funcionará) e nossa única esperança é o seletor de CSS.
Portanto, teremos que usar essas duas classes CSS. Se você vir outras classes, tente usá-las.
Dica profissional: você deve ler este guia antes de usar os seletores de CSS . Isso vai te ajudar muito no GTM. (Também os explico em meu curso Intermediate GTM ).
Copie essas duas classes e cole-as nas configurações do Visibility Trigger. Antes de fazer isso, altere o método de seleção para CSS selector . Na frente de cada classe, adicione um ponto e certifique-se de que não haja espaços adicionais entre suas duas classes.
Em CSS, um ponto significa uma classe .
Portanto, o resultado final (no meu caso) é .elementor-message.elementor-message-success .
Em seguida, role um pouco para baixo e ative Observar alterações de DOM. Isso rastreará a aparência do elemento se ele aparecer em uma tela dinamicamente (não devido à rolagem).
Se houver apenas um formulário em uma página, mantenha o acionador disparando apenas uma vez por página . Agora, vamos testar se esse gatilho realmente funciona. Salve-o, atualize o modo de visualização e depuração e atualize a página que contém o formulário Elementor.
Envie o formulário. O evento Element Visibility apareceu no console de depuração do GTM?
Se sim, é exatamente isso que você deve procurar. Caso contrário, verifique se o seletor de CSS foi inserido corretamente ou se você atualizou a página e o modo de visualização e depuração corretamente.
Sempre atualize o modo de visualização e depuração primeiro, só então a página da Web real em que você está trabalhando.
Tag do Google Analytics para rastrear o formulário Elementor
O próximo passo é enviar um evento para o Google Analytics sempre que aquela mensagem de “obrigado” aparecer na tela. Neste tutorial, presumo que você já tenha instalado o Google Analytics 4 (via Google Tag Manager) e criado a tag de configuração.
Na interface do Google Tag Manager, vá para Tags > Novo > escolha Google Analytics: GA4 Event . Em seguida, insira as seguintes configurações:
Usei o evento generate_lead porque é o que o Google recomenda para envios de formulários. Mas “recomendado” não significa “obrigatório” e você pode escolher um nome de evento diferente.
Em seguida, clique na seção Triggering e escolha o gatilho que criamos no capítulo anterior ( Visibilidade do elemento ).
Teste
Salve todas as alterações no contêiner do Gerenciador de tags do Google, atualize o modo de visualização e depuração e atualize a página onde o formulário Elementor está presente. Preencha todos os campos e envie.
Aqui estão as coisas que deveriam acontecer:
O evento Visibilidade do elemento deve ter aparecido no modo de visualização e depuração
Clique nesse evento no console de depuração e você verá a tag GA4 Event acionada
Agora vá para o Debugview do GA4 e verifique se esse evento está visível lá. Você pode encontrá-lo acessando Admin > DebugView no lado esquerdo da interface do GA4. Clique.
Em seguida, você precisará encontrar seu dispositivo:
Como você ativou a visualização do GTM e o modo de depuração, todos os seus eventos do GA4 ficarão visíveis na visualização de depuração. Verifique se generate_lead (ou qualquer outro nome escolhido) é exibido no feed.
O motivo pelo qual vejo generate_lead marcado com um ícone verde é que configurei o evento como uma conversão .
Se a exibição de depuração não estiver funcionando para você, leia este guia .
E é isso! Depois de ver o evento na visualização de depuração, isso significa que o rastreamento do formulário está funcionando. Acesse o Gerenciador de tags do Google e publique as alterações. Você pode fazer isso clicando no grande botão azul ENVIAR no canto superior direito da interface.
Após 24 a 48 horas, você começará a ver o evento generate_lead no relatório de eventos ( Relatórios > Engajamento > Eventos ).
Vários formulários Elementor na mesma página?
Todos os capítulos anteriores desta postagem no blog são úteis se você tiver apenas um formulário em uma página. Mas e se você tiver vários formulários (e seus propósitos forem únicos)? Você gostaria de distingui-los de alguma forma, certo? Bem, isso é realmente possível.
Mas para implementar a solução mais robusta, você precisará acessar as configurações desses formulários no painel de administração do WP.
Vá para WordPress admin> escolha a página onde estão esses vários formulários e abra o Elementor Editor. Você pode fazer isso clicando neste botão.
Agora clique no primeiro formulário e você verá suas configurações no lado esquerdo do editor. Em seguida, clique em Opções adicionais . Você verá o campo ID do formulário . Usaremos este campo para identificar cada formulário. Digite algumas informações significativas nesse campo. Se for o formulário de contato principal, o formulário de contato principal pode ser uma boa opção para inserir. Se for algum formulário de geração de leads, você pode inserir id lead-gen-ebook , etc.
Salve a página, vá para o front-end do site e atualize a página. Clique com o botão direito do mouse em qualquer lugar em um formulário Elementor e escolha Inspecionar . Se você começar a escalar a árvore DOM na guia Elementos das ferramentas de desenvolvimento do seu navegador, eventualmente verá um elemento semelhante a este (talvez apenas com uma classe diferente).
É aqui que o ID do formulário fica visível no front-end. Mas isso é apenas o começo. Agora precisamos obter o ID do formulário quando a mensagem “Obrigado” aparecer após o envio bem-sucedido do formulário. Para fazer isso, usaremos a técnica de Simo Ahava de capturar o elemento correto .
Para implementar isso, precisaremos seguir estas etapas:
Crie uma tag HTML personalizada com o polyfill (que ajudará os navegadores mais antigos a suportar esta solução)
Crie uma variável JS personalizada que será usada para escolher o elemento correto (ela será usada como uma variável de utilitário)
Crie uma variável JS personalizada que retornará o valor do ID do formulário Elementor
Lembre-se: para que isso funcione, você deve inserir IDs de formulário individualmente nas configurações de cada formulário (no construtor de páginas Elementor), assim como mostrei vários parágrafos atrás.
#1. Marca HTML personalizada com Polyfill
Um polyfill funciona como uma solução alternativa. Existem algumas coisas/recursos que os navegadores mais antigos não suportam (o que significa que o Custom JS mais recente não funcionará). Graças aos polyfills (certos códigos personalizados carregados em uma página), os navegadores mais antigos podem suportar mais coisas.
Nesse caso, usaremos um método Element.matches() que não é compatível com navegadores mais antigos . Isso pode ser resolvido disparando uma tag HTML personalizada com o seguinte código:
<script>
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
funções) {
var corresponde = (este.documento || este.proprietárioDocumento).querySelectorAll(s),
i = correspondências.comprimento;
while (--i >= 0 && matches.item(i) !== this) {}
retornar i > -1;
};
}
</script>
Eu vi esse código primeiro no blog do Simo , e ele pegou emprestado do MDN .
Portanto, crie uma tag HTML personalizada, cole o código e configure-o para disparar em todas as páginas.
#2. variável de utilidade
A próxima etapa é criar uma variável JS personalizada com o seguinte código:
Nomeie-o como cjs, encontre o mais próximo . É muito importante nomear a variável exatamente dessa forma porque a usaremos na Etapa 3 (diferencia maiúsculas de minúsculas).
#3. Variável que retorna o ID do Formulário Elementor
E a etapa final é criar uma variável que retorne o ID do formulário Elementor após a exibição da mensagem “Obrigado” em uma tela.
função() {
var el = {{cjs encontrar o mais próximo}}({{Click Element}}, 'form.elementor-form');
return typeof el !== 'indefinido' ? el.id: indefinido;
}
Nomeie a variável cjs elementor form id .
Para que este código funcione, sua configuração deve atender a 3 requisitos:
A variável utilitária (do capítulo anterior) deve ser nomeada cjs find close (diferencia maiúsculas de minúsculas) porque esse nome exato é usado no código JS acima
A variável de elemento de clique integrada deve ser habilitada em seu contêiner
O seletor de CSS deve escolher o nó correto, o elemento <form> real . Na maioria dos casos, form.element-form deve funcionar (porque estamos direcionando um elemento de formulário com uma classe CSS elementor-form . Se não funcionar no seu caso, familiarize-se com os seletores CSS em primeiro lugar.
#4. vamos testar
Aqui está um rápido resumo do que você deveria ter feito até agora (se estiver tentando rastrear vários formulários Elementor na mesma página):
Você deve editar todos os formulários Elementor em seu site e adicionar IDs a eles
Crie uma tag HTML personalizada com polyfill (que ajudará os navegadores mais antigos a oferecer suporte a um método Element.matches() )
Crie uma variável utilitária (Custom JS) que subirá o Document Object Model (DOM) e escolherá o elemento
Crie uma variável JS personalizada que usará a variável de utilitário e retornará o ID do elemento de formulário (o seletor de CSS é form.elementor-form )
Agora, o teste real. Depois de fazer todas as alterações acima, publique as alterações no construtor Elementor e atualize o modo de visualização e depuração. Por fim, vá para o front-end do seu site (onde está localizado o formulário Elementor) e atualize a página.
Envie o formulário. No console de depuração do GTM, um evento de visibilidade de elemento deve aparecer. Clique nele e vá para a guia Variáveis do console de depuração. Encontre o ID do formulário elementor cjs da variável JS personalizada e verifique seu valor. Ele deve conter o ID real do formulário (esse é o ID que você deveria inserir no construtor do Elementor ao editar o formulário).
Se for exatamente isso que você vê, você pode editar a tag de evento do GA e incluir um parâmetro personalizado chamado form_id (você pode usar um nome diferente se desejar e inserir a variável {{cjs elementor form id}} como seu valor:
#5. Registrar uma dimensão personalizada no GA4
Na configuração acima, adicionamos um parâmetro form_id. Atualmente, esse parâmetro não é suportado pelo GA4 (por padrão), portanto, precisamos registrá-lo como uma dimensão personalizada (se quisermos vê-lo nos relatórios).
No Google Analytics 4, vá para Admin > Definições personalizadas.
Clique em Criar dimensões personalizadas . E então, insira as seguintes condições:
Certifique-se de que essa dimensão personalizada use o escopo Event e o parâmetro Event seja form_id (é exatamente o mesmo valor que usamos na tag de evento do Gerenciador de tags do Google).
Dentro de 24 a 48 horas depois de salvar esta dimensão, ela começará a preencher os dados.
Um dos lugares onde você pode ver os valores dessa dimensão é em Relatórios > Engajamento > Eventos e, em seguida, clique em generate_lead ou em algum outro nome de evento usado para o formulário Elementor.
Solução alternativa de rastreamento – redirecionamento
Os formulários Elementor também permitem que os proprietários de sites redirecionem os visitantes se eles enviarem o formulário com sucesso. Você pode fazer isso clicando no formulário e escolhendo a opção Ações após o envio na barra lateral esquerda.
No campo, insira Redirecionar . Isso adicionará uma nova opção à barra lateral. Clique nele e insira a URL para onde deseja redirecionar.
Se você tiver apenas uma página de “obrigado” para todos os formulários, uma boa prática seria adicionar um parâmetro de consulta dependendo de cada formulário.
Por exemplo, se você tiver dois formulários ( geração de leads 1 e geração de leads 2 ) que redirecionam para a mesma página example.com/thank-you/, você pode inserir os seguintes URLs de redirecionamento nas configurações desses formulários:
O URL de redirecionamento do formulário 1 de geração de leads pode ser https://www.example.com/thank-you/?form-name=lead-gen1
O URL de redirecionamento do formulário 2 de geração de leads pode ser https://www.example.com/thank-you/?form-name=lead-gen2
Embora, tecnicamente, os visitantes sejam redirecionados para a mesma página, você poderá distinguir os envios de formulário com base no parâmetro de consulta do nome do formulário .
Além disso, se você quiser enviar o valor do parâmetro de consulta form-name para outras ferramentas, como o Google Analytics, use a variável de URL .
Acompanhe o formulário do Elementor com o Google Tag Manager: palavras finais
E esse é o fim de mais um artigo relacionado ao rastreamento de formulários em minha postagem no blog. A coisa mais complicada se você deseja rastrear o Elementor Form é que o ouvinte AJAX não os suporta. Portanto, você precisa encontrar outro método para rastreá-los com GA e GTM.
E, neste caso, sua outra opção é o gatilho de visibilidade do elemento + uma ajudinha dos seletores de CSS.
Se você tiver vários formulários em uma única página, isso também não é um problema. Você precisará atualizar as configurações dos formulários no construtor Elementor (no administrador do WP) e adicionar IDs de formulário. Feito isso, use o método de Simo Ahava para escolher o elemento correto e leia o ID do formulário depois de enviado com sucesso.
Isso não é ciência de foguetes se você souber onde procurar. Você saberia como resolver esse problema sozinho se tivesse feito meu curso Intermediate GTM (onde mostro a combinação do Element Visibility Trigger + CSS Selectors).
Se você está apenas começando a entender o Gerenciador de tags do Google, o rastreamento de cliques é provavelmente uma das coisas mais exigidas que você deseja implementar. Existem muitos elementos clicáveis em seu site e você deseja entender como os visitantes do site estão interagindo com eles.
Nesta postagem do blog, veremos como rastrear cliques com o Google Analytics 4 e o Gerenciador de tags do Google.
Primeiro, veremos alguns recursos de rastreamento automático de cliques no GA4 e, em seguida, estenderemos a lista de eventos rastreados com a ajuda do GTM.
A propósito, se você é completamente novo (ou está apenas começando) com o Google Analytics 4, baixe meu e-book gratuito abaixo.
Por que rastrear cliques?
Pense nisso: quais são as interações mais comuns que você faz em qualquer site?Serão *provavelmente* visualizações de página, rolagem e cliques. Você clica em links e botões para navegar de uma página para outra, para atingir um objetivo específico. Os visitantes do seu site também fazem isso.
É por isso que é crucial rastrear essas interações – para entender melhor o comportamento do usuário/visitante. Capture cliques, envie seus dados para suas ferramentas de análise, como o Google Analytics, e analise os dados.
Aqui estão alguns dos casos de uso populares para rastreamento de cliques no Google Analytics 4:
Rastreamento de cliques no botão (digamos, cliques no botão “Adicionar ao carrinho”)
Cliques em links de saída (rastreie quando um visitante clica em um link que leva a um recurso externo (site de terceiros))
Cliques em links de contato (por exemplo, cliques em endereços de e-mail ou números de telefone)
Downloads de arquivo (quando alguém clica em um link que contém uma extensão de arquivo, por exemplo , .pdf , .docx , etc.)
Nesta postagem do blog, veremos como o Google Analytics 4 é capaz de rastrear automaticamente cliques em links de saída e downloads de arquivos. Em seguida, mostrarei um exemplo adicional de quando você deseja rastrear outros elementos clicáveis em um site (que são links). E se isso não for suficiente, fornecerei recursos adicionais relacionados ao rastreamento de cliques de botão.
Rastreamento automático de cliques no Google Analytics 4
Ao configurar um fluxo de dados da web no Google Analytics 4, você tem a opção de usar a medição aprimorada. Ele foi projetado para ajudar os profissionais de marketing a obter o máximo possível de eventos nos relatórios, sem a necessidade de cooperar com os desenvolvedores ou configurar no Gerenciador de tags do Google.
Se você for para Admin > Data Streams > Select the web data stream, a seguinte janela será aberta onde você verá uma seção chamada Enhanced Measurement .
Por padrão, esse recurso está ativado e rastreará automaticamente os seguintes eventos:
Visualização de página (nome do evento: page_view )
Scroll (nome do evento: scroll )
Clique no link de saída (nome do evento: click com o parâmetro outbound: true )
Pesquisa no site (nome do evento: view_search_results )
Engajamento de vídeo (eventos: video_start, video_progress, video_complete )
Download de arquivo (nome do evento: file_download )
Se desejar, você pode desativar/ativar eventos individualmente e pode fazer isso clicando no ícone de roda dentada na seção Medição aprimorada e, em seguida, clicando nos botões de alternância.
Além disso, alguns eventos podem ser personalizados adicionalmente. Vamos dar uma olhada rápida nos eventos relacionados a cliques.
clique . Este é um evento para o clique no link de saída (quando um link clicado redireciona um visitante para outro domínio. Junto com este evento, um parâmetro adicional de saída (com valor “true”) é enviado. O evento com este parâmetro significa que houve um clique no link de saída. Junto com este evento, vários outros parâmetros são enviados: link_classes, link_domain, link_id, link_url .
Se sua empresa opera em vários domínios, você pode ir para Definir configurações de tag (desse mesmo fluxo de eventos) > Configurar seus domínios e, em seguida, inserir os domínios de sua empresa. Todos os domínios listados lá não acionarão o evento de clique no link de saída.
file_download . Este evento é enviado ao GA4 quando um link é clicado e contém uma das seguintes extensões de arquivo: .pdf, .xls, .xlsx, .doc, .docx, .txt, .rtf, .csv, .exe, . chave, .pps, .ppt, .pptx, .7z, .pkg, .rar, .gz, .zip, .avi, .mov, .mp4, .mpe, .mpeg, .wmv, .mid, .midi, .mp3, .wav, .wma . Em outras palavras, se o link abrir/baixar um arquivo. Atualmente, não é possível atualizar a lista com outras extensões na interface do GA4.
Depois de selecionar quais eventos deseja rastrear, clique em Salvar no canto superior direito e certifique-se de que a Medição aprimorada esteja ativada (a alternância é azul).
A partir desse momento, seu Google Analytics 4 começará a rastrear automaticamente os eventos. Use o DebugView para verificar se tudo foi capturado corretamente.
Mas e se você quiser rastrear cliques em outros elementos (que não sejam arquivos ou links de saída)? Bem, vamos para o próximo capítulo.
Rastreie cliques personalizados com o Google Analytics 4
Dica: Se você quiser saber mais sobre como rastrear eventos com o Google Analytics 4, leia este guia extenso (que também inclui um vídeo).
Aqui está um exemplo (que já mencionei em vários dos meus outros guias do GA4 relacionados a eventos). Digamos que eu tenha um site de demonstração e queira rastrear cliques na barra de menu.
Observação : as condições do acionador do rastreamento de cliques no link do menu diferem na maioria dos sites (devido às diferentes classes de cliques, IDs, etc.). Tente fazer o seu melhor para aplicar este exemplo.
Primeiro, preciso criar um gatilho com condições corretas que diferenciem qualquer clique de um clique no link do menu. Ative o modo de visualização do Gerenciador de tags do Google e tente clicar em qualquer um dos links do menu em um site. Depois de clicar no primeiro link, você verá o evento Link Click na barra lateral esquerda do modo de visualização.
Se você não vê-lo, você deve:
ter pelo menos um gatilho Just Links GTM ativado em uma página
ou tenha o rastreamento de “Download de arquivo” ou “Links de saída” ativado em suas Configurações de medição aprimorada
Digamos que você não use a medição otimizada no GA4. Nesse caso, devemos criar um acionador de clique no link. Vá para Gerenciador de tags do Google > Gatilhos > Novo > Apenas links . Mantenha o acionador definido em “Todos os cliques no link” e salve o acionador.
Ao criar esse acionador, habilitaremos a funcionalidade de rastreamento de links no Gerenciador de tags do Google.
Em seguida, vá para Variables > Configure (na seção “Built-in Variables”) e habilite todas as variáveis relacionadas ao Click.
Atualize o modo de visualização (clicando no botão Visualizar novamente).
Em seguida, vá para o seu site e clique em qualquer um dos links do menu. Na verdade, clique em pelo menos dois deles. Retorne ao modo de visualização e você deve começar a ver os eventos Link Click no modo de visualização. Clique no primeiro evento Link Click e vá para a guia Variables do modo de visualização.
Em seguida, clique no segundo link Clique . No momento, estou procurando alguma variável que eu possa usar para distinguir um clique no link do menu. Não quero disparar minha tag de evento do GA4 em nenhum clique no link. Eu quero dispará-lo precisamente em um clique no link do menu.
Depois de dar uma olhada mais de perto, vejo que ambos os links contêm o mesmo valor Click Classes , site-nav__link site-nav__link–main . A propósito, nav significa “navegação” neste contexto. Excelente! Vou usar isso no meu gatilho Just Links.
Volte para a lista de acionadores em seu contêiner GTM e clique no acionador criado anteriormente para Todos os cliques no link. Vamos editá-lo e adicionar uma condição: Click Classes contains site-nav__link–main
Salve o gatilho. Agora, é hora de criar uma tag de evento do Google Analytics 4. Acesse Tags > Novo > Google Analytics: evento GA4 . Selecione sua tag de configuração do GA 4 existente e insira o nome do evento. Seu valor é com você. Qualquer uma das seguintes opções está perfeitamente bem:
menu_click
cardápio
menu_item_click
clique no menu
etc.
Estes são apenas alguns dos exemplos. Como estamos trabalhando com um evento personalizado, podemos nomeá-lo como quisermos (desde que sigamos as limitações de tamanho do nome , por exemplo).
No meu caso, usei o nome do evento menu_click . Mas desta vez, enviar apenas o nome do evento não é muito útil. Você provavelmente gostaria de saber quais itens de menu exatos são clicados com mais frequência. Que tal enviarmos também o nome do item do menu e a URL?
Poderíamos fazer isso enviando parâmetros de evento adicionais. Mesmo que você possa usar parâmetros que já são mencionados na documentação da Medição Aprimorada (como link_url e link_text ), vamos criar dois parâmetros personalizados (porque eu só quero mostrar como configurá-los).
Vou passar dois parâmetros, menu_item_url e menu_item_name. Eu inventei esses nomes de parâmetros e você pode fazer isso também. É isso que a flexibilidade do modelo de dados oferece.
Para enviar parâmetros personalizados, você deve expandir a seção Parâmetros do evento na tag de evento do Google Analytics 4 e clicar em Adicionar linha .
Insira o nome do primeiro parâmetro. No meu caso, é menu_item_url . No campo Valor , vou inserir uma variável que retorna uma URL clicada. Felizmente, o GTM já oferece essa variável, chamada Click URL . Clique no botão Inserir variável e selecione {{URL de clique}} .
Vamos adicionar outro parâmetro, menu_item_name . Para esse propósito, o GTM oferece outra variável integrada, {{Click Text}} . Insira-o também. Como os visitantes do seu site podem traduzir sua página, o valor {{Click Text}} também mudará, portanto, você verá uma lista mais diversificada de valores coletados em seus relatórios do GA4.
Atribua o acionador Just Links criado anteriormente a esta tag. Salve a etiqueta. Atualize o modo de visualização do GTM e clique em alguns dos seus itens de menu. Volte para o modo de visualização e clique nos eventos Link Click . Verifique se as tags de evento do GA4 para cliques no link do menu foram acionadas.
Agora, você precisará acessar o Google Analytics 4 e verificar o DebugView . Você aprenderá mais sobre isso nesta postagem do blog .
IMPORTANTE : mesmo que você veja seus parâmetros personalizados em relatórios em tempo real e DebugView no GA4, não poderá vê-los em outros relatórios do GA4. A menos que você registre esses parâmetros como dimensões personalizadas no Google Analytics. Leia o próximo capítulo desta postagem no blog.
Registrar definições personalizadas
Isso se aplica a qualquer parâmetro personalizado que você enviar para o Google Analytics 4. Se quiser vê-los/usá-los em coisas como exploração de funil, formulário livre, ver seus relatórios em relatórios padrão etc., você deve registrar parâmetros personalizados no GA interface.
No Google Analytics 4, vá para Admin > Definições personalizadas . Como enviamos 2 parâmetros personalizados com o clique no link do menu, devemos registrá-los aqui.
Clique no botão Criar dimensões personalizadas e digite:
O nome do parâmetro. Você pode inserir o que quiser. É assim que a dimensão será exibida em seus relatórios. Você pode nomeá-lo como “menu_item_url”, “URL do item de menu” ou qualquer outra coisa.
Alcance. Como queremos aplicar este parâmetro apenas a um evento (e não a todos os eventos do mesmo usuário), precisamos selecionar Event
Parâmetro do evento. É aqui que você deve inserir o nome exatamente como o inseriu na tag GTM. Se o nome do seu parâmetro for menu_item_url , você deve inseri-lo aqui exatamente assim. Não se preocupe se o recurso de preenchimento automático desse campo ainda não mostrar seu parâmetro. Basta inseri-lo e salvar a dimensão
Em seguida, registre um segundo parâmetro (no meu caso, era menu_item_name ) e salve-o. A propósito, às vezes uso as palavras “parâmetro personalizado” e “dimensão personalizada” de forma intercambiável. Em geral, métricas personalizadas e dimensões personalizadas são agrupadas como parâmetros personalizados.
E agora esperamos. Nas próximas 24 horas, os parâmetros personalizados começarão a aparecer em seus relatórios do Google Analytics 4.
Teste seu rastreamento de cliques no Google Analytics 4
Depois de configurar seus eventos personalizados, é hora de testá-los. O principal recurso criado para depurar dados do GA4 é a seção DebugView. Você pode encontrá-lo acessando Admin > DebugView .
Esse é o local onde sua depuração deve ocorrer. Não misture isso com o modo de visualização e depuração do GTM. São dois bichos diferentes.
Para ativar o modo de depuração no GA4, você tem várias opções (qualquer uma delas funcionará):
Ative a extensão do Chrome do depurador GA
Envie um parâmetro debug_mode junto com um evento
Ativou o modo de visualização do Gerenciador de tags do Google em uma página que você está depurando
Mas, como estamos trabalhando com o Google Tag Manager, ter o modo GTM Preview ativado habilita automaticamente o debug_mode , assim os dados começarão a aparecer no GA4 DebugView.
Quando você começar a ver os dados no DebugView, poderá clicar em cada evento individual e, em seguida, uma lista de parâmetros será exibida.
Clique nesse parâmetro para ver o valor que foi recebido pelo GA4. Agora isso é uma depuração granular!
Além disso, certifique-se de ter selecionado o dispositivo de depuração correto no canto superior esquerdo.
Se vários visitantes ativaram a visualização de depuração (por exemplo, todos ativaram a extensão do Chrome), você verá vários dispositivos lá e pode levar algum tempo para se encontrar.
De qualquer forma, assim que você começar a ver os dados no DebugView, as coisas ficarão assim.
Os eventos são marcados com ícones azuis, as conversões com verde. No seu caso, o evento menu_click será azul (não verde).
IMPORTANTE: Ignore o fato de que eu trato eventos menu_click como conversões. Isto é apenas para fins de demonstração
Se você clicar no evento, verá os parâmetros que foram enviados junto com um evento. Clique no parâmetro para ver seu valor.
Depois de verificar se os dados estão chegando e se são exibidos corretamente, você deve enviar suas alterações do GA4 no contêiner do GTM e publicá-las.
Você pode fazer isso clicando no botão ENVIAR no canto superior direito e, em seguida, concluir todas as outras etapas que a interface do usuário solicitar.
Depois disso, você deve começar a ver os novos dados em seus relatórios em tempo real.
Rastrear cliques no botão
Em alguns sites, os botões são codificados como links simples que têm apenas o estilo de um botão. Mas em outros sites, eles são codificados como outros elementos (por exemplo, com o elemento HTML <button>).
Se esse for o seu caso, os exemplos acima não ajudarão. Em seguida, você deve consultar esta postagem do blog, onde um dos capítulos explica especificamente como rastrear cliques de botão).
Marcar cliques importantes como conversões
Alguns cliques podem ser mais importantes para o seu negócio do que outros, por isso devem ser configurados no Google Analytics 4 como conversões. Se você quiser saber mais sobre conversões (anteriormente conhecidas como “metas”), aqui está uma postagem no blog (+ vídeo) sobre como fazer isso .
Perguntas frequentes
Se você apenas folheou este artigo e procurou algumas respostas rápidas, esta seção pode ajudar.
O Google Analytics pode rastrear cliques? Sim, o Google Analytics 4 rastreia cliques. Ele oferece rastreamento de eventos integrado para links de documentos e links de saída. Se você quiser rastrear outros cliques, precisará fazer configurações adicionais. Tudo é explicado neste guia.
O Gerenciador de tags do Google pode rastrear cliques em links ? Sim, o Gerenciador de tags do Google pode rastrear cliques em links, mas você precisará ativar o acionador Just Links e incluir condições adicionais no acionador. Leia este guia com atenção e você aprenderá como fazer isso.
O Gerenciador de tags do Google pode rastrear cliques de botão ? Sim, o Google Tag Manager pode rastrear cliques de botão, mas você precisará ativar o acionador All Elements Click e incluir condições adicionais no acionador. Leia este guia com atenção e você aprenderá como fazer isso.
Onde posso ver os dados de cliques nos relatórios do GA4? Primeiro, você precisará registrar os dados de clique como dimensões personalizadas . Em seguida, você os verá em relatórios como Explorações ou Relatórios > Engajamento > Eventos .
Como rastrear cliques com o Google Analytics 4: palavras finais
E este é o fim de mais um tutorial do Google Analytics 4 . Desta vez, aprendemos como rastrear cliques com o Google Analytics 4 (e, obviamente, com o Google Tag Manager). Resumindo, o processo é assim:
Se você deseja arquivar downloads e cliques em links de saída, use o recurso integrado do GA4, medição aprimorada.
Quer rastrear outros cliques em links? Crie acionadores personalizados no GTM e vincule-os às tags de evento do GA4 (como fizemos com os cliques no link do menu)
Além disso, não se esqueça de registrar os parâmetros de evento de clique como definições personalizadas (caso pretenda usá-los em seus relatórios do GA4).
Se você deseja medir o desempenho do seu site, deve usar alguma ferramenta de análise da web. O Google Analytics 4 é um deles. Ele permite que você veja coisas como o número de sessões, visitantes, fontes de tráfego mais populares, etc.
Para começar, primeiro você precisa instalar o GA4 em um site. E nesta postagem do blog, mostrarei como fazer isso.
Crie uma tag de configuração do Google Analytics 4
Cole o ID de medição e defina a tag para disparar em todas as páginas
Visualizar/testar a nova tag
Publique as alterações no Google Tag Manager
Como você pode ver, tudo é bastante simples. Então vamos mergulhar.
Se você estiver usando a versão mais antiga do Google Analytics
E se você já usa a versão mais antiga do Google Analytics em seu site? Você deve abandoná-lo completamente e substituí-lo pelo Google Analytics 4? Você deve usar os dois?
Em poucas palavras, o Google Analytics 3 (Universal Analytics) para de coletar dados em 1º de julho de 2023. É por isso que você deve mudar para outra ferramenta (por exemplo, GA4) o mais rápido possível.
Este artigo é a primeira etapa do processo de migração.
Crie uma propriedade e fluxo de dados do Google Analytics 4
Se você deseja criar uma nova propriedade do Google Analytics 4 (e não está usando a opção Atualizar para GA4 ), vá para a seção Admin da interface do Google Analytics (clicando em Admin no canto inferior esquerdo) e depois ( na seção Propriedade ) clique em Criar propriedade.
Em seguida, digite o nome da sua propriedade. Pode ser o nome do seu site, da sua empresa, uma marca etc. Escolha o país da sua empresa, o fuso horário do relatório e a principal moeda em que sua empresa opera.
Em seguida, pressione Next , responda a várias perguntas, clique em Create e sua nova propriedade estará pronta.
A próxima etapa a ser concluída é configurar seu primeiro fluxo de dados. É uma fonte de dados a partir da qual os eventos serão enviados para sua propriedade do Google Analytics 4. Você pode ter várias fontes de dados em uma única propriedade. Por exemplo, três propriedades da Web, 1 para aplicativo Android e 1 para aplicativo iOS.
Nesta postagem do blog, vou me concentrar em um fluxo da Web . Selecione-o.
Em seguida, insira a URL do seu site (por exemplo, https://www.mywebsite.com). Observe que o protocolo ( https ) já está selecionado. Depois disso, digite o nome do seu site.
Ao criar um fluxo de dados da web no Google Analytics 4, você tem a opção de ativar/desativar a medição aprimorada. Ele foi projetado para ajudar os profissionais de marketing a obter o máximo possível de eventos nos relatórios, sem a necessidade de cooperar com os desenvolvedores ou configurá-los no Gerenciador de tags do Google.
Por padrão, esse recurso está ativado e rastreará automaticamente os seguintes eventos:
Visualização de página (nome do evento: page_view )
Scroll (nome do evento: scroll )
Clique no link de saída (nome do evento: click com o parâmetro outbound: true )
Pesquisa de site (nome do evento: view_search_results )
Engajamento de vídeo (eventos: video_start, video_progress, video_complete )
Download de arquivo (nome do evento: file_download )
Eventos de formulário (form_start, form_submit)
Se desejar, você pode desabilitar/habilitar eventos individualmente. Você pode fazer isso clicando no ícone de engrenagem na seção Medição aprimorada e, em seguida, clicando nos botões de alternância.
Quando estiver pronto, pressione o botão Criar stream .
Instale o Google Analytics 4 com o Google Tag Manager
Ao criar um fluxo de dados (web), você verá um ID de medição.
No canto superior direito, você verá o ID de rastreamento de sua nova propriedade. Copie. Precisamos usá-lo no Gerenciador de tags do Google.
A propósito, se você se perder na interface do GA4 e precisar revisitar esta página, vá para Admin > Data Streams > escolha seu stream criado mais recentemente e, em seguida, você retornará à mesma janela que exibi em a captura de tela acima.
Em seguida, vá para o contêiner do Gerenciador de tags do Google (se você ainda não trabalhou com ele, aqui está um tutorial sobre como começar ) > Tags > Novo e escolha a configuração do GA4.
No campo Measurement ID, insira o ID que você copiou na interface do GA4. Mantenha o evento Enviar uma exibição de página quando esta configuração for carregada se desejar rastrear exibições de página automaticamente.
Normalmente, tudo bem, mantenha-o ativado. Ainda assim, em algumas situações, por exemplo, em aplicativos de página única, é mais recomendável desativar a caixa de seleção de exibição de página e criar apenas uma tag de configuração autônoma. Você pode ler mais sobre isso aqui .
Na seção Acionamento, selecione Todas as páginas e nomeie a tag, por exemplo, GA4 – Visualização de página .
Depois de ativar o modo de visualização, você verá a nova tag do GA4 entre as tags disparadas.
Depois de configurar seus eventos, é hora de testá-los. O principal recurso criado para depurar dados do GA 4 é a seção DebugView .
Vá para sua conta do Google Analytics 4 > Admin > Debugview .
Muito provavelmente, você não verá nenhum dado lá (ainda). Isso ocorre porque esses dados no DebugView são visíveis APENAS quando o modo de depuração no GA4 está ativado. Não misture isso com o modo de visualização e depuração do GTM. São dois bichos diferentes.
Para ativar o modo de depuração no GA4, você tem várias opções (qualquer uma delas funcionará):
Ative a extensão do Chrome do depurador GA
Envie um parâmetro debug_mode junto com um evento
Ativou o modo de visualização do Gerenciador de tags do Google em uma página que você está depurando
No caso da primeira opção, instale a extensão aqui e clique em seu ícone (para que você possa ver a faixa ON ). A partir deste momento, você começará a ver seus eventos entrando no DebugView.
A outra opção é enviar um parâmetro debug_mode com cada evento que você deseja ver no DebugView .
No Google Tag Manager, você pode fazer isso abrindo a tag GA4 Configuration e adicionando o seguinte parâmetro:
Se o parâmetro debug_mode contiver algum valor, o evento será visto em DebugView . Se você estiver usando uma gtag.js codificada, aqui estão as instruções para incluir o parâmetro debug_mode .
Mas como estamos trabalhando com o Gerenciador de tags do Google, ativar o modo de visualização do GTM define automaticamente o debug_mode como verdadeiro. Assim, os dados começarão a aparecer no GA4 DebugView.
Quando você começar a ver os dados no DebugView, poderá clicar em cada evento individual e, em seguida, uma lista de parâmetros será exibida.
Clique nesse parâmetro para ver o valor que foi recebido pelo GA4. Agora isso é uma depuração granular!
No entanto, notei alguns atrasos entre o evento realmente acontecendo em um site e, em seguida, aparecendo no DebugView . Às vezes, tenho que esperar vários minutos até que os dados cheguem. Isso é um pouco lamentável e espero que a equipe por trás do Google Analytics 4 melhore isso no futuro.
Às vezes, atualizar a página do DebugView também ajuda.
Além disso, verifique se você selecionou o dispositivo de depuração correto no canto superior esquerdo.
Se vários visitantes ativaram a visualização de depuração (por exemplo, todos ativaram a extensão do Chrome), você verá vários dispositivos lá e pode levar algum tempo para se encontrar. Isso se aplica especialmente ao meu blog, quando muitos dos meus leitores ativaram o GA Debugger Extension e eu tenho que adivinhar qual dispositivo (dos outros 15) é meu
De qualquer forma, assim que você começar a ver os dados no DebugView, as coisas ficarão assim.
Publique suas alterações no Gerenciador de tags do Google
Depois de verificar se os dados estão chegando e se são exibidos corretamente, você deve enviar suas alterações do GA4 no contêiner do GTM e publicá-las.
Você pode fazer isso clicando no botão ENVIAR no canto superior direito e concluindo todas as outras etapas que a interface do usuário solicita.
Depois disso, você deve começar a ver os novos dados em seus relatórios em tempo real.
Relatórios em tempo real do Google Analytics 4
Na barra lateral esquerda da interface do Google Analytics 4, acesse Realtime . É aqui que você verá os dados entrando em seus relatórios. Ao contrário da versão anterior (Universal Analytics), o novo relatório oferece recursos para ver os dados em um nível muito mais granular.
Primeiro, você verá um mapa e vários cartões com fontes de tráfego, os eventos mais populares e o número de usuários nos últimos 30 minutos.
Você também pode dar uma olhada no instantâneo de um usuário individual. Você pode fazer isso clicando no botão Exibir instantâneo do usuário no canto superior direito.
Então, você verá um fluxo de todos os eventos daquele usuário em particular, você pode clicar neles (assim como no DebugView ) para ver as coisas em um nível mais granular. Se você deseja olhar para outro usuário/visitante, você pode clicar no botão aqui:
Para sair do instantâneo, pressione o botão Sair do instantâneo no canto superior direito.
Qual é o próximo? Mais eventos!
Não vou entrar em muitos detalhes aqui, mas aqui estão várias coisas para você configurar a seguir:
Aqui estão algumas perguntas adicionais que você pode ter e que gostaria de abordar.
E se eu já tiver o Universal Analytics instalado em meu site? Consulte minha postagem no blog sobre como atualizar para o Google Analytics 4 . Mas uma versão curta é que você pode usar as duas versões do GA simultaneamente (desde que a versão antiga ainda funcione).
E se eu já tiver o código de acompanhamento do Google Analytics 4 codificado no código-fonte do site ? Eu recomendo implementar o GA4 (ou qualquer outra ferramenta de marketing/analítica baseada em JavaScript) por meio do Gerenciador de tags do Google devido à sua flexibilidade. Clique aqui para saber mais sobre os benefícios do GTM . Mas uma versão curta é assim: seus desenvolvedores devem remover o código de rastreamento codificado do seu site e você deve implementar o Google Analytics 4 por meio do Gerenciador de tags do Google. Meu curso do Gerenciador de tags do Google para iniciantes aborda o processo e dicas sobre como migrar ferramentas codificadas para o Gerenciador de tags do Google.
Se eu já tiver o Universal Analytics (GA3) implementado no Google Tag Manager, devo criar um novo contêiner GTM para o Google Analytics 4? Não, você não precisa criar um novo contêiner GTM apenas para o Google Analytics 4. Use seu contêiner existente do Google Tag Manager para a nova versão do GA também. O Google Analytics 4 requer tags do GA completamente diferentes, mas elas podem coexistir com as tags do Universal Analytics no mesmo contêiner.
Palavras finais sobre como instalar o Google Analytics 4
E é assim que você instala o Google Analytics 4 com Google Tag Manager em seu site. A razão pela qual esta postagem do blog foi mais longa (do que deveria) é o DebugView e os relatórios em tempo real do GA4. Eu queria apresentá-los corretamente e você deve entender como eles funcionam.
Falando do processo, aqui está um resumo:
Criar uma nova propriedade do GA4
Crie um fluxo de dados (neste post de blog, concentrei-me no fluxo da Web)
Copie o ID de medição
Crie uma tag de configuração do Google Analytics 4
Cole o ID de medição e defina a tag para disparar em todas as páginas
Visualizar/testar a nova tag
Publique suas alterações no Gerenciador de tags do Google
Tem mais perguntas? Sinta-se à vontade para perguntar nos comentários abaixo.
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
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 .
Etiquetas . Exibe quais tags dispararam no evento da camada de dados selecionado e quais não dispararam.
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.
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.
Erros . Se notar algum número na aba (ao invés de 0), clique nele e veja a causa.
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?
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:
Propriedades da etiqueta.
Acionadores da tag.
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.
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:
Digite o link do site onde o modo de visualização deve ser ativado
Selecione qual container habilitar (se houver vários GTM Containers ou GTAGs). IMPORTANTE: você deve selecionar o contêiner GTM no menu suspenso
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).
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.
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.
GTM é um injetor de código. Os navegadores geralmente veem os injetores de código de forma negativa porque eles podem facilmente se tornar um elo fraco por meio do qual os hackers podem plantar códigos maliciosos em um site ou aplicativo. Como resultado, o GTM é bloqueado pela maioria dos bloqueadores de anúncios e ferramentas de privacidade do navegador. Estima-se que 42,7% dos usuários da Internet usam bloqueadores de anúncios, o que significa que você pode perder de 8% a 25% dos dados de tráfego do usuário se estiver usando o GTM. Se toda a sua pilha mar-tech for entregue por meio do GTM e estiver bloqueada, você enfrentará sérios desafios.
Durante anos, o Gerenciador de tags do Google (GTM) tornou mais fácil para profissionais de marketing e analistas instalar e gerenciar análises de terceiros e ferramentas de marketing em seus sites e aplicativos. Ele fornece uma plataforma centralizada que permite que membros não técnicos da equipe adicionem, editem e desativem tags sem precisar tocar no código-fonte. Isso significa que eles não precisam incomodá-lo para adicionar novas tags ou editar as existentes no caso de uma atualização.
Mas, como você sabe, colocar esse poder nas mãos de equipes não técnicas tem o potencial de sair pela culatra. Tudo o que eles injetam no aplicativo ou site via GTM ignora seus processos usuais de desenvolvimento e controle de qualidade, o que pode resultar em uma bagunça que a equipe de dados precisa limpar.
Portanto, embora o GTM seja uma ferramenta útil, suas deficiências são rapidamente aparentes para empresas modernas orientadas a dados. Os engenheiros de dados odeiam o GTM e por um bom motivo. Sua suscetibilidade a bloqueadores de anúncios e propensão ao uso indevido são apenas o começo. Aqui, detalharemos quatro dos principais motivos pelos quais o GTM e os engenheiros de dados não se dão bem e ofereceremos uma solução melhor.
1. GTM é uma ferramenta de injeção de código propensa a vulnerabilidades de segurança
Como o GTM é uma ferramenta de injeção de código, ele não é bloqueado apenas por bloqueadores de anúncios. Ele também abre seu site para exploração porque sua capacidade de inserir código pode abrir a porta para hackers. Se um hacker obtiver acesso à sua conta GTM, ele poderá causar estragos nos bastidores adicionando algumas linhas de código aparentemente inofensivo. Muitas vezes, esse código passa despercebido porque não afeta a aparência ou a funcionalidade do site/aplicativo.
Em alguns casos, seu site ou aplicativo móvel pode ser usado para exibir publicidade indesejada para gerar receita para o hacker ou pode redirecionar os visitantes para outros sites cheios de anúncios. Nos piores cenários, seu site/aplicativo pode ser explorado para roubar PII. Tanto a equipe Joom quanto a Securi documentaram muitos casos disso entre sua clientela.
A exploração de segurança como essa causa brechas que afetarão sua capacidade de fornecer dados de qualidade às equipes que precisam deles, e corrigir esses problemas é demorado e caro.
2. Tem suporte limitado para a variedade de ferramentas que as empresas orientadas a dados precisam
O Gerenciador de tags do Google fornece suporte nativo para anúncios e redes analíticas. Embora ofereça mais opções de suporte para sites, oferece suporte a menos de 12 ferramentas para aplicativos móveis. Portanto, quando se trata de integrações com ferramentas em sua pilha, o GTM simplesmente fica aquém. Para enviar eventos para ferramentas para coisas como teste A/B, nutrição, envolvimento do cliente e suporte, você terá que encontrar soluções alternativas para integrar ferramentas sem suporte.
Por exemplo, se você estiver gerenciando uma ferramenta orientada a eventos como o Mixpanel via GTM usando código personalizado, convém usar outra ferramenta orientada a eventos como o Intercom no futuro. Usar o GTM significa que você precisa escrever um código personalizado novamente para enviar os mesmos conjuntos de dados ao Intercom. E sempre que qualquer ferramenta atualizar sua API, você terá que voltar para atualizar seu código.
3. Diminui o desempenho do site
Se não for gerenciado adequadamente, o GTM pode adicionar um sério fardo de desempenho às suas propriedades digitais. Isso pode acontecer se o contêiner do gerenciador de tags tiver acumulado tags ao longo do tempo, talvez por meio de experimentação com diferentes editores ou integrações de recursos.
As instruções de implementação de muitos pixels de rastreamento de terceiros são apenas “certifique-se de que seja acionado em todas as páginas”. Portanto, usuários menos experientes do GTM geralmente adicionam mais e mais dessas tags com o gatilho padrão “todas as páginas – visualização de página”, que é executado bem no início do processo de renderização do navegador, enquanto ainda está carregando e analisando recursos críticos para o site real (como HTML, CSS, JS, imagens, vídeos, etc.). O que torna isso pior é que, por padrão, as tags são essencialmente tratadas como scripts separados. Assim, se houver 50 tags gerenciadas via GTM, o navegador agora tentará carregar uma página da Web e 50 scripts diferentes simultaneamente cada vez que um usuário visitar uma nova página.
Embora os usuários em máquinas de médio porte com uma conexão rápida à Internet possam não sofrer quedas severas de desempenho, os usuários em máquinas mais antigas/mais fracas ou dispositivos móveis com conexões mais lentas sofrerão. Para cada carregamento de página, esses dispositivos mais fracos farão o máximo que sua CPU permitir e, em seguida, enfileirarão o restante, travando a janela do navegador e tornando o site inoperável até que todo esse processamento seja concluído. Isso não apenas resulta em uma experiência de usuário terrível, mas também afeta suas pontuações de Core Web Vitals (especialmente o primeiro atraso de entrada), o que afetará inadvertidamente a classificação do site no Google.
Maximilian Werner , fundador da Obsessive Analytics Consulting , que tem experiência significativa trabalhando com GTM, viu isso em primeira mão. “Certa vez, tive um cliente em que o GTM fazia com que as páginas da Web congelassem por cerca de 10 segundos durante o carregamento porque tinham mais de 120 tags disparadas no carregamento da página. Dispositivos móveis basicamente travaram.”
4. É difícil gerenciar o estado do usuário em escala
O GTM usa uma variável de janela JS global chamada dataLayer para manter algo semelhante a um estado intermitente. Ele só pode acompanhar as variáveis na página atual. Isso significa que ele não pode persistir o estado do usuário nas páginas do mesmo domínio, muito menos nos domínios.
Por exemplo, suponha que o processo de checkout de um site de comércio eletrônico esteja distribuído em quatro páginas: carrinho, informações pessoais, informações de pagamento e confirmação. Quando um usuário insere seu nome e e-mail na página de informações pessoais e você usa dataLayer.push({name: 'john doe', email: "johndoe@domain.com" })para armazenar essas informações manualmente ou por meio de código executado automaticamente pelo site de comércio eletrônico (se eles oferecerem integração com o GTM), você pode usar essas informações nessa página .
No entanto, quando o usuário navega para a próxima página, o dataLayeré apagado, pois é apenas uma variável de janela e você não terá mais acesso a essas informações. Para transportar os dados para a próxima página, você mesmo deve persistir os dados escrevendo JS personalizado para armazená-los em um cookie ou localStorage e, em seguida, lê-los na próxima página. Isso adiciona muito mais pontos de falha e impede que você considere adequadamente os usuários que ingressam em funis em diferentes estágios.
Observação: o Facebook renomeou-se para Meta, mas muitos dos recursos de seus sites permanecem marcados como recursos do Facebook. Por esse motivo, usaremos os dois nomes (pixel do Facebook e pixel meta) de forma intercambiável.
Se você usa publicidade paga para adquirir novo tráfego, provavelmente já está veiculando anúncios no Facebook. No entanto, se você não medir a eficácia de suas campanhas publicitárias. você queima dólares esperando que talvez algo esteja funcionando.
Se você usa anúncios do Facebook, precisa usar o Facebook Pixel para medir o sucesso de suas campanhas. A implantação do Pixel em seu site ajuda o Facebook a entender seu site e como os usuários interagem com ele. Por extensão, o Facebook entenderá como as conversões acontecem no seu site.
Uma conversão pode ser um envio de formulário de lead, evento de compra ou outra coisa (abordaremos esses exemplos aqui).
Sempre que um visitante fizer uma conversão, o pixel rastreará isso e usará esses dados para otimizar suas campanhas.
Neste guia, mostrarei como instalar o Meta Pixel com o Gerenciador de tags do Google (não apenas visualizações de página básicas, mas também outras coisas, como eventos). O tema é bastante extenso. Portanto, recomendo apertar o cinto e mergulhar nisso. Além disso, considere assinar meu boletim informativo para se manter atualizado com o GTM.
Este artigo abordará apenas as coisas essenciais a saber ao implantar o pixel do Facebook por meio do Gerenciador de tags do Google. Para um guia/tutorial mais detalhado, tenho lições extensas sobre FB Pixel + GTM em meu curso GTM para iniciantes .
E se você também quiser implementar o rastreamento do Facebook com GTM do lado do servidor (com a API de conversões do Facebook), explico isso no curso GTM intermediário/avançado .
Caso contrário, você se sentirá muito sobrecarregado.
Uma rápida introdução ao Meta Pixel (Facebook Pixel)
O Facebook Pixel é uma solução criada pelo Facebook que permite medir o comportamento do usuário/visitante em seu site. Essas informações podem ser usadas ainda para rastrear conversões, otimizar campanhas ou criar públicos com base nos dados que você envia.
Depois de colocar determinados trechos de código JavaScript em seu site (e ativá-los com base no comportamento do usuário/visitante), esses dados são enviados de volta ao Facebook. Não vou me aprofundar nas possibilidades (porque esta postagem do blog se concentra mais na implementação). Mas se você é novo no FB Pixel, pode obter mais informações aqui .
Em poucas palavras, usando o Facebook Pixel, você será capaz de:
Crie públicos personalizados para fins de remarketing (por exemplo, redirecione para aqueles que rolaram pelo menos 50% e gastaram pelo menos um minuto ou aqueles que adicionaram um produto a um carrinho, mas não compraram).
Acompanhe as conversões . As conversões são as ações que você deseja que seus usuários concluam no site devido à importância delas para o seu negócio. Isso pode ser inscrição, assinatura, compra etc. Ao rastrear as conversões, você pode informar ao Facebook que o visitante X concluiu ações específicas que se alinham com suas metas de negócios. Com essas informações, você também pode deduzir quais anúncios são mais eficazes para atingir suas metas e quais não são.
Oportunidades adicionais de segmentação . Ao rastrear certas interações (como leads ou compras), você pode instruir o Facebook a encontrar públicos semelhantes (pessoas com comportamento de navegação semelhante aos seus públicos registrados) e exibir seus anúncios a eles com base naqueles que já converteram em seu site.
Vamos deixar tudo de lado e focar no lado essencial — implementação técnica: como adicionar o pixel do Facebook ao seu site com o Gerenciador de tags do Google, como enviar eventos, como implementar correspondência avançada, propriedades do usuário, etc.
Como obter o código Meta Pixel?
Para começar, acesse o gerenciador de negócios do Facebook e obtenha o Pixel ID. Vamos precisar desse ID de pixel nos próximos capítulos desta postagem no blog.
Isenção de responsabilidade: o Facebook está constantemente mudando a interface do usuário aqui. Portanto, há uma grande chance de minhas capturas de tela não corresponderem ao que você vê na interface. Certa vez, tive um caso em que quatro pessoas em minha oficina GTM viram diferentes versões da interface simultaneamente. Então, se você não encontrar uma determinada opção, continue procurando.
Clique no ícone Menu no canto superior direito e vá para Gerenciador de Eventos .
Em seguida, vá para Fontes de dados e escolha o Pixel que você tem interesse em implantar.
Caso ainda não possua nenhum Pixel, clique em Configurar Pixel e siga todos os passos necessários.
Em uma das etapas, o Facebook oferece várias maneiras de adicionar o pixel. Vamos ver isso mais tarde.
Seu principal objetivo, por enquanto, é obter o Pixel ID que se parece com isso (claro, o valor será diferente):
O ID é apenas uma combinação de números. Depois de obtê-lo, copie-o (porque precisaremos dele no próximo capítulo desta postagem no blog).
#1. Como instalar o Meta Pixel com o Gerenciador de tags do Google: visualização de página
Antigamente (antes de 2019), a única maneira de instalar o Facebook Pixel por meio do Gerenciador de tags do Google era usando o modelo de tag HTML personalizado. Isso significava trabalhar diretamente com o código JavaScript, editá-lo um pouco, etc.
Hoje em dia, as coisas são muito mais simples e elegantes porque Simo Ahava criou um modelo personalizado de pixel do Facebook e o compartilhou com todos. Isso tornará todo o processo de gerenciamento de tags Meta Pixel mais conveniente e menos sujeito a erros.
Mais tarde, o Facebook ( facebookarchive ) adquiriu esse modelo. No entanto, ainda é o mesmo modelo.
#1.1. Adicionar modelo personalizado de pixel do Facebook
Se você for em Tags > Novo (no Gerenciador de tags do Google) e pesquisar por “Facebook”, não encontrará nenhum modelo de tag. Isso ocorre porque, por padrão, essa tag não existe no contêiner do GTM. Em vez disso, você terá que adicionar as tags de evento manualmente.
Felizmente, existe um recurso muito conveniente chamado Community Template Gallery, onde qualquer pessoa em nosso setor (que saiba codificar) pode criar modelos personalizados de variáveis ou tags.
No Gerenciador de tags do Google, acesse Modelos > Modelos de tags > Galeria de pesquisa e, no campo de pesquisa, digite Facebook .
Você verá este modelo. Clique nele e adicione-o ao seu espaço de trabalho. Um novo modelo aparecerá na seção Tags > Novo > Personalizado . Você pode reutilizá-lo várias vezes para tags no mesmo contêiner.
#1.2. Tag de exibição de página de meta pixel
Tudo começa com a implementação básica do Meta pixel. Em outros guias (especialmente os mais antigos) encontrados online, você pode ver um termo chamado Facebook Pixel Base Code (ou algo semelhante). Nas próximas etapas, explicarei exatamente isso (mas sem usar o termo Base Code ).
No Gerenciador de tags do Google, vá para Tags > Novo > Pixel do Facebook. Digite as configurações que você vê na captura de tela abaixo (se alguns campos estiverem vazios, não alterei nada lá):
No campo Facebook Pixel ID(s), insira o Pixel ID que você copiou em Como obter o Facebook Pixel ID? capítulo. Este campo permite que o Gerenciador de tags do Google saiba a conta exata do meta anúncio para enviar esses dados.
Por enquanto, deixe todas as outras configurações como estão.
Defina a tag para disparar em Todas as páginas .
#1.3. Variável constante para o ID do pixel
Alerta de spoiler : semelhante aos eventos personalizados do GA4 , precisaremos criar uma tag Meta Pixel separada para cada interação. O Meta Pixel ID deve estar presente em todas as tags.
Suponha que você implemente 50 ou mais tags que enviam dados para o Facebook. Você precisaria inserir o Pixel ID mais de 50 vezes manualmente. Mas e se um dia você tiver que mudar para outro Pixel ID? Você precisará alterar o ID em todas as tags manualmente.
Para tornar as coisas mais otimizadas, você pode criar uma variável GTM Constant que armazene seu Meta Pixel ID. Então você pode reutilizar a mesma variável sempre que precisar. Depois de alterar o Pixel ID, você precisará fazer isso apenas uma vez – na variável.
No Gerenciador de tags do Google, vá para Variáveis > Variáveis definidas pelo usuário > Novo > Constante e cole seu Meta Pixel ID.
Salvei a variável aqui como Constant – Facebook Pixel ID . Em seguida, abra a tag de exibição de página do pixel do Facebook criada anteriormente e insira essa variável.
#1.4. Teste a tag de pixel do Facebook
Agora, é hora de garantir que você implementou tudo corretamente.
Modo de visualização e depuração do GTM. No Gerenciador de tags do Google, ative o modo de visualização e depuração. A página onde você deseja instalar o Meta Pixel abrirá em uma nova aba.
Verifique a janela de depuração para o evento Container Loaded . Clique nele e você verá que sua tag do pixel do Facebook foi disparada.
Auxiliar de pixel do Facebook. Semelhante ao GA4, você deve garantir que o Meta Pixel tenha recebido os dados do evento. Meta tem uma extensão de navegador chamada Facebook Pixel helper . Instale-o e este ícone aparecerá no canto superior direito do seu Chrome.
Atualize a página E, se você implantou corretamente o pixel do Facebook, sua cor mudará para azul e você verá um número dentro desse ícone.
Clique nesse ícone e vamos verificar o que ele gravou. Vemos que um evento PageView foi acionado e há um ícone de marca de seleção verde próximo a ele. Isso é bom! Se houvesse um ícone de carregamento ou amarelo, isso significaria um possível problema. Mas o ícone verde indica que fizemos isso corretamente.
Relatórios de Meta Pixel
No Facebook Business Manager, vá para Events Manager > Data Sources > Select your Pixel e depois Test Events .
Insira a URL do seu site (se eu estivesse trabalhando com meu site, inseriria https://www.analyticsmania.com ) e clique em Abrir site . Depois de ser redirecionado para o seu site, vá para a guia Eventos de teste e verifique se você vê exibições de página provenientes do seu dispositivo. Se nada aparecer, volte ao seu site e atualize a página novamente.
Se estiver tudo bem, você implementou o Meta Pixel com o Google Tag Manager corretamente.
#2. Outras opções de como instalar o Meta Pixel com Google Tag Manager
Existem outras duas opções de como instalar o Pixel, mas vou citá-las bem resumidamente (pois ainda temos muito material para cobrir):
Manualmente usando a tag HTML personalizada (semi-recomendado). Era um método recomendado antes do início de 2019 (quando o modelo personalizado não estava disponível).
“Feito para você” . Eu não recomendo este.
#2.1. Instalação manual usando a tag HTML personalizada
Você pode implantar manualmente a tag HTML personalizada quando tiver acesso ao código Meta pixel completo. Dentro do código da tag, você precisaria fazer modificações se quisesse capturar parâmetros adicionais.
Você também precisaria usar o sequenciamento de tags para cada tag de evento para garantir que o código base do Facebook seja acionado toda vez que ocorrer um evento ou exibição de página.
Onde você pode obter o código completo do pixel do Facebook? Vá para o Meta Pixel escolhido no Gerenciador de Eventos e selecione seu pixel. Clique em Gerenciar Integrações e uma nova janela aparecerá na sua tela.
Supondo que você já tenha criado o Pixel, deve haver uma opção como na captura de tela abaixo. A partir daí, clique em Adicionar a outro site.
Uma nova tela aparecerá, perguntando se você deseja instalá-lo manualmente ou por meio de uma integração de parceiro. Escolha Adicionar código de pixel manualmente ao site e o navegador redirecionará para uma nova página.
Copie o código principal de lá:
Acesse Tags > Novo > Tag HTML personalizada no Gerenciador de tags do Google e cole o código. O código <noscript> é inútil lá , então você está livre para removê-lo.
#2.2. “Feito para você”
Quando você tenta obter o código JavaScript do Pixel do Facebook completo, o Meta oferece várias opções para instalar o pixel. Um deles é o “Gerenciador de tags do Google”.
Eu altamente encorajo você a NÃO escolher esta opção. Essa opção de instalação integrada por meio do Gerenciador de tags do Google é um pouco complicada.
Você precisará conceder acesso Meta ao seu contêiner do Gerenciador de tags do Google (ele pode adicionar, excluir tags e fazer todos os outros tipos de coisas. E não quero dar esse tipo de permissão).
Quando você conceder acesso, o Meta adicionará automaticamente o código Pixel ao seu contêiner e publicará imediatamente seu contêiner (independentemente de você ter outras alterações (possivelmente não testadas).
O nome dessa tag provavelmente não corresponderá à sua convenção de nomenclatura atual.
Portanto, para obter apenas uma tag criada em seu contêiner que seja acionada em todas as páginas, fornecer acesso Meta não é uma boa opção.
É por isso que você não deve escolher a opção “Gerenciador de tags do Google” (independentemente de quão contra-intuitivo isso pareça). Ao instalar o contêiner, você ainda usará o GTM e terá controle total sobre o que acontece em seu contêiner.
#3. Como rastrear eventos com o pixel do Facebook e o gerenciador de tags do Google
Até este ponto, conseguimos fazer uma implementação básica do Facebook Pixel por meio do Google Tag Manager. Mas as visualizações de página sozinhas não dizem muito sobre o que um visitante/usuário está fazendo em seu site.
Por exemplo, os visitantes acabaram de acessar uma página e sair? Ou clicaram em algo, rolaram, enviaram um formulário ou fizeram uma compra?
É aí que o rastreamento de eventos é importante. Somente fornecendo ao Meta dados adicionais e de qualidade, você pode esperar tirar o máximo proveito dele.
Quando se trata de rastreamento de eventos com o Facebook Pixel, existem dois tipos de eventos:
Padrão
Personalizado
#3.1 Eventos de pixel do Facebook padrão x personalizados
De acordo com a documentação oficial do Facebook , os eventos padrão são as ações mais comuns que um visitante/usuário pode realizar em um site. A plataforma Meta reconhece e oferece suporte a esses eventos em todos os produtos de anúncios. Esses eventos podem ser usados para construir audiências e otimizar conversões.
Os títulos são praticamente auto-explicativos. Portanto, se você deseja rastrear uma interação mencionada na lista acima, use definitivamente o Evento Padrão.
Eventos personalizados são interações que não se enquadram nos eventos padrão. Por exemplo:
Rolagem
Tempo na página (por exemplo, quando você aciona um evento depois que um visitante passa 5 minutos em uma página)
Visualizou um determinado elemento
Clique no link de saída
Reprodução de vídeo, etc.
Tudo depende da sua imaginação.
#3.2 Uma tag + um gatilho para um evento padrão
Digamos que você queira rastrear quando alguém insere seu e-mail em sua página de destino. Olhando para a lista de possíveis eventos padrão, este deve ser considerado um Lead . Então, vamos criar uma tag que enviará o evento “Lead” para o Facebook.
No Gerenciador de tags do Google, vá para Tags > Novo > Pixel do Facebook e insira as seguintes configurações:
Como você pode ver, no campo Event Name, escolhemos Lead . Por enquanto, mantenha todos os outros campos vazios. A próxima coisa para que a tag funcione corretamente é definir um gatilho.
Isso depende do tipo de interação que você deseja acompanhar. Os gatilhos são uma história diferente que exige que você aprenda muito.
Se você tiver dificuldade para rastrear as interações por conta própria, pode ser necessário pedir ajuda a um desenvolvedor. Eles enviarão dados para a camada de dados e você precisará usar o gatilho de evento personalizado para capturar esses dados.
Quanto ao lead, vamos imaginar que um visitante (depois de inserir o e-mail) seja redirecionado para uma página de “obrigado” www.example.com/thank-you . Poderíamos criar um gatilho de visualização de página que dispara se o URL da página contiver /obrigado.
Mas lembre-se de que o rastreamento de formulário é TÃO cheio de nuances e seu gatilho pode parecer muito diferente.
#3.3 Teste o evento de pixel padrão do Facebook
Depois de criar uma tag e um acionador, salve suas alterações. Em seguida, ative o modo de visualização e depuração do GTM e navegue até um formulário de contato para enviar detalhes fictícios do lead. No meu exemplo, assim que insiro os detalhes, sou redirecionado para uma página de “obrigado”.
Como meu gatilho é baseado em uma exibição de página, verifico o evento Container Loaded em minha janela de visualização e depuração.
… e, em seguida, verifique se minha tag do pixel do Facebook (relacionada a um lead) foi acionada. Se sim, já é um bom começo! Leia este guia se estiver com dificuldades para depurar as configurações do Gerenciador de tags do Google.
O próximo passo (assim como foi com a tag FB Pageview) é verificar o Facebook Pixel Helper. Depois que a tag de lead for acionada, clique no ícone do Pixel Helper e verifique se você vê um ícone verde ao lado de um evento de lead .
A etapa final é testar os relatórios no Facebook Business Manager. Vá para Gerenciador de eventos > Fontes de dados. Escolha seu Pixel e clique em Testar eventos . Verifique se você vê o evento Lead lá.
#3.4 Uma tag + um gatilho para um evento personalizado
Neste exemplo, digamos que queremos rastrear sempre que alguém pressiona o botão Reproduzir em um player de vídeo do YouTube incorporado em nossa página inicial. Primeiro, vamos criar uma tag. Vá para Tags > Novo > Pixel do Facebook e insira as seguintes configurações.
Queremos que essa tag seja disparada somente quando alguém clicar no botão Reproduzir. Portanto, precisamos criar um gatilho de vídeo do Youtube para isso. Clique na seção Triggering em sua tag do pixel do Facebook e selecione o ícone Plus no canto superior direito.
Em seguida, clique em Trigger Configuration > Youtube video e insira as seguintes configurações (você pode adicionar mais se quiser, como Progress )):
Salve o gatilho e ele será adicionado automaticamente à sua tag Meta Pixel.
Agora, se você deseja adicionar alguns dados adicionais ao evento personalizado, pode fazer isso em Object Properties .
Navegue até essa seção e adicione os parâmetros personalizados necessários. Você notará que as variáveis que usei estão integradas no Gerenciador de tags do Google. Você só precisa ativá-los em Variables > Built-in Variables > Configure:
#3.5 Teste o evento personalizado
O princípio de teste é o mesmo descrito em #2.3. capítulo desta postagem do blog (relacionado ao teste dos eventos padrão). Seu objetivo aqui é garantir que:
A tag Meta Pixel dispara
O auxiliar do Pixel do Facebook mostra o ícone verde ao lado desse evento
A seção Eventos de teste no Gerenciador de eventos do Facebook mostra o evento que você acabou de enviar
#4. Envie parâmetros adicionais para Meta Pixel com Google Tag Manager
Com o Facebook Pixel, você pode enviar não apenas eventos, mas também valores adicionais (por exemplo, total do pedido, título do vídeo etc.). Já fizemos isso no exemplo anterior do evento de vídeo personalizado.
Você pode encontrar uma lista completa de parâmetros padrão suportados aqui . A maioria deles é opcional. Se você estiver trabalhando com um evento personalizado, sinta-se à vontade para criar qualquer parâmetro personalizado que desejar.
De todos os eventos padrão, apenas o evento de compra requer moeda e valor.
Além disso, olhando a documentação, você pode ver quais campos são esperados pelo Meta. Por exemplo, se você enviar o evento AddToCart e quiser enviar alguns dados personalizados (como preço do produto, etc.), o pixel do Facebook esperará content_ids, content_name, content_type, contents, currency, value . Nenhum deles é necessário quando se trata de AddToCart .
Portanto, quando for passar algum parâmetro, consulte esta página e verifique a tabela de eventos padrão + seus parâmetros.
Vamos, por exemplo, rastrear uma Compra e ver como uma tag GTM deve ser configurada.
#4.1. Exemplo – Rastreamento de Compra com Parâmetros Adicionais
Tenha em mente que este código contém valores fictícios. Um desenvolvedor deve escrever algumas funções e lógica personalizada em seu código que substitua valores fictícios por dados de compra reais.
Olhando para a documentação oficial do Meta Pixel, dois campos são obrigatórios:
Receita
Moeda
Vamos enviá-los. A partir desse trecho de código da camada de dados, há duas chaves nas quais estamos interessados: currencyCode e transactionTotal . Poderíamos reutilizá-los e enviar seus valores para o Facebook Pixel. Para isso, primeiro vamos criar duas Variáveis de Camada de Dados com as seguintes configurações:
Importante : esses valores diferenciam maiúsculas de minúsculas. Portanto, insira o currencyCode , não o currencycode .
Em seguida, crie um Meta Pixel Tag com a seguinte configuração:
Para registrar os valores necessários para o evento Compra:
Navegue até as propriedades do objeto
Lá, insira as variáveis da camada de dados criadas.
Verifique se os nomes correspondem ao formato fornecido pelo Facebook.
Enviaremos “EUR” como moeda (porque “EUR” é o valor do currencyCode na camada de dados) e 38,26 porque esse é o valor do transactionTotal na camada de dados).
Em seguida, clique na seção Triggering em sua tag de pixel do Facebook e selecione o ícone Plus no canto superior direito para criar um novo trigger. Em seguida, clique em Configuração do acionador > Personalizado . Queremos que o dataLayer.push (que contém os dados da transação) seja usado como um gatilho.
Em Custom Event Trigger , insira o nome do evento de transação (porque esse é o valor da chave ‘event’ nesse dataLayer.push).
Salve o acionador e, em seguida, salve a tag.
#4.2. Teste o evento com parâmetros adicionais
Agora, é hora de testar a configuração. Atualize o modo de visualização e depuração , acesse seu site e conclua a compra. Até agora, você já deve saber o que fazer:
Verifique se a tag do pixel do Facebook foi disparada na compra (no meu caso, devo clicar no evento de transação no console de depuração e verificar se a tag foi realmente disparada).
Verifique se o evento Purchase possui um ícone verde próximo a ele. Além disso, expanda o evento para ver se todos os parâmetros foram enviados conforme o esperado.
Verifique se a seção Eventos de teste registrou o evento com parâmetros personalizados. Verifique o Capítulo #3.3. aprender mais.
#5. O que você pode fazer com esses dados que você enviou para o Facebook?
Esta questão vai além do escopo desta postagem no blog. Assim, mencionarei rapidamente as possibilidades:
#6. Outras coisas a saber sobre o pixel do Facebook com o Gerenciador de tags do Google
Os primeiros cinco capítulos desta postagem do blog mencionaram as principais coisas que você deve saber para implementar o pixel FB via GTM.
No entanto, isso não é o fim da lista. Abaixo, você encontrará outras coisas que podem ser úteis. No entanto, em vez de explicá-los em detalhes, darei uma breve olhada ou fornecerei links para você investigá-los individualmente.
#6.1. Detecção automática de dados
Seguindo as etapas deste guia, você provavelmente já percebeu que o Facebook Pixel Helper mostra coisas como Microdata Automatically Detected ou Button Click Automatically Detected. Isso é chamado de Detecção Automática de Dados .
Meta Pixel tenta capturar vários dados adicionais em sua página. No entanto, não confio em soluções de rastreamento automático porque elas podem acabar capturando muitos dados inúteis também.
É por isso que geralmente desativo esse recurso. Se você quiser fazer o mesmo, vá para as tags de pixel do Facebook > Mais configurações e marque a caixa de seleção Desativar configuração automática .
Faça isso em todas as tags de pixel do Facebook.
#6.2. Enviando dados para vários pixels do Facebook na mesma página
Pode haver casos em que você precise enviar os dados para vários pixels do Facebook , por exemplo, um pixel é apenas para o departamento e outro para toda a empresa. Isso não é um problema para o Facebook Pixel, e é bastante fácil de fazer com um modelo de tag Custom Facebook Pixel.
Se você deseja definir a tag para enviar dados para vários pixels, insira-os no campo Facebook Pixel ID(s), separados por vírgula. Ou você pode inserir vários IDs na variável constante.
Ou você pode separar várias variáveis constantes (cada uma contém um único FB Pixel ID).
Todas essas opções funcionarão.
#6.3. Correspondência avançada
O Facebook Pixel Advanced Matching permite que os anunciantes conectem seus dados de clientes – como endereços de e-mail, números de telefone e outros dados demográficos – a suas campanhas no Facebook, portanto, segmentem com mais precisão.
Em outras palavras, junto com os eventos, você também pode enviar o endereço de e-mail do usuário do Facebook, número de telefone, sexo, cidade, etc.
Importante: Todas essas informações são consideradas Informações Pessoais Identificáveis (PII), e você precisa obter o consentimento de seus usuários/visitantes antes de enviar esses dados (mencionarei mais informações posteriormente).
Quando você envia informações pessoais como parâmetros de correspondência avançada, o Facebook Pixel faz o hash automaticamente desses dados usando o algoritmo de hash SHA-256.
Primeiro, mostrarei como configurar a correspondência avançada no Gerenciador de tags do Google. Imagine que você trabalha com um site onde os usuários podem fazer login e usar seus serviços. Você pode pedir a um desenvolvedor para enviar os seguintes dados para a camada de dados (e fazer isso antes que o código do contêiner GTM seja carregado):
Lembre-se de que o código acima é apenas um código fictício/exemplo. O código do seu desenvolvedor deve substituir esses valores de espaço reservado por alguns dados reais do usuário.
#6.3.1. Criar variáveis de camada de dados
Para cada ponto de dados que você deseja acessar, você precisará criar uma variável de camada de dados separada , por exemplo:
Faça o mesmo para o restante dos pontos de dados.
#6.3.2. Defina os parâmetros no FB Pixel Tag
Agora, vá para Tags e abra sua tag Meta Pixel Pageview. Marque a caixa de seleção Ativar correspondência avançada e uma nova seção de parâmetros de dados de informações personalizadas será exibida.
Expanda essa seção e insira as seguintes configurações. Primeiro, como tenho o e-mail, a cidade, o gênero e o país, criarei uma linha separada para cada um deles, escolherei o nome do parâmetro adequado e inserirei minhas variáveis da camada de dados na coluna Valor do parâmetro .
Você pode fazer o mesmo para todas as suas tags de pixel do Facebook. No entanto, é totalmente suficiente fazer isso para a tag PageView (porque geralmente ela dispara o primeiro no carregamento da página).
#6.3.3. Teste a configuração
Verifique o Pixel Helper do Facebook. Você deve ver os parâmetros de correspondência avançada que foram enviados:
Além disso, você deve usar os Parâmetros de correspondência avançados na seção Eventos de teste .
#7. Obtenha o consentimento antes do rastreamento (#GDPR ou qualquer outro regulamento de privacidade relacionado)
Por último, mas não menos importante, a privacidade do usuário. Todas essas coisas que você pode configurar no Facebook Pixel com o Google Tag Manager são legais. No entanto, você não pode fazer isso a menos que obtenha o consentimento de seus visitantes/usuários.
Vários regulamentos protegem a privacidade dos usuários e exigem que as empresas obtenham o consentimento dos usuários/visitantes antes de enviar dados para o Facebook Pixel e outras plataformas de terceiros. Esses regulamentos também são continuamente atualizados para permanecerem relevantes aos tempos.
Não sou advogado, então, por favor, não me peça aconselhamento jurídico. Faça isso com seu departamento jurídico.
Com o Gerenciador de tags do Google, você pode controlar como suas tags são disparadas, dependendo se um visitante/usuário deu consentimento para fins de marketing.
Se você quiser aprender como implementar um mecanismo de consentimento de cookies em seu site por meio do Gerenciador de tags do Google, primeiro leia este guia . Ou inscreva-se neste curso para obter instruções mais atualizadas.
Depois de implementar o mecanismo de consentimento, você terá vários gatilhos de bloqueio e variáveis relacionadas ao consentimento.
Normalmente, você usaria os gatilhos de bloqueio (o que eu aconselhava as pessoas a fazer no passado). Agora, o FB pixel oferece um recurso interessante que torna o gerenciamento um pouco diferente. Claro, você ainda pode seguir as diretrizes gerais do meu guia e usar os gatilhos de bloqueio. Mas a solução mais recente (desenvolvida pelo Facebook) é mais poderosa.
Porque? Porque com a solução mais recente, continuaremos disparando tags mesmo que o consentimento não tenha sido dado. No entanto, os dados não serão enviados. Ele será adicionado a uma fila. E assim que o visitante der consentimento, todos os eventos da fila serão enviados para o Facebook.
Por exemplo:
Um visitante chega à sua página
Rola para baixo (a tag FB é acionada e o evento é adicionado a uma fila)
Permanece em uma página por 1 minuto (outra tag disparada e o evento é adicionado a uma fila)
Um visitante dá consentimento clicando em um botão em um pop-up (ou em uma barra)
Os eventos são mantidos em fila, aguardando o consentimento do usuário. Assim que um visitante concordar em ser rastreado, o Meta começará a receber os dados do evento.
Importante: se a página for recarregada/atualizada, um usuário navegará para outra página (antes de dar consentimento) e a fila será limpa.
#7.1. Consentimento concedido
Você verá um menu suspenso chamado Consent Granted na tag Meta Pixel . Por padrão, seu valor é definido como true (o que significa que quando a tag é disparada, os dados são enviados para o Facebook).
No entanto, se você implementar a solução de consentimento de cookies que descrevi aqui ou algo semelhante, você terá variáveis como “Consentimento dado ao marketing”, “Consentimento dado às estatísticas”, etc.
Essas variáveis devem retornar true ou false dependendo se o usuário/visitante consentiu em ser rastreado.
Quando se trata do Facebook Pixel, precisaremos usar uma variável relacionada ao consentimento do Marketing. No meu caso, isso é Regex – cookies de segmentação permitidos (você também pode obtê-lo se implementar esta solução ):
Essa variável usa outra variável chamada cjs – false . É uma variável JavaScript personalizada que contém o seguinte código:
função() {
retorna falso
}
Use essa variável de tabela regex no campo Consentimento concedido (GDPR) . Importante : Este campo aceita verdadeiro ou falso . Portanto, se sua variável retornar valores diferentes, como sim ou não, talvez seja necessário usar regex, pesquisa ou outra variável que transforme a saída.
#7.2. Uma tag que é disparada quando o consentimento é dado
Para enviar todos os eventos em espera na fila, devemos enviar qualquer evento que contenha o Consent Granted: true . Para isso, costumo usar o evento Custom chamado consentGiven (você pode nomeá-lo como quiser).
Esta é a configuração dessa tag:
O gatilho depende do tipo de solução de consentimento de cookie que você implementou. Por exemplo, algumas configurações usam o acionador Custom Event consent_marketing , enquanto outras podem usar um diferente.
Portanto, certifique-se de disparar a tag de evento personalizada mencionada acima apenas quando o consentimento para fins de marketing for dado.
Desculpe por não ser muito específico aqui. No entanto, o aspecto “depende” é muito forte.
#8. Meta Pixel + Gerenciador de tags do Google do lado do servidor
Se você deseja tornar sua configuração de Meta Pixel mais precisa e coletar dados de maior qualidade, considere implementar uma solução do lado do servidor também.
De acordo com a Meta , o rastreamento do lado do servidor com a API de conversão da Meta pode ajudá-lo a:
Reduza o custo por ação como resultado da conectividade aprimorada
Melhorar a medição
Reduza o custo por ação
Aumente o controle de dados
Meta Pixel com Google Tag Manager: palavras finais
Ufa! Fazia tempo que não escrevia um post tão longo no blog. Embora a postagem média seja de aproximadamente 3.000 palavras, esta tem mais de 7.000. E, honestamente, há ainda mais coisas para cobrir. No entanto, acho que os que compartilhei acima são essenciais e se aplicam à maioria das configurações.
Portanto, quando se trata da implementação do Meta Pixel com o Gerenciador de tags do Google, aqui estão as principais conclusões:
Use o modelo de tag de pixel personalizado do Facebook para facilitar o gerenciamento
Não se limite apenas às exibições de página, acompanhe também os eventos
No entanto, se os eventos personalizados ainda estiverem disponíveis para criar públicos e conversões
É bastante fácil enviar os dados para vários pixels do Facebook de uma só vez
Considere o uso de correspondência avançada e propriedades do usuário
Obtenha consentimento antes de enviar dados sobre seus visitantes/usuários para o Facebook
Sempre teste minuciosamente. Verifique o modo de visualização, o auxiliar do pixel do Facebook, a seção de eventos de teste do FB Events Manager .
