Inscreva-se em minha Newsletter
Você conhece o trigger (acionador) chamado Matches CSS selector do GTM (Google Tag Manager)? Pois saiba que esse é um dos recursos mais úteis da ferramenta.
Um dica que eu deixo logo de cara é para usar o GTM em inglês, pois assim você irá se familiarizar com alguns termos usados no CSS e JavaScript que também aparecem no GTM. Os termos como"acionador" ou “gatilho” se referem aos Triggers nesse artigo.
Nesse artigo não irei ensinar a usar seletores CSS, mas sim, como usá-los no Google Tag Manager. Se você nunca conhece como os Seletores CSS funcionam, recomendo o site w3schools.com e guia sobre seletores CSS. Mas para o uso dos Seletores CSS no GTM, espero que este artigo seja útil.
Atalho:
O que são Seletores CSS?
Você pode usar seletores de CSS para selecionar a posição de qualquer elemento em uma página web. Cada elemento possui uma posição única no DOM (Document Object Model) e, portanto, os seletores podem ser usados para encontrar até os elementos mais genéricos.
Às vezes, os seletores são muito simples enquanto são extremamente robustos. Por exemplo, ao usar um seletor como div #author, você está tentando selecionar um elemento que parece com <div id="author">. Como ele possui um atributo id, podemos esperar que ele seja o único elemento na página, portanto, esse mesmo seletor curto é muito poderoso.
Por outro lado, às vezes, tudo o que você pode fazer é usar um seletor realmente longo e complexo, porque há poucos recursos de identificação exclusivos no elemento ou em elementos pai mais próximos. Assim, o seletor pode acabar assim:
#main > article > div.post-content.markdown > div > p:nth-child(12) > a:nth-child(2)
Não é bonito, e possui o problema de que quanto mais longo e complexo for um seletor CSS mais frágil ele se torna. O seletor acima será invalidado quando qualquer um dos elementos da seleção mudar de posição ou forma.
Em outras palavras, sempre se esforce para criar um seletor o mais simples possível sem comprometer sua precisão para atingir o elemento exato que você deseja.
Os seletores CSS foram criados a partir do Cascading Style Sheets (CSS). As folhas de estilo são conjuntos de regras e declarações que integram, como os elementos HTML, uma página web. Aqui está a aparência de um CSS comum:
a:hover, a:active {
text-decoration: none;
font-weight: bold
}
Os dois itens que precedem o { e separados por vírgula são os seletores, e as duas linhas contidas entre chaves são as declarações. É assim que você regra funciona:
- Selecione todos os links
aem que o mouse passa sobre o elemento:hover; - E selecione todos os links
aque estão sendo clicados no momento:active; - ENTÃO remova todas as formatações de texto (por exemplo, sublinhado) deles;
- E defina o estilo de largura da fonte para negrito.
O CSS é essencial no design e desenvolvimento de aplicações web. Você pode fazer muitas coisas estranhas, porém magníficas, desde substituir a sua funcionalidade via JavaScript, até executar transições complexas usando a aceleração de hardware.
Bem, neste guia, tentaremos ser um pouco mais modestos e focaremos em como os seletores de CSS podem ser usados com o JavaScript do Google Tag Manager para aproveitar ao máximo os triggers, tags e variáveis, onde selecionar, consultar ou analisar o elemento correto é de extrema importância.
Seletores CSS em JavaScript
Em JavaScript, geralmente você usa seletores CSS em dois cenários:
- Você precisa selecionar um ou mais elementos específicos da página.
- Você precisa verificar se um determinado elemento corresponde a um seletor de CSS.
Ambos os cenários são muito relevantes no Google Tag Manager. Antes de abordarmos como eles funcionam no GTM, vamos dar uma olhada em como funciona a manipulação de JavaScript dos seletores CSS.
Usando document.querySelector e document.querySelectorAll
Os dois métodos JavaScript que você costuma usar com seletores CSS são document.querySelector() e document.querySelectorAll().
O primeiro retorna o primeiro elemento na página que corresponde ao seletor fornecido.
O segundo retorna uma lista de todos os elementos na página que correspondem ao seletor fornecido.
// Obtenha o primeiro elemento do link de saída na página
var firstOutbound = document.querySelector('a:not([href="mydomain.com"])');
// Obtenha todos os elementos da caixa de seleção e do botão de opção na página
var allChecked = document.querySelectorAll('input[type="checkbox"]:checked,input[type="radio"]:checked');
Como podemos pode ver, o seletor é passado como um argumento string para o método.
Lembre-se de que os elementos HTML são essencialmente objetos, e apenas capturá-los faz pouco sentido. Em vez disso, convém fazer algo com esses objetos, como analisar algumas propriedades deles.
// Obtenha o primeiro elemento do link de saída na página
var firstOutbound = document.querySelector('a:not([href="mydomain.com"])');
// Envie o URL desse link de saída para dataLayer
window.dataLayer.push({
firstOutboundLinkURL: firstOutbound.getAttribute('href')
});
No exemplo acima usamos document.querySelector para buscar o primeiro link de saída (ou seja, link que NÃO possui mydomain.com em seu href) e, em seguida, o enviamos para dataLayer.
Vale a pena lembrar que document.querySelectorAll não retorna uma array, mas um NodeList. Isso significa que você não pode usar os métodos de array com os valores que o document.querySelectorAll retornar. Você precisará recorrer a algumas soluções alternativas, por exemplo, usar o método map() em todos os elementos da lista para obter uma array como resultado.
// Obtenha TODOS os links de saída na página
var allOutbound = document.querySelectorAll('a:not([href="mydomain.com"])');
// Crie uma array com todos os seus valores href
var allHrefValues = Array.prototype.map.call(allOutbound, function(link) { return link.href; });
// Remova todas as duplicatas
var uniqueHrefValues = allHrefValues.filter(function(href, index) { return allHrefValues.indexOf(href) === index; });
Como podemos ver, para executar o método map() na lista retornada por document.querySelectorAll, é necessário invocar o método a partir do protótipo do array. É bom você ter isso em mente se deseja trabalhar com document.querySelectorAll.
Usando element.matches
Se você quiser verificar se algum elemento corresponde a um seletor CSS específico, você pode usar o métodomatches():
// Verifica se o elemento clicado é um link de saída
function checkIfClickedElementIsOutbound() {
var element = { { Click Element } };
if (element.matches('a:not([href="mydomain.com"])') {
return true;
} else {
return false;
}
}
Você invoca o método matches() no próprio elemento (o elemento deve ser um elemento HTML) e, como querySelector / querySelectorAll, você passa o seletor como um argumento do tipo string. O método retorna true para uma correspondência e false, caso contrário.
O problema de matches() é que ele não costumava ter suporte ao navegador, portanto, se você deseja usar esses métodos no Internet Explorer, pode ser necessário implementar um polyfill para estender o suporte.
Felizmente, o método matches() é abstraído no GTM ao usar os triggers, que é de longe o caso de uso mais comum de matches(). Então, vamos aprender mais!
Seletores CSS no Google Tag Manager
No Google Tag Manager (Gerenciador de tags do Google), você encontra os seletores CSS em vários locais.
Você pode usá-los como o método de seleção na variável DOM Element:
O uso de um seletor CSS permite selecionar elementos específicos que podem não ter o atributo ID para identificá-los facilmente.
Você também pode encontrar a mesma opção no trigger Element Visibility:
Enquanto a variável DOM Element retorna apenas o primeiro elemento correspondente (portanto, semelhante a document.querySelector), o trigger Element Visibility pode ser definido para selecionar todos os elementos correspondentes, tornando os seletores CSS super poderosos nesse trigger.
O cenário mais útil para seletores CSS no Google Tag Manager é o atributo usado para selecionar correspondências no CSS (matches css selector) quando usado em conjunto com a variável interna Click Element.
A variável Click Element
A variável Click Element é uma variável interna que você precisa habilitar antes de poder usar. A maneira mais fácil de habilitá-lo é acessar Variables através da navegação principal do GTM e clicar no botão azul Configure no canto superior.
Na aba que é aberta, marque a caixa ao lado de Click Element e pronto. Agora você pode escolher a variável Click Element em todos os menus suspensos do GTM.
A variável Click Element retorna o elemento HTML que foi o destino da ação de acionamento de evento automático (auto-event trigger). Em outras palavras:
Ele retorna o elemento clicado ao usar os acionadores Click / All Elements e Click / Just Links.
Retorna o elemento do formulário enviado ao usar o acionador Form Submission. Retorna o elemento correspondente que se tornou visível para o usuário ao usar o gatilho Element Visibility.
Como ele retorna um elemento HTML, você pode usá-los nas variáveis Custom HTML e Custom JavaScript quando criar suas tags, juntamente com métodos típicos de elementos HTML, como getAttribute, appendChild e sim, matches.
Você o usará com mais frequência com o atributo seletor de correspondências CSS (matches CSS selector) nos triggers Click e Form. Não é tão útil com o acionador Element Visibility, pois você já especifica o conjunto de elementos correspondentes com a configuração do seletor CSS no Trigger.
O atributo Matches CSS Selector
Você pode usar o atributo seletor de correspondências CSS junto com a variável Click Element para verificar se o elemento corresponde a um seletor específico.
Isso é muito útil se usado com o acionador All Elements, pois ele é acionado quando qualquer elemento na página é clicada, e você pode usar seletores CSS para selecionar uma Tag que irá disparar quando as regras do Trigger foram atendidas.
Para fazê-lo funcionar, primeiro marque a opção This trigger fires on… Some Clicks/Some Link Clicks/Some Forms e, em seguida, selecione a variável Click Element no seletor de variáveis (matches CSS selector), em seguida digite o seletor no campo à direita, da seguinte maneira:
Vale a pena lembrar que o All Elements captura o elemento exato em que o usuário clicou. Portanto, pode ser algo aninhado no elemento para o qual você realmente criou o seletor. Com o gatilho All Elements, você deve fazer uso do seletor curinga *.
Agora descubra como seria um Click trigger (acionado através de cliques) para principais seletores CSS para analisar eventos e clique.