Seletores CSS de Click no Google Tag Manager

Anteriormente eu comentei sobre o que são seletores CSS e alguns casos comuns de uso no Google Tag Manager. Se quiser se aprofundar mais sobre os Seletores CSS consulte a Guia da W3Schools, link no artigo anterior. Nesse artigo eu quero focar mais nos principais seletores que você poderá usar para rastrear eventos de clique em um website usando o GTM junto ao Google Analytics.

Principais seletores CSS:

• .class
• #id
• element
• element, element
• element element
• * (wildcard)
• element>element
• element+element
• element1~element2
• [attribute]
• [attribute=value]
• [attribute^=value]
• [attribute$=value]
• [attribute*=value]
• :checked
• :first-child
• :first-of-type
• :last-child
• :last-of-type
• :not(selector)
• :nth-child(n)

Lembre-se de que você pode combinar seletores para identificar diferentes aspectos de qualquer elemento HTML. Para combinar seletores, coloque-os um após o outro sem espaços. Por exemplo, para selecionar todos os elementos <a> que possuem a classe author, id como o daniel e que também são links de saída do website, veja como deve ficar:

a.author#daniel:not([href="mydomain.com"])

A ordem não altera os efeitos desse seletor, mas é comum adicionar pseudo-classes (por exemplo: :checked, :not) no final da sentença para facilitar a leitura.

.class

Corresponde ao nome da classe dos elementos, o nome de uma classe é inserido no atributo class.

Exemplo no HTML:

<a class="highlight author" href="/author-page/daniel-silva/">
  <span>Daniel Silva</span>
</a>

Exemplo de trigger (acionador):

Resultado: a Tag é acionada se o link for clicado. Cliques em <span> também funcionam, pois o trigger Just Links retorna tudo o que estiver contido dentro do elemento <a> quando o mesmo for clicado.

#id

Corresponde a elementos que têm o mesmo valor fornecido como o valor do atributo id.

Exemplo de HTML:

<div class="date">
  <a href="/catogory">
    <span id="date">2019-04-10</span>
  </a>
</div>

Exemplo de trigger:

Resultado: a Tag é acionada se o elemento <span id="date"> ... </span> for clicado.

element

Corresponde ao nome dos elemento fornecidos (por exemplo, a para links, img para imagens).

Exemplo de HTML:

<a class="author" href="/author-page/daniel-silva/">
  <img id="author" src="daniel-silva.jpg"/>
</a>

Resultado: a Tag será acionada se o elemento clicado for o <img id="author" ... />. Como você pode ver, o seletor combina elemento e id, o que significa que o elemento correspondente deve ser uma imagem e ter o ID author.

element, element

Corresponde a elementos que podem ser selecionados com QUALQUER seletor separados por vírgula (você pode adicionar vários seletores, cada um separado por vírgula).

Exemplo de HTML:

<a class="author" href="/author-page/reulison/">
  <img id="reulison_img" src="reulison.jpg"/>
  <p id="reulison_name">Nome: Reulison Silva</p>
</a>

Exemplo de trigger:

Resultado: A Tag será acionada se o clique for em <img id="reulison_img"/> OU <p id="reulison_name"> ... </p>.

element element

Corresponde ao elemento mais à direita quando está dentro do elemento mais à esquerda na árvore DOM. Não precisa haver relacionamento de pai-filho (hierarquia no DOM), basta que o elemento à direita esteja dentro do elemento à esquerda.

Exemplo de HTML:

<section id="main">
  <div id="article">
    <a href="/archives">
      <h1>Hello world!</h1>
    </a>
  </div>
</section>

Exemplo de trigger:

Resultado: a Tag é acionada se o clique for em <h1>Hello world!</h1> porque h1 está dentro do elemento que corresponde ao primeiro seletor (à esquerda) section#main.

* (wildcard)

Corresponde a qualquer elemento. Extremamente útil quando usado com o trigger Click / All Elements.

Exemplo de HTML:

<div id="navi">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/produtos">Produto</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</div>

Exemplo de trigger:

Resultado:

A Tag é acionada quando o elemento <div id="navi"> ou qualquer um de seus elementos aninhados (<ul>, <li> e <a>) são clicados.

O seletor é div#navi, div#navi *. Com base no que você aprendeu acima, na verdade são dois seletores, div#navi e div#navi *, e a Tag será acionada se um deles for clicado.

