Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Analytics Tools

Crear eventos de elementos seleccionados

Última actualización: junio 30, 2021

Requisitos

Marketing Hub Enterprise

Un evento de elementos seleccionado registra cuando un visitante anónimo o un contacto de HubSpot hace clic en elementos específicos en tu sitio web. Por ejemplo, haz seguimiento cuando se hace clic en una CTA de demostración gratuita o en un enlace de descarga de PDF. Los eventos de elementos en los que se hace clic solo se pueden crear y hacer seguimiento en páginas que tengan el código de seguimiento de HubSpot instalado.

Nota:

  • Las instrucciones de este artículo son para la nueva herramienta de eventos de comportamiento personalizados, que reemplaza la herramienta de eventos de comportamiento anterior. Cualquier evento creado en la herramienta preexistente seguirá funcionando, y aún puedes administrar y analizar esos eventos en la herramienta preexistente.
  • Los eventos heredados no se pueden migrar a la nueva herramienta de eventos. En cambio, se recomienda recrear tus eventos heredados en la nueva herramienta, ya que nuevos eventos personalizados proporcionan más flexibilidad con las propiedades de eventos. Por ejemplo, con eventos heredados que necesitas crear múltiples eventos para hacer seguimiento de campañas separadas, pero ahora un evento de comportamiento personalizado puede monitorizar varias campañas.

Los eventos de elementos seleccionados se pueden crear de las siguientes dos maneras:

Una vez que hayas creado tus eventos, descubre cómo analizar eventos en las herramientas de analíticas e informes. También puedes crear eventos de URL visitada y eventos personalizados.

Crear eventos de elementos seleccionados con la extensión de Chrome

Instalar la extensión de Chrome para eventos

  • En tu cuenta de HubSpot, haz clic en el símbolo de configuración settings, situado en la barra de navegación principal.
  • En el menú de la barra lateral izquierda, navega a Seguimiento y analíticas > Código de seguimiento.
  • Haz clic en Instalar extensión de chrome de evento.
  • Haz clic en Descargar.
  • Se redireccionará a la extensión de Analíticas de HubSpot en la tienda web de Google Chrome. En la esquina superior derecha, haz clic en Agregar a Chrome.

  • En el cuadro de diálogo, haz clic en Agregar extensión.
  • Una vez que hayas instalado la extensión, aparecerá como un símbolo de rueda dentada de color naranja sprocket en la barra de herramientas de tu navegador Chrome.

Error al crear un evento con la extensión de Chrome de evento

  • Navega a una página web con tu código de seguimiento de HubSpot instalado.
  • En la barra de herramientas del navegador Chrome, haz clic en el ícono de engranaje sprocket .
  • En el cuadro de diálogo, selecciona Elemento seleccionado

    chrome-extension-create-clicked-element-event
  • Haz clic en Siguiente. Podrás seleccionar un elemento en la página para hacer seguimiento.
  • Haz clic en el elemento de la página para el cual deseas crear un evento de elemento seleccionado. En el siguiente ejemplo, el evento de elemento seleccionado hará seguimiento a los clics en los aspectos clave del enlace.

  • En el cuadro de diálogo, el selector de CSS del elemento será generado automáticamente. Introduce un Nombre para el evento y haz clic en Crear evento.

Nota: Dependiendo de la complejidad y especificaciones CSS de tu sitio web, la extensión de Chrome para eventos podría no detectar un selector de CSS único para un elemento. En este caso, debes crear manualmente el evento o agregar una etiqueta id única al elemento en su lugar.

  • Después de crear el evento, aparecerá un mensaje de confirmación. Haz clic en Ver evento en HubSpot para ver el nuevo evento de elemento seleccionado en tu panel de eventos.

HubSpot comenzará a hacer seguimiento al elemento. Descubre cómo analizar el evento en HubSpot.

Crear manualmente el evento usando el selector de ID, clase o jQuery

  • En tu cuenta de HubSpot, dirígete a Informes > Herramientas de Analíticas.
  • Haz clic en Eventos de comportamiento personalizados.
  • En la parte superior derecha, haz clic en Crear evento.
  • En el panel derecho, escribe un nombre para tu evento y luego selecciona Elemento seleccionado

    create-custom-clicked-element-event-type
  • Haz clic en Siguiente.
  • Selecciona cómo deseas identificar el elemento seleccionado en la página. Más información sobre cómo encontrar identificadores en una página de sitio web.
    • ID de HTML: ingresa el ID del elemento al que deseas hacer seguimiento. Por ejemplo, si tu elemento seleccionado está configurado <button id="log-in">, ingresa inicio de sesión.
    • Clase de HTML: ingresa la clase del elemento al que deseas hacer seguimiento. Por ejemplo, si tu elemento seleccionado está configurado como <button class="bigCTA">, ingresa bigCTA.
    • Selector de jQuery: ingresa el selector de jQuery del elemento al que deseas hacer seguimiento.
       create-custom-clicked-element-ID
  • Haz clic en Siguiente.
  • Por opción predeterminada, el elemento seleccionado se monitorizará en todas las páginas que tengan el código de seguimiento de HubSpot instalado. Para monitorizar los clics en una página específica, selecciona Página específica y luego ingresa la URL de la página.
  • Haz clic en Guardar.

Después de crear el evento, HubSpot comenzará a monitorizar el elemento. Descubre cómo analizar el evento en HubSpot.

Comprender y recuperar selectores de elementos

Puedes identificar un elemento por su ID de HTML, clase de HTML o selector de jQuery.

ID

Un evento de elemento seleccionado puede identificar un elemento por el atributo ID y detectar cuándo se hace clic.

Para ver el ID de elemento:

  • Haz clic con el botón derecho en la página con el elemento que estás dirigiendo y selecciona Ver fuente de página o Inspeccionar.
  • Haz clic en el elemento. Debes poder ver el atributo ID en la línea de código (por ejemplo, id=“nombre-de-elemento-único”).
  • Copia el valor del ID y pega esto (por ejemplo, en este caso, nombre-de-elemento-único) en el campo ID sin comillas.
 

Clase

Un evento de elemento seleccionado puede identificar un elemento por el atributo de clase y detectar cuándo se selecciona.

  • Haz clic con el botón derecho en la página con el elemento que estás dirigiendo y selecciona Ver fuente de página o Inspeccionar.
  • Haz clic en el elemento. Deberías ver el atributo de clase en la línea de código (por ejemplo, clase=“nombre-de-elemento-único”).
  • Copia el valor de la clase y pega esto (por ejemplo, en este caso, nombre-de-elemento-único) en el campo Clase sin comillas.
 

Selector de jQuery

También puedes usar selectores completos de jQuery para dirigirte a elementos. Esto es útil si el elemento al que estás dirigiendo no tiene un ID o una clase, o necesitas ser más específico. Más información sobre selectores compatibles.