Volver a Blog

Recogedor de Eventos & Selectores de CSS | LECCIÓN #6

marzo 23, 2018 | Alex Castro | | Escuela Smartlook

Ahora que puedes rastrear tus eventos de usuario usando Smartlook, es fácil agregar datos sobre cómo interactúan los usuarios con tu producto o sitio web. ¿Pero qué hay de cuántos visitantes están usando tus funciones específicas? En esta lección, aprenderás cómo configurar eventos de forma selectiva utilizando el selector CSS de los elementos en tu sitio web.

¿Cómo configurar eventos por selector de CSS?

Tienes dos formas de configurar eventos mediante el selector de CSS:

Antes que nada, ¿qué es un selector de CSS?

Tu sitio web está construido con HTML, que crea los elementos esenciales (elementos HTML, como imágenes, bloques de texto, textos de encabezado, barras de navegación, botones, etc.). También está construido con CSS, que define la apariencia visual del diseño de la página (estilos).

En CSS, los selectores se utilizan para orientar los elementos HTML en las páginas que queremos diseñar. Para aplicar los estilos, los selectores CSS se establecen como atributos para los respectivos elementos HTML. Esto es lo que un selector de CSS puede ser:

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

¿Por qué debería configurar un evento por selector de CSS?

Puedes configurar fácilmente un evento cliqueado para rastrear clics en un botón o hipervínculo con texto específico. Pero si tienes un sitio web multilingüe en el que un botón tiene texto diferente debido a las traducciones, o si deseas verificar eventos en elementos donde no hay texto (por ejemplo, botones con solo un icono), entonces necesitas usar un selector de CSS ser elegido cualquier elemento en tu página para ser rastreado.

Configuración de eventos utilizando el Recogedor de eventos

Utiliza nuestro Recogedor de eventos para detectar el selector de CSS del elemento en el que deseas realizar un seguimiento de la actividad de clic.

En el administrador de eventos, haz clic en el botón “Seleccionar evento en la página“.

nserta la URL de la página desde la que elegirás el evento.

En la página, verás una ventana donde puedes hacer clic para activar el selector.

Elige el elemento que deseas rastrear y configura el evento.

Puedes ajustar la precisión del selector. De esta forma puedes capturar clics en elementos con atributos CSS comunes.

Los datos serán visibles de inmediato.

Pegar manualmente el selector CSS del elemento

Cómo obtener un Selector CSS de un elemento

Si usas Google Chrome como tu navegador, todo lo que necesitas hacer es hacer clic derecho en el botón o elemento (1) y seleccionar Inspeccionar (2).

Esto abrirá las herramientas de desarrollo de tu navegador con el elemento específico resaltado. Haz clic derecho sobre ese elemento (1) y selecciona Copiar (2), luego Copiar selector (3).

El selector de CSS del botón ahora se copia en tu portapapeles. Ahora puedes pegarlo en el formulario de configuración de eventos (1), nombrar el evento (2) e incluso categorizarlo (3). Termina guardando el evento (4), ¡y listo!

¡Lo que es aún mejor es que verás tus datos de inmediato!

¿No puedes rastrear tus eventos con el selector de CSS?

A veces, el botón que deseas rastrear tiene un selector repetido o necesita rastrear una ventana modal de pop-up. En este caso, configura tus propios eventos personalizados usando nuestra API.

En esta lección, has aprendido a:
  • Seguir los eventos cliqueados de forma selectiva con los selectores de CSS
  • Obtener el selector CSS de un elemento en tu página
  • Configurar un evento en Smartlook definiéndolo a través de un selector de CSS
  • Configurar un evento usando el selector de eventos

¡Ahora depende de ti!

Haz que tu seguimiento de eventos sea más específico con los selectores de CSS. ¿Qué tipo de eventos rastreas a través de tu selector de CSS? Avísanos en los comentarios.

Embudos para Analítica Cualitativa | Lección # 7

Discussion