O primeiro seletor corresponde aos cliques diretamente no elemento <div id="navi">. O segundo seletor corresponde aos cliques em qualquer elemento envolvido por <div id="navi">. O espaço em branco é importante aqui, se o segundo seletor fosse div#navi > *, ele corresponderia apenas a cliques em <ul>, pois é o único filho direto de <div id="navi">.

element>element

Corresponde ao elemento mais à direita quando seu pai direto é o elemento à esquerda.

Exemplo de HTML:

<section id="main">
  <div id="article">
    <a href="/archives">
      <h2>Hello world!</h2>
    </a>
  </div>
</section>
<section id="end">
  <div id="footer">
    <h2>Goodbye world!</h2>
  </div>
</section>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for em <h2>Goodbye world!</h2> porque seu pai direto é <div>. Ele não será acionado no <h2>Hello world!</h2> porque o pai direto desse elemento é <a>.

element+element

Corresponde ao elemento mais à direita, se vier diretamente após o elemento mais à esquerda. Eles devem compartilhar o mesmo pai.

Exemplo de HTML:

<div id="author">
  <img src="/author.jpg" id="author_image"/>
  <p>Nome do autor</p>
</div>

Exemplo de trigger:

Resultado: A tag é acionada se o clique for em <p>, porque ele é diretamente precedido de <img id="author_image" />.

element1~element2

Corresponde ao elemento mais à direita, se for precedido pelo elemento mais à esquerda. Eles devem compartilhar o mesmo pai. Em outras palavras, é um pouco menos rigoroso que o seletor anterior, pois o elemento anterior não precisa estar imediatamente próximo ao elemento selecionado.

Exemplo de HTML:

<div id="author">
  <img src="/author.jpg" id="author_image"/>
  <span>Nome do autor</span>
  <a href="https://www.reulison.com.br">Site do autor</a>
</div>

Exemplo de trigger:

Resultado: a Tag acionada se o clique for em <a>, porque é precedido por <img id="author_image"/>.

[attribute]

Corresponde ao elemento que tiver o atributo usado no seletor.

Exemplo de HTML:

<div id="main_content">
  <div data-name="gtm_example">
    <span>Exemplos do GTM</span>
  </div>
</div>

Exemplo de trigger:

Resultado: a Tag é acionada se o clique for em <span>, porque seu pai direto é um <div> com o atributodata-name.

[attribute=value]

Corresponde se o elemento tiver o atributo especificado e com o valor (value) exato.

Exemplo de HTML:

<div id="main_content">
  <div data-name="gtm_example">
    <span>Exemplo do GTM</span>
  </div>
  <div data-name="second_gtm_example">
    <span>Outro exemplo do GTM example</span>
  </div>
</div>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for no segundo <span>, porque somente ele possui um pai direto cujo atributodata-name possui o valor second_gtm_example.

[attribute^=value]

Corresponde se o elemento tiver o atributo especificado cujo valor começa com a sequência fornecida.

Exemplo de HTML:

<div id="main_content">
  <span id="product_12345">
    Product 12345
  </span>
  <span id="product_23456">
    Product 23456
  </span>
  <span id="attachment_12345">
    Attachment 12345
  </span>
</div>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for em um dos dois elementos <span> cujo id começa com o product. Não será acionado se o clique parar no terceiro elemento, porque seu id do começa com attachment.

[attribute$=value]

Corresponde se o elemento tiver o atributo cujo valor termina com a sequência fornecida.

Exemplo de HTML:

<div id="main_content">
  <span id="product_12345">
    Product 12345
  </span>
  <span id="product_23456">
    Product 23456
  </span>
  <span id="attachment_12345">
    Attachment 12345
  </span>
</div>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for no primeiro ou último <span>, pois seus atributos possuem a sequência_12345 no final de seus IDs. Não será acionado se o clique parar em <span id = "product_23456">, pois esse ID não termina com_12345.

[attribute*=value]

Corresponde se o elemento tiver o atributo especificado cujo valor contém a string fornecida.

Exemplo de HTML:

<div id="author">
  <span id="reulison_silva_profile">Perfil de Reulison</span>
  <span id="profile_pedro_silva">Perfil do Pedro</span>
  <span id="derek_anderson">Perfil do Pablo</span>
</div>

Exemplo de trigger:

Resultado

A Tag é acionada se o clique for em um dos dois primeiros elementos <span>, pois eles têm IDs que contêm a string silva. Ele não será acionado no terceiro <span> porque o valor do atributo ID desse elemento não contém a string silva.

:checked

Corresponde se o elemento especificado estiver marcado (botões de opção (radio), caixas de seleção e elementos <option> nos menus selecionados), muito usado em formulários.

