Desvendando Segredos dos Acionadores no Google Tag Manager: Os 8 Principais para Automatizar suas Tags

Desvendando Segredos dos Acionadores no Google Tag Manager: Os Oito Principais para Automatizar suas Tags

Este artigo técnico tem como objetivo explorar os principais acionadores disponíveis no Google Tag Manager e demonstrar como configurá-los e utilizá-los para automatizar tags. Para as tags serem disparadas em resposta a eventos de uma página, é necessário que haja pelo menos um acionador adicionado e configurado no GTM.  Ao decorrer deste artigo, serão abordados os seguintes acionadores: exibição de página, apenas links, todos os elementos, envio de formulário, alteração de histórico, evento personalizado, grupo de acionadores e timer.

O Google Tag Manager é uma poderosa ferramenta que permite aos profissionais de marketing e desenvolvedores gerenciar e implantar tags em um site sem a necessidade de modificar o código-fonte. Os acionadores desempenham um papel crucial no processo de automação das tags, pois são responsáveis por determinar quando uma tag deve ser acionada. Neste artigo, exploraremos os principais acionadores do Google Tag Manager e demonstraremos como configurá-los corretamente.

Acionadores Principais:

1.  Exibição de página: O acionador de exibição de página é usado para acionar uma tag quando uma determinada página é carregada. Ele pode ser configurado especificando a URL da página ou usando outros critérios relevantes.
2. Apenas links: O acionador de apenas links é acionado quando um link específico é clicado. É útil para rastrear interações com links importantes, como botões de compartilhamento em redes sociais ou links de download.
3. Todos os elementos: O acionador de todos os elementos é acionado quando qualquer elemento na página é interagido, como cliques em botões, preenchimento de formulários ou reprodução de vídeos. É uma opção útil para rastrear interações gerais do usuário.
4. Envio de formulário: O acionador de envio de formulário é acionado quando um formulário é enviado pelo usuário. Ele permite rastrear envios de formulários, como inscrições em boletins informativos ou envio de pedidos.
5. Alteração de histórico: O acionador de alteração de histórico é acionado quando há alterações na URL da página sem o carregamento completo de uma nova página. É útil para rastrear eventos como navegação em uma página da Web dinâmica.
6. Evento personalizado: O acionador de evento personalizado é acionado com base em eventos personalizados definidos no código do site. Isso permite que você rastreie eventos específicos de acordo com as necessidades do seu site.
7. Grupo de acionadores:  O grupo de acionadores permite combinar vários acionadores em um único grupo. Isso permite que você acione tags quando dois ou mais acionadores são satisfeitos simultaneamente.
8. Timer : O acionador de timer permite acionar tags com base em um intervalo de tempo específico. Isso é útil para rastrear o tempo gasto pelos usuários em determinadas páginas ou para exibir pop-ups após um determinado período.

Configurando os Acionadores Nesta seção, forneceremos exemplos de configuração para alguns dos acionadores mencionados anteriormente.

1 – Acionador: Exibição de Página

Para criar um novo acionador de visualização de página:

1. Clique em Acionadores >  Novo.
2. Clique em Configuração do acionador e escolha um tipo de acionador de visualização de página.
3. Opcional, mas recomendado para melhorar o desempenho: especifique as condições (geralmente, um padrão do URL) para as páginas em que um clique é esperado:
   • Este acionador é disparado em, selecione Alguns eventos.
   • Em Disparar esse acionador quando ocorrer um evento e todas essas condições forem verdadeiras, adicione um filtro para ativar esse acionador somente nas páginas em que ele for necessário. Por exemplo: PAGE PATH que  contém “link do site que vc copiou da página” (nosso caso: my-account).
4. Salve o acionador e publique-o.

2- Acionador: Apenas Links

Use um acionador de cliques do Gerenciador de tags do Google para disparar tags com base em eventos de clique. Quando alguém clica em um elemento de uma página que corresponda às condições do acionador, o Gerenciador de tags preenche automaticamente os valores de qualquer variável incorporada ativa com base em cliques.

Para configurar um acionador de cliques:

Obs.: Antes é necessário ativar todas as variáveis incorporadas no GTM. Vá em variáveis e adicione todas as variáveis incorporadas, como Click classes, Page Path, Click URL, etc.

