Capturar elemento sem ID e class no Tag Manager usando DOM

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Google Tag Manager

O Google Tag Manager é uma ótima ferramenta para capturar valores das páginas do seu site, armazenar em variáveis e enviar para outras ferramentas, como o Google Analytics, por exemplo.

▶ Se preferir, acesse "Capturar elemento sem ID e class no Tag Manager usando DOM" no YouTube.

Imagine um site com páginas de receitas onde cada uma tem a data de publicação visível. Você pode capturar essa data, colocar em variável e enviar para o Analytics como uma dimensão personalizada, ou enviar para outra Tag configurada no seu gerenciador.

Eu considero neste post que você já sabe trabalhar com tudo que vamos precisar, mas se não souber, confira o que são variáveis do Tag Manager e como configurar antes de continuar.

A captura dos valores pode ser fácil ou bem complexa, tudo depende de como o site foi feito. Por exemplo, existem sites com dados na Data Layer (Camada de dados), que é uma camada oculta (no código) onde os dados principais ficam disponíveis de forma organizada para captura. O nosso site de receitas não tem Camada de Dados, então vamos capturar o valor visível na tela.

A captura de dados visíveis pode também ser uma tarefa simples ou bem complexa. A simples acontece quando o elemento desejado, no nosso caso a data da publicação, está associado com um elemento HTML com ID ou Classe específica e única. Você pode conferir isso clicando com o botão direito do mouse sobre o elemento, opção Inspecionar.

Para facilitar o entendimento do nosso exemplo, segue o pedaço do código do site relacionado com a data da publicação da receita:

...
<ul class="post-meta">
	<li class="post-author meta-wrapper">
		<span class="meta-text">
			...
		</span>
	</li>
	<li class="post-date meta-wrapper">
		<span class="meta-icon">
			<span>...</span>
		</span>
		<span class="meta-text">
			<a href="https://receitips.com.br/bolos/receita-de-bolo-de-chocolate">6 de julho de 2021</a>
		</span>
	</li>
	<li class="post-comment-link meta-wrapper">
		<span>...</span>
	</li>
</ul>
...

Analisando o código, repare que o elemento <a> com a data que queremos não tem ID ou class (ex: <a ID='data'). Se tivesse seria possível criar uma variável do tipo Elemento Dom e capturar por código (ID) ou Seletor CSS (class). O elemento pai <span> tem class="meta-text", mas não é exclusivo.

A boa notícia é que você pode usar esse mesmo tipo de variável para capturar elementos com base em hierarquia, ou seja, basta informar os pais do elemento desejado numa sequência exclusiva.

Por exemplo, o elemento pai de <span>, o <li>, está usando uma class de valor "post-date". Se esse valor for único no código do site, a hierarquia a seguir pode ser usada para capturar a data:

.post-date .meta-text

Agora, se a class "post-date" for referência para outros elementos, é melhor aumentar o nível da hierarquia com o seguinte código para garantir um caminho exclusivo:

.post-meta li:nth-child(2) .meta-text

Analisando o código, a hieraquia começa no elemento com class "post-meta" que é pai de três elementos <li>. O segundo elemento <li> é pai do elemento <span> de class "meta-text". Nosso código criou uma sequência única de referência, e assim capturamos o valor desse <span> que é a data desejada.

Em variáveis do painel do Tag Manager, basta ir em Nova > Elemento DOM > método Seletor de CSS e preencher com a nossa hierarquia. Depois é só salvar e clicar em Visualizar para testar a captura.

Com a variável criada e disponível, basta configurar as suas tags como desejar e puxar o valor usando {{nome_da_variável}}. Confira aqui no site muito conteúdo de Google Analytics para usar em conjunto com Tag Manager e suas variáveis.