Como usar eventos personalizados no DTM

Este artigo descreve como usar eventos personalizados em seu site da Web para acionar uma regra de gerenciamento dinâmico de tags (DTM).

Eventos do navegador

Um evento é um sinal de que algo aconteceu na página da Web. Os desenvolvedores podem usar esses sinais para reagir ou agir. 

Pense em um evento como uma onda de rádio. As ondas de rádio são transmitidas para que todos ouçam, mas é necessário sintonizar à frequência certa para ouvi-las. Se você transmitir e ninguém estiver escutando, nada acontece. O mesmo é aplicável a eventos: ao disparar um evento, o mesmo não resultará em erros caso algo não o esteja escutando. Além disso, é possível escutar um evento que nunca ocorre sem causar problemas ou resultar em erros.

Vários recursos abrangem eventos de HTML:

Usar regras baseadas em eventos no DTM

Ao criar uma regra baseada em eventos, você pode configurá-la para eventos padrão específicos. Cada navegador tem eventos padrão que são acionados por certas ações, como as seguintes:

  • Cliques do mouse
  • Passagens do mouse (passar o cursor sobre algo na página)
  • Foco do campo de formulário (o cursor se encontra dentro de um campo de formulário)
  • Desfoque do campo de formulário (o cursor sai de um campo de formulário)
  • Envios de formulário

Esses eventos fazem sentido; eles são executados todos os dias na Web. Se os eventos padrão do navegador não permitem que você monitore o que deseja rastrear, é possível usar eventos de JavaScript como alternativa.

Quais eventos são incorporados ao DTM?

Os eventos a seguir são incorporados a regras baseadas em eventos do DTM:

Mouse

Teclado

Fóruns

Vídeo HTML5

Dispositivo móvel 

Outros

click

mouseover

keypress

focus

blur

submit

change

ended

loadeddata

play

pause

stalled

volumechange

% complete

time complete

orientationchange

zoomchange

custom

enters viewport

element exists

pushState or hashchange

Eventos personalizados

Para poder escutar um evento, é preciso primeiro acionar um. Os eventos são definidos no código do site por seus desenvolvedores. Identificar quando e onde usar um evento pode ser um pouco complexo. Uma regra geral simples: se for algo que você deseja monitorar e não pode usar um tipo de evento predefinido do DTM para tal, use um evento personalizado.

Acionar um evento

Considere o exemplo a seguir com um evento personalizado, já que é permitido adicionar dados. Digamos que você tenha um carrinho de compras e, ao adicionar algo ao carrinho, ele usa o AJAX. Uma nova página não é carregada; em vez disso, uma janela pop-up ou uma mensagem informa que um item foi adicionado ao carrinho. Quando isso ocorre, é possível criar um evento personalizado que informa exatamente o que foi adicionado:

var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);

O código acima faz referência aos dados de um objeto chamado “dados”. O dado personalizado “detalhe” é definido como um objeto, que você pode consultar ao escutar um evento. Depois de criar o evento, você o acionará em um elemento específico; neste caso, um elemento na página com a id “minicart”. Agora você tem um evento personalizado que está sendo transmitido para qualquer pessoa que deseja escutá-lo.

Adicionar um ouvinte de evento personalizado

No DTM, adicionar um ouvinte de evento personalizado é tão simples quanto adicionar uma regra baseada em evento.

Estas etapas configuram uma regra para ouvir no DTM:

  1. Adicione uma regra baseada em eventos.

  2. Defina um nome para ela.

  3. Selecione o tipo de evento personalizado e digite o nome do evento, que foi definido como addToCart no exemplo acima.

  4. Defina a tag ou o elemento que terá esse evento. Usando os seletores de CSS, esse será #minicart.

  5. Configure a regra que acionará os sinais (beacons) apropriados.

Dúvidas?

Se você tiver dúvidas sobre esse artigo ou qualquer outro tópico do DTM, consulte os fóruns da comunidade DTM. Você pode usar o fórum para fazer perguntas, participar das discussões e manter-se atualizado sobre as versões mais recentes de cada solução.

Agradecemos ao Adam da Disruptive Advertising, por nos permitir usar porções de sua publicação do blog para esse artigo.

Receba ajuda com mais rapidez e facilidade

Novo usuário?