Exemplo de HTML:

<form id="contact-us">
 Seu nome: <input type="text" name="name" /><br />
 Eu concordo com os termos <input type="checkbox" name="consent" /><br />
  <input type="submit" />
</form>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for em uma caixa de seleção quando estiver marcada (ou seja, o usuário irá desmarcar a caixa de seleção).

:first-child

Corresponde se o elemento fornecido for o primeiro filho de seu elemento pai.

Exemplo de HTML:

<ul id="main_navigation">
  <li>Home</li>
  <li><a href="/products">Products</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Exemplo de trigger:

Resultado

A Tag é acionada se o clique for em <li>Home</li>, pois é o primeiro elemento filho de seu elemento pai direto.

:first-of-type

Corresponde se o elemento fornecido for o primeiro elemento de seu tipo (por exemplo, p, img, span) de seu elemento pai.

Exemplo de HTML:

<div id="author_info">
  <a href="/author">Reulison Silva</a>
  <p>Web Analytics Developer and SEO Expert</p>
  <p>Solving and creating bugs since ...</p>
</div>

Exemplo de trigger:

Resultado: a Tag é acionada se o clique for em <p>Web Analytics Developer and SEO Expert</p>, pois é o primeiro <p> filho de <div id="author_info">.

:last-child

Corresponde se o elemento fornecido for o último elemento filho de seu pai (o inverso de :first-child).

Exemplo de HTML:

<ul id="main_navigation">
  <li>Melhores Bandas</li>
  <li>A-ha</li>
  <li>The Smiths</li>
</ul>

Exemplo de trigger:

Resultado: a Tag é acionada se o clique for em <li>The Smiths</li>, pois é o último elemento filho de seu elemento pai <ul id="main_navigation">.

:last-of-type

Corresponde se o elemento fornecido for o último elemento do seu tipo de pai.

Exemplo de HTML:

<div id="author_info">
  <a href="/author">Reulison Silva</a>
  <p>Web Analytics Developer and SEO Expert</p>
  <p>Solving and creating bugs since ...</p>
</div>

Exemplo de trigger:

Resultado:

A Tag aciona se o clique for em <p>Solving and creating bugs since ...</p>, pois é o último <p> filho de seu elemento pai <div id="author_info">.

:not(selector)

Corresponde se o elemento não corresponder ao elemento seletor entre parênteses.

Exemplo de HTML:

<div id="author">
  <p>
    <a href="https://reulison.com.br/">Home</a>
  </p>
  <p>
    <a href="https://analytics.google.com/">Primeiro amor</a>
  </p>
</div>

Exemplo de trigger:

Resultado:

A Tag é acionada quando o clique for no segundo link (<a href=“https://analytics.google.com/”> Primeiro amor </a>). Isso ocorre porque o seletor CSS seleciona todos os elementos de link (<a>) que não correspondem ao seletor CSS [href*="reulison.com.br]. Em outras palavras, o link não deve ter um atributo href contendo a string reulison.com.br.

:nth-child(n)

Corresponde se o elemento fornecido for o enésimo filho de seu pai, onde n é o número passado entre parênteses. Ou seja, o número fornecido será usado pelo seletor para selecionar o elemento conforme sua ordem no DOM.

Exemplo de HTML:

<ul id="main_navigation">
  <li>This is Rock</li>
  <li>Judas Priest - The Sentinel</li>
  <li>Dio - Holy Diver</li>
</ul>

Exemplo de trigger:

Resultado:

A Tag é acionada se o clique for em <li>Judas Priest - The Sentinel</li>, pois é o segundo filho nth-child(2) de seu pai <ul id="main_navigation">.

Então é isso.

Todo mundo que lida de algum modo com aplicações web (isso inclui o Marketing) deveria aprender a usar os seletores de CSS, junto com JavaScript e expressões regulares. Isso se um dia você pretende usar Google Tag Manager.

A maior parte do Web Analytics é baseado em interações via navegador, a capacidade de rastrear esse eventos e interações faz toda a diferença na hora de tomada de decisões e realizar Testes A/B. Para e-commerce, dominar o Google Tag Manager deveria ser essencial para qualquer profissional que lida com decisões no layout na aplicação.

Os seletores CSS permitem identificar qualquer elemento em uma página (ou em todo o website) pois cada elemento possui uma posição única e pode ser segmentada através de um seletor.

Lembre-se de usar seletores simples e solicitar ao time de desenvolvimento que identifique e padronize uso de classes e IDs dos elementos. É uma boa prática e facilitar na hora de aplicar um seletor.