Inscreva-se em minha Newsletter
Primeiramente iremos precisar importar um Container para sua conta do Tag Manager.
O Gerenciador de Tags do Google (Google Tag Manager) é bastante flexível. Vários tipos de triggers (gatilhos de disparos) estão disponíveis para gerar determinadas ações ou eventos, como cliques, envios de formulários, alterações de histórico e muito mais e podem ser usados para disparar tags.
No entanto, o Gerenciador de tags do Google não captura automaticamente algumas coisas, como eventos de hover (passar o mouse em determinada parte do site).
Precisamos de uma solução customizada para acompanhar quando os usuários passam o mouse sobre determinadas partes de nosso website.
Para tornar isso ainda mais fácil para você, criei um arquivo JSON prontinho para capturar o evento de Onmouseover (hover), que você pode simplesmente importar para o seu próprio contêiner do GTM. Esta receita não inclui tags ou acionadores (triggers), portanto, você precisará de alguma configuração adicional para começar a ver os dados de hover no Google Analytics.
Como usar o Contêiner de MouseOver
1. Modifique a variável { { Permanente – Hover com Seletores CSS } }
Na variável, você pode especificar uma lista de todos os seletores CSS nos quais deseja capturar os eventos de mouseover.
Você pode encontrar esta variável, juntamente com tudo o que está incluído em no arquivo JSON.
Se você não sabe o que são seletores CSS, eles são padrões que você pode especificar para selecionar diferentes elementos. Eles podem ser usados no GTM e oferecem muita flexibilidade!
Por exemplo, na minha página, se eu quisesse rastrear o mouseover da imagem acima, poderia fazer isso facilmente com um seletor de CSS.
Alguns seletores básicos:
.class
#id
elemento > elemento /* filho direto */
elemento elemento /* filho */
Como a imagem que desejo segmentar se encontra dentro um elemento div com uma classe de pi-img-w, posso usar alguns seletores básicos para criar um seletor CSS que corresponda a imagem:
div.pi-img-w > img (corresponde a qualquer elemento img que seja um filho direto de um elemento div com uma classe pi-img-w).
Então adicionando isso à minha variável no GTM, fica assim:
Se você quiser adicionar vários seletores para segmentar diferentes tipos de elementos em todo o seu site, você pode! Simplesmente separe-os com uma vírgula na sua variável. Por exemplo, se eu tivesse outros elementos na minha página que eu também quisesse rastrear, basta adicionar outro seletor à mesma variável.
Por exemplo, isso corresponderia aos nossos elementos de imagem e também a qualquer elemento span com uma classe de pi-img-overlay:
div.pi-img-w > img, span.pi-img-overlay
2. Certifique-se de que o GTM está enviando eventos de mouseover
Nossa tag faz referência à variável que contém nossos seletores CSS. Se houver um hover em um elemento que corresponda aos nossos seletores, um evento de mouseover será enviado ao dataLayer. Veja no modo de depuração do Tag Manager!
3. Crie triggers usando o evento de mouseover
Agora que temos um evento de mouseover configurado, podemos usá-lo para criar acionadores (triggers) e disparar nossas tags. Primeiro, você precisa criar uma nova variável personalizada para isso, para obter o valor attributes.element do dataLayer:
Em seguida, crie um acionador de evento personalizado que especifique passar o mouse como o evento e o seletor de CSS. Por exemplo, o acionador a seguir irá disparar uma tag quando um evento de mouseover for enviado para o dataLayer. E quando o elemento corresponder ao seletor específico.
Você pode criar um acionador exclusivo para cada seletor de CSS que você adicionou à sua variável, permitindo que você dispare tags diferentes, dependendo de quais elementos são passados.
Como podemos usar um evento de Onmouseover?
O controle de navegação pode fornecer informações sobre as intenções do usuário e ajudar você a descobrir onde o mesmo tende a se concentrar ou ficar confuso. A partir do desse exemplo, podemos estar testando a ideia de que os usuários confundem as imagens com botões e frequentemente se concentram nelas antes de descobrir onde estão os links. Isso pode nos levar a tornar essas imagens navegáveis ou alterar nossas frases de CTA na página.
lguns de vocês já devem estar pensando em mensurar todos os eventos de mouseover nos elementos do seu site. Mas, antes de começar a monitorar os hover em elementos diferentes em todo o site, pergunte por que você deseja rastrear isso em primeiro lugar e quais perguntas esses dados podem ajudar a responder. Assim como no rastreamento de outros tipos de engajamento de usuários, deve haver um objetivo e uma estratégia por trás da coleta de dados de hover e um plano para visualizá-los.
Tem algumas ideias interessantes para rastrear em seu site? Compartilhe nos comentários!