Na semana passada, a equipe de estrelas do Adobe Dynamic Tag Management adicionou alguns novos recursos atraentes às regras baseadas em eventos do DTM. Existem 2 novos tipos de eventos para regras baseadas em eventos que você pode usar.

1. Personalizado
2. pushState ou hashchange

Leia as seções abaixo para obter mais informações sobre cada tipo de evento.

Regra baseada em evento: personalizada

Primeiro, vamos definir um evento personalizado. Vejamos alguns exemplos de outras regras baseadas em eventos no DTM. Abaixo está a lista de tipos de eventos para regras baseadas em eventos.

Ao criar uma regra baseada em eventos, você pode configurá-la para eventos padrão específicos. Cada navegador (mesmo o Internet Explorer) possui eventos padrão que podem ser acionados para determinadas ações. Alguns dos fáceis são:

• cliques do mouse
• mouse overs (passar o mouse sobre algo na página)
• foco do campo de formulário (o cursor vai para dentro de um campo de formulário)
• borrões de campo de formulário (o cursor sai de um campo de formulário)
• formulário enviado
• etc.

Tudo isso faz sentido; são coisas que fazemos todos os dias na web. Às vezes você precisa rastrear algo e é quase impossível fazer isso corretamente. É por isso que adoro usar eventos JavaScript. Pense em um evento como ondas de rádio. Eles são transmitidos para todos ouvirem, mas você precisa sintonizar a frequência certa para ouvi-los. Se você transmitir e ninguém estiver ouvindo, não é grande coisa (não diga aos anunciantes de rádio). O mesmo com os eventos: você pode acionar um evento e ele não causará nenhum problema ou gerará nenhum erro se não houver algo esperando por ele. E se você ouvir um evento que nunca acontece, ele também não causará problemas ou gerará erros.

Por que isso é importante? Uma das formas antigas de rastrear ações era criar uma função JavaScript personalizada e, em seguida, chamá-la ou implementar um conjunto muito específico de código específico para um sistema de gerenciamento de tags ou outra base de código. Mas e se essa função de alguma forma for removida ou renomeada? Você receberia erros de JavaScript que às vezes poderiam interromper um site. Os eventos resolvem esse problema.

Se você está familiarizado com as regras de chamada direta do DTM, pode estar se perguntando “Por que não usar apenas uma regra de chamada direta?” Uma pergunta válida. O problema é que as regras de chamada direta criam uma dependência do DTM. Se eu sou um desenvolvedor e alguém está me dizendo para colocar um monte de código referenciando _satellite.track em meu código, eu questionaria e provavelmente diria não! Em vez disso, você pode usar um evento, que não tem dependências.

Para poder ouvir um evento, você deve primeiro acioná-lo. Os eventos devem ser definidos no código do site por seus desenvolvedores. Identificar quando e onde usar um pode ser um pouco complicado, mas uma regra simples é que, se for algo que você deseja rastrear e não puder rastreá-lo com um tipo de evento DTM predefinido, use um evento personalizado. Podemos encontrar algumas boas informações sobre como fazer isso na Mozilla. Existem 2 tipos básicos de eventos:

• Evento – disparar que algo aconteceu sem enviar nenhum dado adicional sobre o evento
• CustomEvent – ​​adicione alguns dados ao evento

Vou usar um exemplo com um evento personalizado, pois eles permitem que você adicione dados. Digamos que temos um carrinho de compras e, quando você adiciona algo ao carrinho, ele usa AJAX. Isso significa que uma nova página não carrega, mas pode haver um pop-up ou uma mensagem informando que um item foi adicionado ao carrinho. Quando isso acontece, posso criar um evento personalizado que me diga 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);

No código acima, você pode ver que estou fazendo referência a dados de um objeto chamado “data”. Estou definindo os dados de "detalhe" personalizados como um objeto, ao qual posso fazer referência ao ouvir o evento. Depois de construir o evento, eu o aciono em um elemento específico, neste caso um elemento na página com o id “minicart”. Agora tenho um evento personalizado que está transmitindo para qualquer pessoa que queira ouvir.

A seguir vou configurar uma regra para escutar no DTM:

1. Adicionar uma nova regra baseada em evento
2. Dê um nome
3. Selecione o tipo de evento “custom” e digite o nome do evento, que definimos como “addToCart”
   
4. Defina a tag ou elemento que terá este evento. Usando seletores CSS, será “#minicart”
   
5. Configure a regra. É aqui que fica legal. Você pode usar o “detalhe” que foi fornecido no evento e pode até usar como objeto. OBRIGADO ADOBE! Aqui estou enviando um evento do Google Analytics com os dados que desejo. Você pode fazer referência aos dados usando %event.detail% ou, se tiver um objeto, pode fazer referência a ele como %event.detail.<<name>>%. Veja o exemplo abaixo.
   
   Eu provavelmente nunca enviaria um evento como este, mas você entendeu como ele pode ser usado. E se precisar usá-lo em um código personalizado, digamos para a ferramenta Adobe Analytics, você pode fazer referência a ele como _satellite.getVar(“%event.detail.product_id%”). MOLHO MARAVILHOSO!!!

Não era para ser um romance, mas queria mostrar como esse recurso é incrível. Por mais que eu ame as regras de chamada direta, elas estão ficando em segundo plano em minhas implementações e os eventos personalizados estão em segundo plano.

pushState ou hashchange

pushState

Agora vamos olhar para pushState. Ele basicamente permite que você atualize a URL da página/site sem precisar carregar uma nova página. Por si só, isso não faz nada, mas permite que aplicativos de página única sejam usados. Existem vários frameworks que tiram proveito desse recurso. Portanto, se o seu site for construído assim, o recurso pushState pode ser muito útil!

Ao configurar a regra, é claro que você selecionará o novo tipo de evento.

Nenhum seletor de CSS é necessário para defini-lo melhor. No entanto, você vai querer olhar para algumas condições. O principal que você usará, se estiver apenas olhando para a nova URL, é path. É isso!

hashchange

Graças ao Twitter, todos nós sabemos o que é um hash (hash tags), então hashchange deve se referir a uma alteração no hash! O legal do hash é que você pode alterar o quanto quiser e não faz com que a página carregue. Hashes podem ser usados ​​para muitos propósitos, então não vamos entrar nos motivos pelos quais alguém teria isso. Antes do pushState existir, não era incomum atualizar o hash com novo conteúdo para AJAXy ou sites de página única.

Para configurar uma nova regra, selecione o mesmo tipo de evento como pushState. A única diferença é que agora você pode ver o hash como seu critério. Por exemplo:

Conclusão

O Adobe DTM é o melhor sistema de gerenciamento de tags que existe e, para sua sorte, clientes da Adobe, é grátis! Use estas dicas úteis para ajudá-lo a tirar proveito de seu poder e potencial e volte sempre para saber mais! Se você está procurando ajuda com as análises do seu site, entre em contato conosco e enviaremos uma proposta gratuita sobre como podemos ajudá-lo!