No debug mode veja no evento link click as variáveis incorporadas e aí escolhemos uma variável única, como exemplo click URL e pegamos o parâmetro apresentado, no nosso caso “whatsapp”, veja na imagem a seguir.

Agora vamos em:

1. Clique em Acionadores > Novo.
2. Selecione Configuração do acionador e selecione um tipo de acionador de cliques:
   • Todos os elementos: acompanha cliques em qualquer elemento da página. Por exemplo: links, imagens, botões etc.
   • Apenas links: acompanha cliques nos links HTML que usam o elemento <a>. Por exemplo: <a href=”www.mundodotraqueamento.com.br“>Mundo do traqueamento</a>.
3. Opcional para ativadores “Apenas cliques em  links”:
   • Aguardar tags: selecione essa opção para aguardar até que todas as tags tenham sido disparadas ou o tempo limite tenha decorrido.
   • Verificar validação: somente dispara tags quando o clique no link é considerado uma ação válida. Se essa opção não for selecionada, o acionador irá disparar as tags sempre que um link for clicado.
4. Opcional, mas recomendado para melhorar o desempenho: especifique as condições (geralmente, um padrão do URL) nas páginas onde um clique é esperado:
   • Em Este acionador é disparado em, selecione Alguns cliques.
   • Em Disparar este acionador quando ocorrer um evento e todas essas condições forem verdadeiras, adicione um filtro para ativar esse acionador somente nas páginas onde ele for necessário. Por exemplo: Click URL contém api.whatsapp.

3 – Acionador: Todos os elementos

O acionador de visibilidade do elemento do Gerenciador de tags do Google é disparado quando um elemento selecionado é exibido na janela de visualização do navegador da Web. Os eventos que exibem um elemento incluem carregamentos de página, rolagens, quando uma guia do navegador foi movida para o primeiro plano ou rotinas programáticas que afetam a posição ou a visibilidade do elemento. Ou seja, não necessariamente aparece um link url disponível ao clicar no elemento.

Para configurar um acionador de visibilidade do elemento:

1. Clique em Acionadores > Novo.
2. Clique em Configuração do acionador e escolha o tipo Visibilidade do elemento.

Você também terá opções para determinar com que frequência um acionador será disparado:

• Uma vez por página: o acionador só será disparado uma vez por página. Se vários elementos de uma determinada página corresponderem ao código ou seletor de CSS, o acionador só será disparado na primeira vez que um elemento estiver visível. Se o usuário atualizar a página ou acessar uma nova, o acionador será redefinido e poderá ser disparado novamente com base na visibilidade do elemento selecionado.
• Uma vez por elemento: o acionador só será disparado uma vez por elemento selecionado por página. Se vários elementos de uma determinada página corresponderem a um seletor de CSS, esse acionador será disparado na primeira vez em que cada um deles for exibido. Caso vários elementos de uma página tenham o mesmo código, apenas o primeiro elemento correspondente irá disparar esse acionador. No entanto, se a opção Acompanhar alterações do DOM estiver ativada nas configurações avançadas, e vários elementos na página tiverem o mesmo código, essa opção poderá causar outro disparo do acionador caso uma alteração acompanhada do DOM remova o primeiro elemento correspondente. Se o usuário atualizar a página ou acessar uma nova, o acionador será redefinido e poderá ser disparado novamente com base na visibilidade do elemento selecionado.
• Toda vez que um elemento aparecer na tela: o acionador será disparado toda vez que um elemento correspondente for exibido, seja de forma programática ou por interação do usuário.

Vamos dar um exemplo: Pegamos o Evento de click no debug mode de um site de ecommerce, Iniciamos  criando uma tag do evento Add to cart e atribuindo um acionado de todos os elementos, como teste. Então, abrindo a página do ecommerce pelo debug mode do gtm, adicionamos um produto qualquer ao carrinho. No debug mode o evento “click” será disparado quando clicarmos no botão comprar. Então vamos até as variáveis incorporadas e escolhemos Click Text , copiamos o parâmetro que aparece na frente. No nosso caso Comprar, copiamos este  parâmetro e colocamos ele quando criamos o acionador todos os elementos, alguns elementos.

