Uso do Seletor de CSS

Use o Seletor de CSS para selecionar de modo fácil e rápido elementos de CSS a serem usados como disparadores de regras baseadas em eventos sem sair do criador de regras do DTM.

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.

As seguintes seções contêm mais informações:

Exemplo com Elemento único

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.

O exemplo mais complexo descrito abaixo ilustra como usar o Seletor de CSS quando há muitos elementos similares na página, como as guias na parte superior ("Men's" (Masculino), "Women's" (Feminino), "Equipment" (Equipamento) e assim por diante).

Para usar o Seletor de CSS:

  1. Acesse o widget Seletor de CSS no DTM clicando no ícone durante a criação de uma regra.

    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. Especifique o URL do site e clique em Carregar.

    Observação: seja o mais específico possível quanto à página da Web que deseja designar como objeto do event off. 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.

    Se estivéssemos criando esta regra sem usar o Seletor de CSS, inspecionaríamos o elemento de página desejado para determinar o CSS correto a ser usado. Com o Seletor de CSS, basta clicar no elemento da página que queremos que acione a regra.

  3. Clique em “Fazer logon ou registrar-se”.

    Quando você clica em um elemento de página ao qual deseja que o seletor corresponda, ele fica verde. O Seletor de CSS agora 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 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”. Clique em Limpar para remover itens selecionados. Clique em Toggle Position (Alternar posição) para mover o painel para a parte superior ou inferior do iFrame como preferir. Click ? para exibir as informações de ajuda sobre o Seletor de CSS.

  4. Clique em Send to DTM (Enviar ao DTM) para copiar o CSS no campo Seletor ou tag do elemento no DTM.

  5. Conclua a configuração da regra como descrito em Criar condições para regras baseadas em eventos.

    Sem gravar qualquer código ou inspecionar nomes, criamos uma regra baseada em eventos acionada quando o usuário clica no link “Sign In or Register” (Fazer logon ou registrar-se).

Exemplo com Elementos similares

Suponhamos agora que queiramos criar uma regra acionada quando o usuário clicar na guia "Men's" (Masculino), na parte superior do 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. Acesse o widget Seletor de CSS no DTM clicando no ícone durante a criação de uma regra.

  2. Especifique o URL do site e clique em Carregar.

  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. O Seletor de CSS agora gera um seletor de CSS mínimo para esse elemento. Além disso, o seletor destaca todos os itens correspondentes a esse elemento realçado em amarelo. O Seletor de CSS é iniciado de forma ampla e você pode restringir sua seleção.

    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. Clique em Send to DTM (Enviar ao DTM) para copiar o CSS no campo Seletor ou tag do elemento no DTM.

  6. Conclua a configuração da regra como descrito em Criar condições para regras baseadas em eventos.

Limitações do Seletor de CSS

O Seletor de CSS está em versão Beta e talvez não funcione satisfatoriamente em alguns sites, devido a limitações técnicas.