Show Menu
TÓPICOS×

Criar condições para regras baseadas em eventos

As condições determinam quando uma regra baseada em eventos é acionada.
  1. Selecione o tipo de interação que deseja rastrear como cliques de mouse, ou o envio de um formulário.
    For more information, see Event Types .
  2. Ative as opções a seguir se necessário:
    Elemento
    Descrição
    Atrasar ativação de link
    Ative se o evento ativar um link e você desejar que o link seja atrasado até que o evento tenha tempo de ser acionado.
    Aplicar o manipulador de evento diretamente no elemento
    Aplica o manipulador de evento no elemento específico que está marcado. Essa configuração está vinculada ao conceito do efeito de bolhas e camadas em um navegador.
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. Um evento como um clique pode gerar bolhas para <body> . É importante entender onde o evento está realmente vinculado, e direcioná-lo especificamente para garantir que a regra seja acionada corretamente.
    Efeito de bolha significa que o evento é capturado primeiro e manipulado pelo elemento mais interno e propagado para os elementos externos.
  3. Indique o nome da tag que deseja rastrear e outras propriedades da tag que você deseja corresponder.
    See Using the CSS Selector for information about finding the correct element tag.
  4. Selecione e configure outros critérios ou tipos de condição que deseja vincular à regra.
  5. Indique sua preferência com respeito ao efeito de bolha do evento.
    O efeito de bolha do evento é uma forma de propagação de evento no DOM do HTML.
    Problema
    Solução
    Quer interações relacionadas em elementos secundários do seletor da regra identificada para acionar a regra.
    Permitir que eventos em elementos secundários borbulhem
    Quer impedir o efeito de bolha quando o elemento secundário já acionar seu próprio evento.
    Não permitir se o elemento secundário já acionar o evento.
    Não deseja que os eventos do seletor de regras identificado ultrapassem o próprio elemento na hierarquia de eventos.
    Não permitir que os eventos borbulhem até os principais

Tipos de evento

Lista de tipos de evento incorporados e a definição de cada um.
Categoria
Evento
Definição
Mouse
click
O botão de um dispositivo apontador é pressionado e solto em um elemento.
mouseover
Um dispositivo apontador é movimentado sobre o elemento que tem o ouvinte vinculado, ou sobre um de seus elementos filhos.
Teclado
keypress
Uma tecla é pressionada e, normalmente, produz um valor de caractere (usar entrada em vez disso).
Formulários
focus
Um elemento ganhou foco (não há bubbling).
blur
Um elemento perdeu o foco (não há bubbling).
submit
É enviado um formulário.
change
Um elemento perdeu o foco e seu valor mudou em relação ao de quando ganhou foco.
Vídeo HMTL5
ended
Reprodução interrompida por ter sido atingido o fim da mídia.
loadeddata
O carregamento do primeiro quadro da mídia terminou.
play
A reprodução começou.
pause
Pausa na reprodução.
stalled
O agente do usuário está tentando obter dados da mídia, mas, inesperadamente, eles não estão aparecendo.
volumechange
O volume mudou.
% complete
Emite um evento quando é atingida uma porcentagem especificada do tempo de reprodução total. Por exemplo, inserir 10% indica que essa regra só será acionada quando 10% da duração total do vídeo tiverem sido reproduzidos.
time complete
Emite um evento quando é atingida uma duração especificada do tempo de reprodução. Por exemplo, inserir 10 indica que essa regra só será acionada quando 10 segundos da duração total do vídeo tiverem sido reproduzidos.
Dispositivo móvel
orientationchange
A orientação do dispositivo (retrato/paisagem) mudou.
zoomchange
Quando um gesto de encolher ou expandir é executado em um dispositivo móvel.
Navegador
tab focus
O evento é acionado quando o conteúdo ganha foco.
tab blur
O evento é acionado quando o conteúdo perde foco.
Outras
custom
Um evento personalizado foi acionado no DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. Para obter mais informações, consulte CustomEvent no site Mozilla Developer Network.
enters viewport
Quando o elemento aparece primeiro para o visitante. Se o elemento ficar visível imediatamente após a página ser carregada, a regra será acionada imediatamente. Se o elemento ficar visível imediatamente após a rolagem, a regra será acionada nesse momento. Um atraso opcional pode ser especificado na regra que determina por quanto tempo o elemento deve ficar visível para que o evento seja acionado (o valor padrão é um segundo).
element exists
Quando um elemento de um seletor especificado começa a existir-seja porque está na marcação da página ou é posteriormente inserido dinamicamente. Cada regra é acionada somente uma vez.
pushState or hashchange
O caminho do URL do hash (identificador de fragmento) no final do URL mudou. O evento pushState or hashchange pode ser usado com aplicativos de página única (SPAs), nos quais a página não é recarregada, embora seu conteúdo mude. Estruturas de desenvolvimento comuns que podem ser usadas para criar SPAs são o Angular e o React. Esse tipo de evento permite criar regras baseadas em eventos dependentes dos desenvolvedores. Essas regras são acionadas quando ocorrem funções comuns em SPAs, como: O caminho do URL mudou com base no uso da API HTML5 History pushState . Para obter mais informações sobre o uso de pushState , consulte Adição e modificação de entradas do histórico (em inglês) no site Mozilla Developer Network. O hash mudou porque o usuário mudou exibições ou localizações na página. Para obter mais informações sobre hashchange , consulte Hashchange no site Mozilla Developer Network.
time passed
Valor em segundos. O evento é acionado após transcorrer o número de segundos especificado.
dataelementchanged
Um elemento de data mudou. Esse evento permite selecionar um elemento de dados específico a ser usado como disparador. For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
Uma das grandes vantagens do DTM é a capacidade de realizar um event off relativo a comportamentos ou interações de página no site. No entanto, localizar os elementos de CSS desejados para inclusão nas regras às vezes é difícil e demorado.

