Voltar para Blog

Selecionador de Eventos & Seletores de CSS | LIÇÃO #6

março 23, 2018 | Alex Castro | | Escola Smartlook

Agora que você pode acompanhar os eventos de seus usuários usando o Smartlook, é fácil agregar dados sobre como seus usuários estão interagindo com seu produto ou site. Mas e quantos visitantes estão usando seus recursos específicos? Nesta lição, você aprenderá a configurar eventos seletivamente usando o seletor de CSS dos elementos em seu site.

Como configurar eventos pelo seletor de CSS?

Tem duas maneiras de configurar eventos pelo seletor de CSS:

Primeiro de tudo, o que é um seletor CSS?

Seu site é construído usando HTML, que constitui os blocos de construção (elementos HTML, como imagens, blocos de texto, textos de cabeçalho, barras de navegação, botões, etc.). Também é constituído por CSS, que define a aparência visual do layout da página (estilos).

Em CSS, os seletores são usados para especificar os elementos HTML nas páginas aos quais queremos aplicar estilos. Para aplicar os estilos, os seletores CSS são definidos como atributos para os respectivos elementos HTML. Aqui está um exemplo de um seletor de CSS:

#sign-up-panel > div > div.button-with-note > a

Por que você deve configurar um evento pelo seletor CSS?

Você pode configurar facilmente um evento clicado para rastrear cliques em um botão ou hiperlink com um texto específico. Mas se você tiver um site multilíngue em que um botão tem texto diferente por causa de traduções, ou você deseja verificar eventos em elementos onde não há texto (por exemplo, botões com apenas um ícone), então você precisa usar um seletor CSS para escolher qualquer elemento na sua página para ser rastreado.

Configurar eventos usando o seletor de eventos

Use nosso Seletor de Eventos para detectar o seletor de CSS do elemento no qual você deseja rastrear a atividade de cliques.

No gerenciador de eventos, clique no botão “Escolher evento na página“.

Insira o URL da página da qual você escolherá o evento.

Na página, você verá um pop-up onde você pode clicar para ativar o selecionador.

Escolha o elemento que você deseja acompanhar e configure logo o evento.

Você pode ajustar a precisão do seletor. Dessa forma, você pode capturar cliques em elementos com atributos CSS comuns.

Copiar e colar manualmente o seletor de CSS do elemento

Como obter um seletor CSS de um elemento

Se você usa o Google Chrome como seu navegador, tudo o que você precisa fazer é clicar com o botão direito do mouse no botão ou elemento (1) e selecionar Inspecionar (2).

Isso abrirá as Ferramentas do desenvolvedor de seu navegador com o elemento específico realçado. Clique com o botão direito do mouse sobre esse elemento (1) e selecione Copiar (2), em seguida, Copiar seletor (3).

O seletor de CSS do botão agora é copiado para sua área de transferência. Agora você pode colá-lo no formulário de configuração do evento (1), nomear o evento (2) e até mesmo categorizá-lo (3). Termine salvando o evento (4), e tudo está pronto!

O melhor é que você verá seus dados imediatamente!

Não consegue rastrear seus eventos usando o seletor de CSS?

Por vezes, o botão que você pretende monitorar tem um seletor repetido ou você está tentando monitorar as interações com uma janela de popup. Nesse caso, configure seus próprios eventos personalizados usando nossa API.

Nesta lição você aprendeu como:
  • Rastrear eventos de clique de uma maneira seletiva com seletores CSS
  • Obter o seletor CSS de um elemento na sua página
  • Configurar um evento no Smartlook definindo-o através do seletor CSS 
  • Configurar eventos usando o seletor de eventos

Agora cabe a você!

Torne seu acompanhamento de eventos mais específico com seletores de CSS. Que tipo de eventos você acompanha pelo seletor de CSS? Conte-nos nos comentários.

Funis para Análise Qualitativa | Lição #7

Discussion