Na configuração do acionador , vá em alguns elementos > escolha Click Text contém  >  no nosso exemplo: Comprar. Aperte em salvar.

No Teste do Debug mode você verá que a tag “Add to cart” foi disparada quando você clicou no botão comprar da página do produto do e-commerce.

4 – Acionador: Envio de Formulários

Use um acionador de envio de formulário do Gerenciador de Tags do Google para disparar uma tag quando um formulário for enviado.

Para configurar um acionador de envio de formulário:

obs.: Antes de começarmos é necessário ativar todas as variáveis incorporadas para formulários no GTM. Vá em variáveis e adicione todas as variáveis incorporadas, como Form Classes, Form ID etc.

1. Clique em Acionadores > Novo.
2. Clique em Configuração do acionador e escolha o tipo Envio de formulário.

A opção Verificar validação define o acionador para ser disparado somente se o formulário for enviado. Se essa opção não for selecionada, um disparo acontecerá sempre que um usuário tentar enviar o formulário.

Observação: para conseguir o melhor desempenho possível, defina condições (por exemplo, um URL específico) em que você espera que o envio do formulário ocorra. Em Este acionador é disparado em, selecione Alguns formulários e insira um filtro de acionador que especifique onde a ação de formulário acontecerá.

Quando um acionador de envio de formulário é disparado, as seguintes variáveis incorporadas são preenchidas:

• elemento do formulário: o elemento do formulário que recebeu o clique
• classes do formulário: uma matriz dos valores encontrados no atributo de classe do formulário
• ID do formulário: o atributo “ID” do elemento do formulário
• destino do formulário: o atributo “target” do elemento do formulário
• URL do formulário: o atributo “href” do elemento do formulário, se houver
• texto do formulário: o texto visível no formulário

Exemplo: Vá numa página do seu site que tenha um formulário, vamos pegar como exemplo o de envio de Newsletter, preencha o formulário de e-mail e clica em enviar.

Agora no debug mode procure nas variáveis, incorporadas, vamos pegar no caso a variável “form classes”, copiamos o parâmetro e colocamos ele quando criamos o acionador de envio de formulários.

No GTM, na tag criada FB – envio de formulário. Adicione o acionador envio de formulário.

Na configuração do acionado, vá em alguns formulários > escolha Form classes contém “cole aqui o parâmetro copiado”( no nosso exemplo: newsletter-form). Aperte em salvar. No Teste do Debug mode você verá que a tag foi disparada quando você enviar esse formulário.

5 – Acionador: Alteração de Histórico

Os acionadores com base no evento “Alteração do histórico” disparam uma tag quando o fragmento de URL (hash) muda ou quando um site está usando as APIs pushState HTML5. Esse acionador é útil para disparar tags que acompanham exibições virtuais de página em um aplicativo Ajax, por exemplo.

Quando ocorre um evento de alteração de histórico, o Gerenciador de tags preenche as seguintes variáveis:

• fragmento de URL antigo do histórico: o antigo fragmento de URL
• fragmento de URL novo do histórico: o novo fragmento de URL
• estado antigo do histórico: o antigo objeto de estado do histórico, controlado pelas chamadas do site para pushState
• novo estado do histórico: o novo objeto de estado do histórico, controlado pelas chamadas do site para pushState

Exemplo: Pegamos como Exemplo o Evento Add Payment Info de um site de ecommerce, Iniciamos  criando uma tag do evento Add payment info e atribuindo um acionado de alteração de histórico, como teste. Então, abrindo a página do ecommerce pelo debug mode do gtm, adicionamos um produto qualquer ao carrinho, vamos até o checkout de na informação do endereço por meio do CEP vai aparecer os métodos de entrega do ecommerce, escolhemos o “bullet” SEDEX como exemplo. No debug mode o evento “History” será disparado. Então vamos até as variáveis incorporadas e escolhemos Page PATH copiamos o parâmetro que aparece na frente. No nosso caso Adress , copiamos este  parâmetro e colocamos ele quando criamos o acionador alteração de histórico.

Na configuração do acionador , vá em alguns alteração de histórico > escolha PAGE PATH contém  > “cole aqui o parâmetro copiado”( no nosso exemplo: Adress). Aperte em salvar. No Teste do Debug mode você verá que a tag “Add Payment info” foi disparada quando você modificar o tipo de entrega no checkout do e-commerce.

