Criar condições para regras baseadas em eventos

As condições determinam quando uma regra baseada em eventos é acionada.

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.

Ative as opções a seguir se necessário:

Elemento	Descrição
Ativação de Atraso de link	Ative se o evento ativar um link e você quiser que o link seja atrasado até que o evento tenha tempo de disparar.
Aplicar o manipulador de eventos diretamente ao elemento	Aplica o manipulador de eventos ao elemento específico que é direcionado. Essa configuração está vinculada ao conceito de borbulhamento e camadas em um navegador.

Por exemplo, ao clicar em uma imagem dentro de uma tag de âncora como <a href="abc.html"><img src="xyz.png"/></a>, é de se esperar que o clique esteja associado à tag de âncora, visto que a tag está no fluxo de propagação. Contudo, quando você inspeciona o clique nas ferramentas do desenvolvedor, o clique pode na verdade afetar somente a tag <img>. Para garantir que o evento seja manipulado corretamente, associe o clique à tag <img> e não dependa do navegador para propagar o clique para um elemento principal. Um evento como um clique pode gerar bolhas para <body>. É importante entender onde o evento está realmente vinculado e público alvo-o especificamente para garantir que a regra seja acionada corretamente.

O efeito de bolha significa que o evento é primeiro capturado e manipulado pelo elemento mais interno e, em seguida, propagado para elementos externos.

Indique o nome da tag que deseja rastrear e outras propriedades da tag que você deseja corresponder.

Consulte Usando o Seletor de CSS para obter informações sobre como localizar a tag de elemento correta.
Selecione e configure outros critérios ou tipos de condição que deseja vincular à regra.

Indique sua preferência com respeito ao efeito de bolha do evento.

O borbulhamento de eventos é uma forma de propagação de eventos no DOM HTML.

Problema	Solução
Deseja interações relacionadas em elementos filho do seletor de regras identificado para acionar a regra.	Permitir que eventos em elementos filho borbulhem
Deseja evitar o efeito de bolha quando o elemento filho já acionar seu próprio evento.	Não permitir se o elemento filho já acionar o evento.
Não queira que as eventos do seletor de regras identificado vão além do próprio elemento na hierarquia do evento.	Não permitir que eventos borbulhem para cima para os pais

Tipos de evento

Lista de tipos de evento incorporados e como cada um é definido.

Categoria	Evento	Definição
Mouse	click	Um botão do ponteiro é pressionado e solto em um elemento.
	mouse over	Um dispositivo apontador é movido para o elemento que tem o ouvinte conectado ou para um de seus filhos.
Teclado	tecla	Uma tecla é pressionada e normalmente produz um valor de caractere (use entrada em vez disso).
Forms	foco	Um elemento recebeu foco (não há bolhas).
	desfoque	Um elemento perdeu o foco (não borbulha).
	submit	Um formulário é enviado.
	mudança	Um elemento perde o foco e seu valor mudou desde que ganhou o foco.
Vídeo HMTL5	end	A reprodução parou porque o fim da mídia foi atingido.
	loadeddata	O carregamento do primeiro quadro da mídia foi concluído.
	play	A reprodução começou.
	pausa	A reprodução está pausada.
	parado	O agente do usuário está tentando obter dados de mídia, mas os dados não estão sendo recebidos inesperadamente.
	volumechange	O volume mudou.
	% conclúido	Emite um evento, considerando uma porcentagem específica do tempo total de reprodução. Por exemplo, inserir 10% indica que essa regra é acionada somente quando 10% da duração total do vídeo tiver sido reproduzido.
	time complete	Emite um evento com uma duração específica do tempo de reprodução. Por exemplo, inserir 10 indica que essa regra é acionada somente quando 10 segundos da duração total do vídeo tiverem sido reproduzidos.
Dispositivo móvel	orientationchange	A orientação do dispositivo (retrato/paisagem) foi alterada.
	zoomchange	Quando um gesto de expandir ou expandir é executado em um dispositivo móvel.
