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 comportamiento personalizados sin código (BETA)

Última actualización: septiembre 5, 2022

Requisitos

Marketing Hub Enterprise

Los eventos de comportamiento personalizados te permiten hacer seguimiento a información única para tu negocio. Los eventos de elementos seleccionados y URL visitadas se pueden crear sin código con la extensión de Chrome de HubSpot.

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. Eventos de URL visitada registra cuando un visitante anónimo o un contacto de HubSpot visitan una URL específica en tu sitio web.

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.

 

La URL visitada y los eventos de elementos seleccionados se pueden crear mediante la instalación y el uso de la extensión de Chrome de HubSpot para eventos seleccionados, como hipervínculos e imágenes.

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

Crear eventos con la extensión de Chrome

Instalar la extensión de Chrome para eventos

  • En tu cuenta de HubSpot, haz clic en el settings símbolo de configuración, 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.

Crea un evento de URL visitado con la extensión de Chrome para eventos

  • Navega a una página web con tu código de seguimiento de HubSpot instalado.
  • En la barra de herramientas de tu navegador Chrome, haz clic en el símbolo de rueda dentada.
  • En el cuadro de diálogo, selecciona URL visitada y luego haz clic en Siguiente.

  • Añade el nombre de tu evento y, opcionalmente, una descripción. Haz clic en Siguiente.
  • Haz clic en Agregar para agregar una página. Puedes agregar varias páginas a un solo evento. 
  • En el campo URL de la página, escribe la URL a cuyas visitas deseas hacer seguimiento.
  • En el campo Nombre, escribe un nombre para la página. Este nombre estará disponible dentro de los datos de la propiedad del evento bajo la propiedad llamada Tracking Name.
  • Haz clic en Crear evento.

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

Crear un evento de elemento en el que se haya hecho clic con la extensión de Chrome para eventos

  • 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 símbolo de rueda dentada.
  • En el cuadro de diálogo, selecciona Elemento seleccionado.

  • Haz clic en Siguiente
  • Añade el nombre de tu evento y, opcionalmente, una descripción. Haz clic en Siguiente.
  • Para seleccionar un elemento en la página para hacer seguimiento, haz clic en Agregar.  Selecciona un elemento en la página para hacer seguimiento. Puedes agregar varios elementos con clic a un solo evento. 
  • Haz clic en el elemento de la página para 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 elemento que estás rastreando. Este nombre estará disponible dentro de los datos de la propiedad del evento bajo la propiedad llamada Tracking Name. Opcionalmente, añade una descripción y haz clic en Siguiente.
  • Para continuar añadiendo elementos adicionales a tu evento, haz clic en Agregar y selecciona otro elemento.
  • Para finalizar y guardar tu evento, 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 modificar el selector. Más información sobre cómo encontrar identificadores en una página de sitio web.

  • 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 a los elementos. 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 mediante un selector de jQuery.

  • 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.

ID

Para buscar y usar 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 pégalo (por ejemplo, en este caso, nombre-de-elemento-único) en el campo ID HTML sin comillas. Por ejemplo, para un elemento que incluye id="get Started-marketing-hub", ingresa get Started-marketing-hub en el campo.

Clase

Un evento de elemento seleccionado puede identificar un elemento por el atributo de clase. 

 

Nota:

  • cuando varios elementos de una página comparten la misma clase, solo el primer elemento de la página contará para completar eventos. Por lo tanto, solo deberías usar la clase como identificador cuando ningún otro elemento en la página comparta esa clase. Si el elemento no tiene una clase única, se recomienda usar ID en su lugar.
  • Si no puedes actualizar el código fuente de un elemento para agregar una clase o ID única, se recomienda usar la extensión de Chrome para configurar el evento, ya que HubSpot asignará un identificador más específico.

 

Para encontrar la clase de un elemento y usarla para el evento:

  • 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 en el campo Clase HTML sin comillas. Por ejemplo, para un elemento que se incluye en el campo.  
    • Cuando un elemento tiene varias clases, puedes usar cualquiera de sus clases como destino. Por ejemplo, si un elemento incluye class="cta--primary cta--medium homepage-sales", puede introducir cta--primary, cta--medium, o homepage-sales en el campo HTML Class. Sin embargo, asegúrate de que ningún otro elemento comparta esa clase.
    • Al unir varias clases, usa el siguiente formato: class1.class2.class3.

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.

Por ejemplo, deseas crear un evento de elemento seleccionado usando un selector de jQuery para el elemento siguiente:

<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">¡Manos a la obra!</a>

En lugar de usar el ID o la clase del elemento, puedes usar un selector de jQuery para dirigirte a la propiedad href del elemento introduciendo lo siguiente en el campo del selector de jQuery:

[href='https://www.hubspot.com/products/marketing/get-started']

 

Más información sobre selectores compatibles.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.