6 – Acionador: Eventos Personalizados

É um dos mais tranquilos para configurar. Os eventos personalizados são usados para acompanhar as interações que ocorrem no seu site que não são tratadas pelos métodos padrão de acionamento. Quando a Datalayer já apresenta o evento para podermos usar.

Para criar um novo acionador de evento personalizado:

1. Clique em Acionadores > Novo.
2. Clique em Configuração do acionador e escolha o tipo Evento personalizado.
3. Digite um nome de evento. Selecione Usar correspondência de regex para permitir que esse campo controle as expressões regulares.

Exemplo: veja a seguir um exemplo de configuração da Web que dispara uma tag quando um evento personalizado chamado view items é enviado para a camada de dados. Criamos então um novo acionador de evento personalizado. Na seção Configuração do acionador da sua nova tag, use estas configurações:

1. Nome do evento: view_item
2. Este acionador é disparado em: todos os eventos personalizados.

Note que no debug mode, nas variáveis, o event aparece como view_item.

Quando esse acionador é aplicado a uma tag, ela será disparada mesmo quando o evento de envio padrão for modificado. Quando o usuário clicar no botão ou num item que mostre a página do produto (view item), um evento personalizado com o valor view_item será enviado para a camada de dados. Em seguida, o Gerenciador de tags detecta “view_item” como um valor de evento personalizado e dispara a tag.

7 – Acionador: Grupo de Acionadores

Como o próprio nome ja diz, é um grupo de acionadores e avalia as condições de dois ou mais acionadores como se fossem um só. Isso quando ocorre eventos com o mesmo nome e aí é necessário colocar mais um acionador. O grupo só fará o disparo depois que todos os acionadores selecionados tiverem disparado pelo menos uma vez. Se você adicionar mais de uma instância de um acionador específico, ele precisará disparar o número correspondente de vezes antes do disparo desse grupo.

Para criar um grupo de acionadores, siga estas etapas:

1. Clique em Acionadores > Novo.
2. Clique em Configuração do acionador e selecione Grupo de acionadores.
3. Clique em + e selecione dois ou mais acionadores do contêiner.
4. Clique em Adicionar.
5. Opcional: para exigir que várias instâncias sejam do mesmo acionador, clique em + e selecione novamente o acionador que você quiser. Repita esse processo o número de vezes que o mesmo evento precisa ocorrer antes do disparo do grupo de acionadores.
6. Clique em Salvar.

8 – Acionador: Timer

O acionador “timer”   do Gerenciador de tags do Google permite que você envie eventos ao Gerenciador em intervalos programados. Use esse acionador para calcular quanto tempo um usuário gasta em uma página para concluir uma tarefa como exemplo.  (por exemplo, ler um artigo, preencher um formulário ou concluir uma compra). o TIMER  é utilizado na unidade de milissegundos. enTao para 15 segundos temos 15.000 milissegundos.

Para criar um novo acionador de tempo:

1. Clique em Acionadores >  Novo.
2. Clique em Configuração do acionador e escolha o tipo Tempo.
3. O valor padrão para o Nome do evento é gtm.timer. Esse valor especifica o nome do evento conforme é transmitido ao Gerenciador de tags. O valor padrão é gtm.timer e, na maioria dos casos, não é necessário modificá-lo. Você pode usar esse nome do evento para criar um acionador de evento personalizado. Por exemplo, especifique um nome timer15 e crie outro acionador de evento personalizado em que a condição é evento igual a timer15.
4. Adicione um Intervalo em milissegundos. O acionador será disparado no intervalo especificado (por exemplo, a cada 15.000 milissegundos) equivale a 15 segundos.
5. Adicione um valor Limite para especificar o número máximo de vezes que o acionador será disparado. Deixe esse campo em branco para que o acionador dispare eventos até que o usuário saia da página.
6. Na seção Ativar o acionador quando todas essas condições forem verdadeiras, especifique uma variável, um operador e um valor. Essa etapa garantirá que o listener do acionador seja ativado somente quando necessário, para ajudar a melhorar o desempenho geral do site.
7. Salve o acionador e publique o contêiner.