Browser	foco da guia	O evento é acionado quando o conteúdo recebe foco.
	desfoque de guia	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 Mozilla Developer Network.
	entra no viewport	Quando o elemento entrar pela primeira vez na visualização do visitante. Se o elemento estiver em visualização imediatamente após o carregamento da página, a regra será acionada imediatamente. Se o elemento entrar em visualização após a rolagem, a regra será acionada. Um atraso opcional pode ser especificado na regra que determina por quanto tempo o elemento deve estar na visualização antes que o evento seja acionado (o valor padrão é 1 segundo).
	element exists	Quando um elemento de um seletor especificado entra em vigor - seja porque está na marcação da página ou é inserido dinamicamente posteriormente. Cada regra é acionada somente uma vez.
	pushState ou hashchange	O caminho do URL ou o hash (identificador de fragmento) no final do URL foi alterado. O `pushState` evento ou `hashchange` aplicativo pode ser usado com aplicativos de página única (SPA) nos quais uma página não é recarregada, mas seu conteúdo é alterado. Estruturas de desenvolvimento comuns que podem ser usadas para criar SPA incluem Angular e React. Este tipo de evento permite que você crie regras baseadas em eventos sem depender de desenvolvedores. Essas regras são acionadas quando ocorrem funções comuns em SPA, como: O caminho do URL foi alterado com base no uso da `pushState` API do Histórico HTML5. Para obter mais informações sobre o uso `pushState`, consulte Adicionar e modificar entradas do histórico no site Mozilla Developer Network. O hash mudou devido ao usuário alterar visualizações ou locais na página. Para obter mais informações sobre como usar `hashchange`, consulte Hashchange no site Mozilla Developer Network.
	time passed	Valor em segundos. O evento é acionado depois que o número especificado de segundos é ultrapassado.
	dataelementchanged	Um elemento de data foi alterado. Esse evento permite selecionar um elemento de dados específico a ser usado como disparador. Para obter mais informações sobre um possível caso de uso, consulte Adicionar ferramentaAdobe Experience Manager ContextHub.

Uso do seletor de CSS

Use o CSS Selector para selecionar de forma rápida e fácil elementos CSS para usar como acionadores para regras baseadas em eventos sem sair do construtor de regras do DTM.

Uma das maiores vantagens do DTM é a capacidade de evento de comportamentos ou interações de página em seu site. No entanto, localizar os elementos CSS desejados para inclusão em suas regras às vezes é difícil e demorado.

Exemplo com elemento exclusivo

Por exemplo, queremos criar uma regra que seja acionada quando os usuários clicarem no link "Fazer logon ou registrar-se" em nosso site, como mostrado na ilustração a seguir. Este exemplo é simples porque o link "Fazer logon ou registrar-se" não tem elementos similares no CSS.

O exemplo mais complexo descrito abaixo ilustra como usar o CSS Selector quando houver muitos elementos similares na página, como as guias ao longo da parte superior ("Men's", "Women's", "Equipment", entre outros).

Para usar o Seletor de CSS:

Acesse o CSS Selector widget no DTM clicando no Target ícone ao criar uma regra.

Neste exemplo, estamos criando uma regra baseada em eventos que usa o Click tipo de evento para acionar a regra quando os usuários clicam no link "Fazer logon ou Registrar".
Especifique o URL do site e clique em Load.

OBSERVAÇÃO

Seja o mais específico possível para a página da Web que você deseja evento. Esteja ciente de que as folhas de estilos CSS podem mudar de uma página para outra, dependendo do seu site e de sua arquitetura. É útil experimentar para ver com que frequência sua folha de estilos muda.

O site agora é carregado em um iFrame com o widget Seletor de CSS incorporado. Passe o mouse sobre diferentes elementos para ter uma ideia de como a ferramenta funciona.

Se estivéssemos criando essa regra sem usar o CSS Selector, inspecionaríamos o elemento de página desejado para determinar o CSS correto a ser usado. Usando o CSS Selector, basta clicar no elemento na página que deseja acionar a regra.
Clique em Sign In or Register.

Quando você clica em um elemento de página que deseja que o seletor corresponda, ele fica verde. O CSS Selector então gera um seletor de CSS mínimo para esse elemento.

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 Clear indica o número de itens selecionados. Neste exemplo, o link "Fazer logon ou registrar-se" não tem nada parecido com ele na página especificada, portanto, "1" é exibido. Clique em Clear para remover os itens selecionados. Clique Toggle Position para mover o painel para a parte superior ou inferior do iFrame, conforme desejado. Click ? para obter informações de ajuda visualizações sobre o CSS Selector.
Clique em Send to DTM para copiar o CSS no Element Tag or Selector campo dentro do DTM.
Conclua a configuração da regra conforme descrito em Criar condições para regrasbaseadas em eventos.

