Gerenciador de Tags 6 - Prática 2: Criando a tag
Este vídeo apresenta o processo de criação de uma tag, mostrando como capturar comportamento dos usuários
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.