Example with unique element

A título de exemplo, queremos criar uma regra acionada quando o usuário clicar no link “Sign In or Register” (Fazer logon ou registrar-se) no nosso site, como mostra a ilustração a seguir. Este exemplo é simples, pois esse link não tem elementos similares no CSS.
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

Para usar o Seletor de CSS:

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    No exemplo, estamos criando uma regra baseada em eventos que usa o tipo de evento Click para acionar a regra quando o usuário clicar no link “Sign In or Register” (Fazer logon ou registrar-se).
  2. Specify the website's URL, then click Load .
    Seja o mais específico possível da página da Web que você deseja para o evento. Tenha em mente que as folhas de estilo de CSS podem mudar de uma página para outra, dependendo do site e de sua arquitetura. É útil experimentar e observar a frequência de mudança em sua folha de estilo.
    O site agora está carregado em um iFrame com o widget do Seletor de CSS incorporado. Passe o mouse sobre diferentes elementos para ter uma visão de como a ferramenta funciona.
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. Clique em Sign In or Register .
    Quando você clica em um elemento de página ao qual deseja que o seletor corresponda, ele fica verde. The CSS Selector then generates a minimal CSS selector for that element.
    Observe o painel na parte inferior, que contém informações sobre o elemento selecionado e um botão para enviar as informações ao DTM.
    O número entre parênteses ao lado de Clear (Limpar) indica o número de itens selecionado. Neste exemplo, o link “Sign In or Register” (Fazer logon ou registrar-se) não tem nenhum outro similar na página especificada e, por isso, é exibido “1”. Click Clear to remove selected items. Clique em Toggle Position (Alternar posição) para mover o painel para a parte superior ou inferior do iFrame como preferir. Clique em ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

Agora vamos supor que você queira criar uma regra acionada quando os usuários clicam na guia "Men's" (Masculino) na parte superior ou seu site. A diferença entre este exemplo e o simples, discutido acima, é que a guia "Men's" (Masculino) tem muitos elementos similares na página.
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. Clique na guia "Men's" (Masculino) para selecioná-la.
    Observe que muitos elementos da página são selecionados e aparecem realçados em amarelo. Neste exemplo, o número ao lado de Clear (Limpar) entre parênteses é 28, o que significa que há 28 elementos na página que usam a tag "a".
    Queremos acionar a regra quando o usuário clicar no link "Men's" (Masculino); para isso, precisamos cancelar a seleção dos outros elementos similares.
    Passe o mouse sobre qualquer elemento similar realçado (por exemplo, "Women's") e você verá uma caixa vermelha em torno do elemento.
    Quando você clica em um elemento de página ao qual deseja que o seletor corresponda, ele fica verde. The CSS Selector then generates a minimal CSS selector for that element. Além disso, o seletor destaca todos os itens correspondentes a esse elemento realçado em amarelo. The CSS Selector starts out broad and then lets you narrow your selection.
    Clique em um elemento realçado para rejeitá-lo (vermelho), ou em um elemento não realçado para adicioná-lo (verde). Por meio desse processo de seleção e rejeição você pode ter o seletor de CSS perfeito para suas necessidades. Pressione Shift enquanto movimenta o mouse para selecionar elementos dentro de outros já selecionados.
  4. Clique no elemento que apresenta a caixa vermelha (Women's) (Feminino) para cancelar a seleção deste e de todos os outros similares.
    Observe que o número entre parênteses ao lado de Clear (Limpar) agora é 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

Pode-se designar dinamicamente atributos de elementos a variáveis.
Para designar dinamicamente atributos de elementos a variáveis, use a sintaxe a seguir:
%this.attributeName%

Por exemplo, suponha que você tem uma página de resultados da pesquisa com vários links para sites da Web externos. Você deseja rastrear qual link é clicado ao preencher dinamicamente uma eVar com a id do elemento clicado.
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
Para fazer isso, crie uma regra baseada em eventos, que será acionada quando o visitante clicar nos links da página. Em seguida, na seção Analytics da regra, configure a eVar como %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

Por exemplo, suponha que você tem resultados de pesquisa semelhantes aos exibidos no exemplo anterior. No entanto, esses links contêm um atributo não padrão, loc que você deseja definir dinamicamente como eVar com base no link clicado.
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
Para fazer isso, crie uma regra baseada em eventos, que será acionada quando o visitante clicar nos links da página. Em seguida, na seção Analytics da regra, configure a eVar como %this.get Attribute(loc)% .
Caso não tenha certeza se o atributo desejado é padrão ou não, consulte w3schools.com para saber mais sobre os atributos HTML padrão. No entanto, em caso de dúvida, você pode utilizar o formato getAttribute() não padrão, que funcionará em qualquer cenário.
Essa funcionalidade pode ser utilizada nos campos de regras do Gerenciamento dinâmico de tags, incluindo:

Analytics variables

  • Adobe Analytics:
    • Rastreamento de link, dados da página, hierarquia
    • Variáveis e eventos globais
  • Google Analytics
    • Visualizações de página, eventos, variáveis personalizadas

Custom script

Os atributos padrão também podem ser especificados com o JavaScript no código personalizado.