Sem gravar qualquer código ou inspecionar elementos, criamos uma regra baseada em eventos que é acionada quando os usuários clicam Sign In or Register.

Exemplo com elementos semelhantes

Agora vamos supor que você queira criar uma regra que é acionada quando os usuários clicam na guia "Men's" (Masculino) na parte superior ou em seu site. A diferença entre este exemplo e o simples exemplo discutido acima é que a guia "Men's" (Masculino) tem muitos elementos similares na página.

Acesse o CSS Selector widget no DTM clicando no Target ícone ao criar uma regra.
Especifique o URL do site e clique em Load.
Clique na guia "Men's" (Masculino) para selecioná-la.

Observe que muitos elementos na página estão selecionados e são realçados em amarelo. O número ao lado de Clear parênteses é 28 neste exemplo, o que significa que há 28 elementos na página que usam a tag "a".

Desejamos acionar a regra quando os usuários clicarem no link "Men's" (Masculino), para que seja necessário desmarcar os outros elementos semelhantes.

Passe o mouse sobre qualquer elemento similar realçado (por exemplo, "Women's") e você observará que uma caixa vermelha é exibida ao redor do elemento.

Quando você clica em um elemento de página que deseja que o seletor corresponda, ele fica verde. O CSS Selector então gera um seletor de CSS mínimo para esse elemento. Além disso, o seletor destaca tudo o que corresponde a esse elemento em amarelo. Os CSS Selector start são amplos e, em seguida, permitem restringir sua seleção.

Clique em um elemento realçado para rejeitá-lo (vermelho) ou clique em um elemento não realçado para adicioná-lo (verde). Através deste processo de seleção e rejeição, você pode criar o seletor de CSS perfeito para suas necessidades. Pressionar Shift enquanto move o mouse permite selecionar elementos dentro de outros elementos selecionados.
Clique no elemento com a caixa vermelha (Women's) para desmarcá-lo e todos os outros elementos semelhantes.

Observe que o número entre parênteses ao lado de Clear agora é 1.
Clique em Send to DTM para copiar o CSS no Element Tag or Selector campo dentro do DTM.
Conclua a configuração da regra conforme descrito em Criar condições para regrasbaseadas em eventos.

Limitações do Seletor de CSS

O CSS Selector está em Beta e pode não funcionar bem para alguns sites devido a limitações técnicas.

Preencher variáveis dinamicamente

É possível atribuir atributos de elemento a variáveis dinamicamente.

Para atribuir dinamicamente atributos de elemento a variáveis, use a seguinte sintaxe:

%this.attributeName%

Por exemplo, suponha que você tenha uma página de resultados de pesquisa com vários links para sites externos. Você deseja rastrear qual link é clicado ao preencher dinamicamente um eVar com o clique do elemento. id

Exemplo de link: <a id='myFirstLink' href='www.exampleLink.com'>

Para fazer isso, crie uma regra baseada em eventos para acioná-la com o clique dos links na página. Em seguida, na Analytics seção da regra, defina o eVar como %this.id%.

Para atributos não padrão, é possível aproveitar a função JavaScript de forma semelhante this.getAttribute() vinculando-a a caracteres '%', da seguinte forma:

%this.getAttribute(attributeName)%

Por exemplo, suponha que você tenha uma página de resultados de pesquisa semelhante à mostrada no exemplo anterior. No entanto, esses links contêm um atributo não padrão, loc que você deseja definir dinamicamente para um eVar com base no link clicado.

Exemplo de link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>

Para fazer isso, crie uma regra baseada em eventos para acioná-la com o clique dos links na página. Em seguida, na Analytics seção da regra, defina o eVar como %this.get Attribute(loc)%.

Se não tiver certeza se o atributo desejado é padrão ou não, consulte w3school.com para saber mais sobre os atributos HTML padrão. No entanto, em caso de dúvida, você pode usar o getAttribute() formato não padrão, que funcionará em qualquer um dos cenários.

Essa funcionalidade pode ser utilizada nos campos de regras do Gerenciamento dinâmico de tags, incluindo:

Variáveis do Analytics

Adobe Analytics:
- Rastreamento de link, Dados da página, Hierarquia
- Variáveis e Eventos globais
Google Analytics
- Visualizações de páginas, Eventos, variáveis personalizadas