Site | Como pegar no site o que é preciso para tag de click no Google Tag Manager?

1. Primeiramente, acesse o site e navegue até a página na qual você pretende aplicar o clique.

2. Com o botão direito do mouse, selecione a opção "Inspecionar".

2.1 Nas opções de inspeção, vá em “recorder"

3. Inicie a gravação e execute os passos necessários, simulando as ações de um usuário, como clicar em botões, realizar envios e outras interações.

3.1. Na mesma janela do "Recorder", pause a gravação. Observe que surgirão marcadores nos pontos onde você realizou os cliques.

4. Observe que a ferramenta exibe a ação desencadeada pelo clique, destacando o seletor associado:

4.1. Acesse o menu representado pelos "3 pontinhos" no canto superior direito e selecione a opção "Copy as JSON".

Com o código em mãos, procedemos ao GPT e inserimos o seguinte prompt (IA utilizada para auxiliar e simplificar o processo):

Usando o GPT para seguir

1. Prompt:

Preciso fazer o tracking de um evento de click no meu site dentro do Analytics.
Gravei com o Console e ele me trouxe as seguintes informações:

{
"type": "click",
"target": "main",
"selectors": [
[
"div.cont-gallery-and-buttons button:nth-of-type(2)"
],
[
"xpath///*[@id=\"mapProperty\"]"
],
[
"pierce/div.cont-gallery-and-buttons button:nth-of-type(2)"
]
],
"offsetY": 37,
"offsetX": 40.21875
}

Como faço para fazer o tracking desse evento usando Google Tag Manager para ver os dados do evento de click no Google Analytics GA4?

2. Retorno do GPT (não se preocupe, mais abaixo mostrarei passo a passo em execução):

Para configurar o gatilho no Google Tag Manager (GTM) quando você seleciona "All Elements" como tipo de gatilho para rastrear cliques em elementos, você precisará definir os detalhes do gatilho para que ele saiba exatamente quando deve ser ativado. Aqui está como você pode proceder:

Acesse Triggers no GTM:

• No painel do GTM, vá para a seção "Triggers" e clique em "New" para criar um novo gatilho.

Configurar Trigger Type:

• Selecione "All Elements" na lista de tipos de gatilho. Isso é utilizado para rastrear interações com todos os elementos ou um elemento específico na página.

Escolher Evento de Gatilho:

• Para rastreamento de cliques, você geralmente terá duas opções: "All Clicks" ou "Some Clicks". "All Clicks" irá disparar o evento para qualquer clique, enquanto "Some Clicks" permite que você especifique condições.

Definindo Condições para "Some Clicks" (se aplicável):

• Se você escolher "Some Clicks", você precisará definir as condições sob as quais o gatilho será ativado. Aqui é onde você usa o seletor.
• Você terá várias opções de condição para escolher, como "Click ID", "Click Classes", "Click URL", etc. Dependendo do tipo de seletor que você tem, você escolherá a condição relevante.

Inserir o Seletor:

• Para CSS Selector: Se estiver usando um seletor CSS, escolha "Click Element" e use a condição "matches CSS selector" para inserir seu seletor específico.
• Para XPath: Se você estiver usando XPath, o GTM não oferece uma condição direta de XPath. Você pode usar uma Variável Personalizada de JavaScript ou um Método alternativo para converter o XPath em um seletor CSS ou verificar a correspondência do XPath no gatilho.

Configurar o Seletor:

• No campo de condição (por exemplo, "matches CSS selector"), você inserirá o valor do seu seletor, como "div.cont-gallery-and-buttons div.contact-whatsapp > a" ou o XPath fornecido.

Nomear e Salvar o Gatilho:

• Dê um nome descritivo ao seu gatilho e salve-o.

Aqui está um exemplo de como você poderia configurar o gatilho:

• Trigger Type: All Elements
• Event: Some Clicks
• Conditions:
• Click Element matches CSS selector div.cont-gallery-and-buttons div.contact-whatsapp > a

Após configurar e salvar seu gatilho, lembre-se de associá-lo à tag que você configurou para rastrear o evento de clique. Em seguida, teste tudo no modo de visualização do GTM antes de publicar para garantir que tudo está funcionando como esperado.

Realizando o procedimento

1. No Google Tag Manager, vá no item acionadores:

2. Clique em “novo”

3. Dê um nome para o acionador, e escolha a configuração:

4. Selecione “clique” - Todos os elementos

5. Selecione “Alguns clique”, até porque você quer algo especificado e não coletar tudo.

5.1 Coloque click Element

5.2 corresponde ao seletor CSS (Aqui é importante entender que só colocamos porque ele pega o CSS lá no início do processo quando você grava a ação)

5.3 Coloque a linha, aqui no caso foi: div.cont-gallery-and-buttons button:nth-of-type(2)

Salve e agora vá em TAGS:

6. Click em “Nova” > em configuração da tag: adicione do Google Analytics > Google Analytics GA4:

ATENÇÃO!

8. No Google Analytics, siga esses passos aqui (você vai precisar):

No canto esquerdo (menu), vá em administrador:

Na tela seguinte, siga os passos demarcados em vermelho:

Configurações da propriedade > coleta e modificação de dados > fluxo de dados

Click no item da imobiliária “imobiliária gabriel” como no exemplo acima .

Na tela seguinte vai abrir alguns dados, copia o ID DA MÉTRICA:

7. Retornando ao GTM, adicione o número copiado + dê um nome para o evento (como será exibido no analytics) :

8. Em seguida, insira os parâmetros conforme solicitado pelo GPT!

9. Por fim, acesse a seção de acionamento e associe a trigger que você criou no início:

10. Pronto, clique em salvar e agora vamos testar!

Na página que vai abrir ao salvar (listagem normal das tags) , clique em “Visualizar"

11. Uma nova aba de teste será aberta, solicitando que você insira o URL do local onde o botão e/ou item que deseja tagear está localizado. Como exemplo, adicione:

Ele vai para uma tela de carregamento e vai abrir para você em uma janela nova o website ?

Lá na outra tela (se você quiser), dê um ok e veja que o seu procedimento se encontra (geralmente fica no final), antes de você realizar qualquer ação no site ele aparece como zerado mesmo.

Agora, indo no site, faça o teste clicando no botão que você configurou:

Volte no Seu google tag manager e veja se houve efeito no teste:

Excelente! Tudo funcionou perfeitamente! Agora, vamos proceder com a publicação do que realizamos!

? Dica:

Para mais informações ou para começar a utilizar esse serviço, entre em contato com nossos especialistas. Clique aqui e esclareça qualquer dúvida que possa ter.