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 |
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. |
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.
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).
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.
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.
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.
O CSS Selector está em Beta e pode não funcionar bem para alguns sites devido a limitações técnicas.
É 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:
Adobe Analytics:
Google Analytics
Os atributos padrão também podem ser referenciados usando JavaScript regular no código personalizado.