Gerenciador de Tags 6 - Prática 2: Criando a tag

Criando a Tag e Definindo os Detalhes

• Adicionar uma nova tag para capturar cliques no menu.
• Nomear a tag como "Captura de Cliques no Menu".
• Posicioná-la na posição 1, pois a posição zero já está sendo utilizada pela API de monitoramento.
• A ordem das tags é importante, e essa deve ser a primeira na lista.

Descrição e Tipo da Tag

• O campo de descrição é opcional e não será utilizado neste momento.
• Utilizar o tipo customizado para a tag.
• Inserir o código HTML relacionado à tag.

Configurando o Gatilho da Tag

• Definir o tipo do gatilho como "Todas as Páginas", pois o menu de navegação aparece em todas as páginas.
• Caso haja alguma página em que o menu não apareça, adicionar um tipo customizado e especificar via JavaScript que essa página não possui o menu. No entanto, utilizar "Todas as Páginas" será suficiente na maioria dos casos.

Categoria da Tag

• Selecionar a categoria previamente criada chamada "Tagueamento".

Finalizando a Configuração da Tag

• Aprovar e salvar a tag.

Entendendo o Código JavaScript para Capturar Comportamentos do Menu

• A seguir, vamos inserir o código JavaScript que irá capturar os comportamentos dos usuários em relação ao menu de navegação.
• Declarar uma variável constante chamada "menuLink" que receberá uma lista com todos os elementos do primeiro nível do menu.
• Utilizar um loop "for" para aguardar eventos de clique nos elementos mapeados.
• Ao ocorrer um clique em algum item do menu, guardar o nome desse item e gerar um console log para testar.

Testando a Captura de Comportamento

• Habilitar o modo de pré-visualização para testar a captura de comportamento.
• Copiar o parâmetro gerado pelo gerenciador de tags e colá-lo no final da URL para visualizar a captura em funcionamento.
• Utilizar a ferramenta de desenvolvedor (DevTools) para identificar os logs gerados no console ao clicar nos itens do menu.

Substituindo Console Log por Evento

• Editar a tag criada anteriormente.
• Substituir o console log pelo evento previamente preparado.
• O evento é do tipo "Dom Click", representando um clique em um elemento HTML.
• O evento possui nome e ID definidos para identificação na análise de dados.

Salvando a identificação do elemento clicado

• Ao clicar em um elemento, é possível salvar sua identificação.
• É necessário limpar e recarregar as alterações para testar novamente.
• O parâmetro de pré-visualização não precisa ser inserido a cada teste.
• Ao testar novamente, é possível visualizar melhor o comportamento no network.

Filtrando por clique

• É possível substituir o console pelo evento de clique.
• Ao observar no Network, pode-se verificar se o evento de dom click foi gerado.
• No payload, é possível ver que o evento gerou um ID de cliques no menu com o nome respectivo ao item clicado.

Verificando a coleta de dados

• Antes de publicar, é importante verificar se a coleta de dados está ocorrendo corretamente.