Eis uma das variáveis de clique integradas no Google Tag Manager que, à primeira vista, pode parecer pouco útil.
Sobretudo se você já tentou usá-la com base no modo de visualização do GTM e não funcionou.
É normal, porque este modo pode mostrar alguns erros de conceito que podem induzi-lo em erro se não se informar bem.
Por isso, neste artigo quero falar um pouco mais desta variável, que nos pode tirar de apuros em mais do que uma ocasião.
Isso sim, embora exista uma parte um pouco mais técnica -a que tem a ver com os seletores CSS-, não vou entrar nas opções mais avançadas que a funcionalidade permite, mas apenas nos casos de uso mais habituais em que encontrei aplicação.
Mas comecemos pelo princípio.
O que é a variável Click Element no GTM: definição
Pois é uma variável que nos devolve o elemento em que um usuário clica ao navegar pelo site.
É provável que só pelo nome já tivesse imaginado, mas fica confirmado.
Esta variável aparece quando um determinado auto-listener do GTM está ativo, o que nem sempre acontece. Na verdade, quando começamos com um contentor novo, não está, mas não se preocupe: já vai ver que ativá-lo é extremamente simples.
Bem, quando este listener está ativo e um usuário clica em um link ou elemento do nosso site, é enviada para o Data Layer informação relativa a esse clique. Mais concretamente, estes valores:
- gtm.element
- gtm.elementClasses
- gtm.elementTarget
- gtm.elementUrl
- gtm.elementId
Você pode conferir na visualização:
O bom é que você pode acessar qualquer uma delas por meio de variáveis predefinidas no GTM, como explico a seguir.
Mais uma nota: estes valores são todos cadeias de texto, exceto gtm.element, que é um objeto.
A questão é que, como eu dizia na introdução, quando observamos suas propriedades na visualização, às vezes podemos encontrar algo assim:
E não, apesar do que vê aí, não é uma cadeia, mas um objeto.
Um objeto que devolve todos os atributos do elemento, como por exemplo:
- Href: o URL (se for um link; se for outro elemento, não)
- Title
- Texto do elemento
Que não são mostrados na visualização, mas estão acessíveis se precisarmos deles.
Bem, não sei se com o que expliquei até agora você já percebe as possibilidades desta variável, mas, caso ainda não, vou contar algumas.
Principais casos de utilização
Atualmente, há dois cenários principais em que Click Element me tem sido muito útil:
O primeiro é quando quer medir os cliques de um ou vários elementos do seu site que não têm nenhum ID nem qualquer classe.
Este é o uso mais evidente e o que vou desenvolver como exemplo neste artigo.
O segundo é quando você precisa medir o clique em um elemento que contenha vários subelementos.
Pense no botão de adicionar ao carrinho num ecommerce, onde é muito habitual ter um div que envolve um span com o ícone e outro span com o texto do botão.
E claro, o que interessa é medir o clique quando o usuário pressiona qualquer um deles.
Sem entrar em tanto detalhe como no caso anterior, mais adiante explico como.
Como utilizar a variável
Agora que sabemos em que consiste, vou explicar como ativar esta variável para você começar a usá-la.
Ativação da variável
A primeira coisa é ativá-la no GTM.
Para isso, vá a Variáveis > Variáveis integradas e ative-a. E já agora, ative também todas as restantes variáveis de Clique, porque são bastante úteis:
Só isto não chega, porque o listener de que falávamos no início estará desligado.
Ativação do listener
Mas colocá-lo para funcionar é tão simples quanto criar um acionador de clique em link ou clique em qualquer elemento:
Só por o criar, o listener começa a funcionar.
E para confirmar basta:
- Ativar o modo de visualização.
- Ir ao site.
- Clicar em qualquer link ou em qualquer elemento, conforme o acionador que criamos.
Depois de fazer isto, poderá ver a variável a funcionar como na imagem do início:
Bem, agora que expliquei toda a teoria, vamos começar com a prática.
Utilizar a variável Click Element do GTM
Aqui tem como aplicar a variável aos dois casos de utilização que mencionei no início.
Diga se isso não é comum: você quer rastrear quantos cliques ocorrem em um ou vários elementos do seu site e, quando vai fazer isso, percebe que eles não têm ID nem nenhuma classe que possa aproveitar.
E sim, podia pedir à equipa de IT que os adicionasse e esperar.
Ou podia usar Click Element hoje mesmo.
Então, se optar por esta segunda via, aqui tem um exemplo de como o poderia fazer.
1. Selecionar o atributo CSS correto para o acionador
Parto do princípio de que você já ativou as variáveis predefinidas de Clique do GTM e criou pelo menos um acionador de Click Element ou Click Link.
Se assim for, a primeira coisa que vamos fazer é descobrir o seletor CSS do elemento cujo clique queremos traquear.
Você tem várias opções. Deixo duas aqui.
1.1 Descobrir o seletor CSS através do inspetor de elementos do Chrome
Para utilizar este método, é recomendável ter algumas noções mínimas de CSS e HTML.
Bem, na realidade, para a analítica digital em geral é recomendável ter estes conhecimentos, por isso quanto mais cedo os adquirir, melhor.
Dito isto, o sistema é simples:
- Clique com o botão direito do mouse sobre o elemento do menu que queremos rastrear.
- Selecione "Inspecionar" no menu de contexto do Chrome para abrir o Inspetor.
- Clique com o botão direito sobre a tag HTML correspondente (será uma tag "a") e selecione "Copiar seletor".
Pronto, está tudo feito.
1.2 Descobrir o seletor CSS através de uma extensão do Chrome
Se você não tem nenhuma base técnica e se confunde com a solução anterior, pode usar esta extensão do Chrome (clique na imagem para baixar):
Ela pode ajudar você a selecionar os elementos que interessam:
É uma extensão freemium, com planos pagos e que exige cadastro com o Google. Por isso, pessoalmente prefiro o método anterior, mas, se você não entende nada de HTML, ela pode ajudar.
1.3 Testar
Tenha seguido qualquer um dos dois métodos, é interessante confirmar que selecionámos aquilo que nos interessa.
E apenas aquilo que nos interessa.
Para verificar, adiciono uma classe no inspetor de elementos com aquilo que copiei, clicando no ícone "+" à direita, assim:
Pode ser algo como color: red !important ou algo semelhante como background: red !important.
Algo chamativo que, ao rever o site, se destaque bastante e me indique o que selecionei. Assim vejo se selecionei aquilo que quero e apenas aquilo que quero.
Neste caso, vejo que o meu seletor só seleciona um dos três links do menu, por isso terei de mexer ligeiramente no seletor para apanhar os três.
Aqui não há truques, por isso talvez seja uma boa altura para adquirir essas noções de CSS se ainda não as tem…
No meu caso, passo de:
#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a
Para:
footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a
Ou seja, eliminei a referência ao primeiro elemento da lista, pelo que, ao testar, obtenho isto:
O que me indica que é o seletor que procuro e posso continuar.
Importante: este seletor está muito pouco otimizado. Poderia ser afinado e tornado muito, muito mais simples, mas queria mostrar que conseguir um que funcione não é assim tão complicado, mesmo que tenha pouquíssimos conhecimentos de HTML.
2. Criar acionador
Com o seletor correto copiado, abrimos o GTM e vamos a Acionadores > Novo e crio um assim:
Explicação de cada campo:
- Nome: como é do tipo Link Click, começo sempre por "LC -".
- Ativa-se em: "Alguns cliques em links". Lógico: queremos que dispare apenas quando um usuário clicar nos links do menu do footer.
- Variável: Click Element, que é aquela de que estamos a falar.
- Correspondência: é interessante saber que o tipo "corresponde ao seletor CSS" só nos aparecerá com esta variável integrada ou com "Form Element". Com nenhuma das outras predefinidas.
- Valor: colo a cadeia de texto que copiei e testei no passo anterior.
Guardamos.
3. Criar a tag do GTM
Neste caso, como queremos traquear um evento de clique, vamos a Tags > Nova e selecionamos uma de "Evento de GA4".
Configuramo-la assim:
Explico:
Tag de configuração de GA4: seleciono a geral, onde tenho o ID de acompanhamento. Se por acaso você não a tiver (o que está fazendo olhando Click Element então?), crie-a antes de tudo.
Nome do evento: aquele que você verá no GA4. O único conselho que posso dar aqui é cuidar da nomenclatura e mantê-la coerente com o restante do quadro de eventos.
Parâmetros: este ponto é importante. Eu adiciono o "link text" porque é assim que vou distinguir os cliques em cada um dos links do menu.
Se não o adicionasse, teria um evento que somaria os cliques em cada um dos links do menu, mas não poderia segmentar e ver as quantidades de cada um.
Isso sim, lembre-se de criar a dimensão personalizada correspondente no GA4 se quiser explorar o dado nos relatórios:
Acionador: escolhemos aquele que acabámos de criar:
Depois de guardar a tag, só falta confirmar que funciona como esperamos.
4. Teste
Temos de garantir que tudo funciona bem tanto ao nível do GTM como ao nível do Analytics, por isso vamos rever ambos.
Visualização do GTM
Ativamos o modo de visualização, vamos ao site e clicamos nos links.
Se tudo tiver corrido bem, veremos que a tag dispara quando deve:
Importante: é possível que você veja dois eventos de Link Click na visualização para cada clique nos links, como acontece comigo:
Isto deve-se muito provavelmente ao facto de, tal como eu, ter o tracking de cliques externos ativado na medição melhorada do GA4.
Na realidade, isso não representa nenhum problema, porque a tag só dispara em um dos cliques gêmeos e, portanto, apenas um evento é enviado ao Analytics, que é o correto.
Aqui pode ver como não dispara no outro:
Deixamos temporariamente o GTM.
DebugView no GA4
Abrimos a nossa propriedade de GA4 e vamos a Administração > DebugView.
E voltamos a clicar nos elementos do site que quero traquear.
Então deveríamos ver algo assim:
O que indica que estamos coletando os eventos corretamente.
Para verificar que o parâmetro está sendo enviado, clicamos no evento e depois no parâmetro correspondente. O valor será exibido:
Parece estar tudo correto, mas lembre-se: se você não tiver uma dimensão personalizada coletando o valor desse parâmetro, não poderá ver os dados nos relatórios, por mais que esta visualização os mostre.
Entendido?
Então só nos faltaria publicar o contentor do GTM para começar a coletar os cliques dos usuários.
#2. Cliques em elementos agrupados
Vamos ao segundo caso de utilização mais habitual.
Veja este exemplo de botão de adicionar ao carrinho:
Este é o seu código HTML:
Como se pode ver, a estrutura é um button que agrupa dois i com o ícone e o texto.
Se você ativar a visualização do GTM e clicar no botão, dependendo do ponto exato em que clicar, terá isto (se clicar no ícone):
Ou isto (se clicar no texto):
Embora não consiga lê-lo, vê-se que é diferente.
Mas claro, eu quero traquear os cliques em qualquer um dos elementos que compõem o botão como um só.
Então tenho duas soluções:
- A fácil: criar no GTM três regras com três eventos e três acionadores diferentes, um para cada elemento.
- A boa: utilizar Click Element e um acionador assim:
Ao escolher "Corresponde ao seletor CSS" e introduzir como valor o seletor:
- A classe do botão (".add-to-cart").
- E a dos seus nós filhos (".add-to-cart *").
Os cliques em qualquer parte do botão (ícone, texto) também serão recolhidos.
Esta é boa, não é?
Sim, maaaas…
Recomendações
Utilizar acionadores com seletores CSS tem o seu risco.
Sobretudo se não é você quem gere o código do site.
O motivo?
Simples: a qualquer momento a equipa de desenvolvimento pode fazer uma alteração no código que faça com que seu seletor deixe de coletar o elemento desejado. Isso é mais provável em sites que estão sendo atualizados continuamente.
Em menor grau, mas também pode acontecer com uma atualização do tema ou de algum plugin no seu CMS.
Então Click Element não é útil com esta configuração?
De forma nenhuma, é muito útil, mas quero que esteja consciente da sua principal desvantagem.
Por outro lado, e para os mais techies, saiba que a consola de programador dá a você muito mais informação sobre esta variável do tipo objeto.
Para vê-la, basta abrir a consola e escrever "dataLayer":
Agora navega até ao elemento e abre todos os valores:
A imagem mostra apenas alguns, mas são imensos.
A partir daqui, já depende de você e de JavaScript acessar mais algumas possibilidades, como ver o nó pai:
E obter a classe do nó pai com gtm.element.parentElement.className através de uma variável de Data Layer do GTM:
Ou também usar gtm.element.firstChild.id para acessar o ID do primeiro nó filho seguindo o mesmo procedimento.
Conclusão
Click Element é provavelmente a variável de clique predefinida mais potente no GTM.
É também a mais difícil de utilizar bem à primeira.
Mas vale a pena, porque em certos cenários vai salvar-nos a vida.
Bem, talvez esta afirmação seja um pouco exagerada, mas pelo menos vai poupar-nos tempo.
Espero que com estas pequenas noções consiga tirar partido dela nos seus projetos.
Deixe um comentário