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

Creación de eventos de comportamiento personalizados sin código (BETA)

Última actualización: enero 20, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique lo contrario:

Marketing Hub Enterprise

Los eventos de comportamiento personalizados le permiten realizar un seguimiento de la información exclusiva de su empresa. Los eventos de elemento pulsado y URL visitada se pueden crear sin código con la extensión HubSpot Chrome.

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 ha hecho clic sólo pueden crearse y rastrearse en páginas que tengan el código de seguimiento 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.

 

Los eventos URL visitada y Elemento clicado se pueden crear instalando y utilizando la extensión de Chrome de HubSpot para eventos clicados simples, como hipervínculos e imágenes.

Una vez que haya creado sus eventos, aprenda a analizar eventos en las herramientas de análisis e informes. También puede crear y seguir manualmente 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.

Crear un evento de URL visitada con la extensión de Chrome para eventos

  • Navegue a una página web con su Código de seguimiento de HubSpot instalado.
  • En la barra de herramientas de su navegador Chrome, haga clic en elicono de la rueda dentada .
  • En el cuadro de diálogo, seleccione URL visitada y, a continuación, haga clic en Siguiente.

  • Añada el nombre de su evento y, opcionalmente, una descripción. Haz clic en Siguiente.
  • Haga clic en Añadir para añadir una página. Puede añadir varias páginas a un mismo evento. 
  • En el campo URL de la página, introduzca la URL de la que desea realizar el seguimiento de las visitas.
  • En el campo Nombre, introduzca un nombre para la página. Este nombre estará disponible dentro de los datos de la propiedad del evento bajo la propiedad llamada Nombre de seguimiento.
  • Haga clic en Crear evento.

HubSpot comenzará a hacer seguimiento al evento. Aprenda a analizar el evento en HubSpot.

Crear un evento de elemento pulsado con el evento Extensión de Chrome

  • Navegue a una página web con su Código de seguimiento de HubSpot instalado.
  • En la barra de herramientas del navegador Chrome, haga clic en elicono de la rueda dentada .
  • En el cuadro de diálogo, seleccione Elemento pulsado

  • Haz clic en Siguiente
  • Añada el nombre de su evento y, opcionalmente, una descripción. Haz clic en Siguiente.
  • Para seleccionar un elemento de la página que desee seguir, haga clic en Añadir.  Seleccione un elemento de la página para realizar el seguimiento. Puede añadir varios elementos clicados a un mismo evento. 
  • Haz clic en un elemento de la página para crear un evento de elemento pulsado. En el ejemplo siguiente, el evento de elemento clic rastreará los clics en el enlace de aspectos clave.

  • En el cuadro de diálogo, se generará automáticamente el selector CSS del elemento. Introduzca un Nombre para el elemento que está rastreando. Este nombre estará disponible dentro de los datos de la propiedad del evento bajo la propiedad llamada Tracking Name. Si lo desea, añada una descripción y haga clic en Siguiente.
  • Para seguir añadiendo elementos adicionales a su evento, haga clic en Añadir y seleccione otro elemento.
  • Para finalizar y guardar su evento, haga 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, deberá 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 clicado en tu panel de eventos.

HubSpot comenzará entonces a rastrear el/los elemento(s). Aprenda a analizar el evento en HubSpot

Comprender y recuperar selectores de elementos

Puede identificar un elemento por su ID HTML, clase HTML o utilizando un selector jQuery.

  • IDHTML: introduzca el ID del elemento que desea rastrear. Por ejemplo, si su elemento clicado es <button id="log-in"> se introduciría log-in.
  • ClaseHTML: introduzca la clase clase del elemento que desea rastrear. Por ejemplo, si tu elemento seleccionado está configurado como <button class="bigCTA">, ingresa bigCTA.
  • selector jQuery: introduzca el selector jQuery del elemento que desea rastrear.

ID

Para encontrar y utilizar el ID de un elemento:

  • Haga clic con el botón derecho del ratón en la página con el elemento que desea inspeccionar y seleccione Ver fuente de la 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”).
  • Copie el valor ID y péguelo (por ejemplo, en este caso, unique-element-name) en el campo HTML ID sin las comillas. Por ejemplo, para un elemento que incluya id=" get-started-marketing-hub ", deberá introducir get-started-marketing-hub en el campo.

Clase

Un evento de elemento clicado puede identificar un elemento por su atributo de clase. 

 

Nota:

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

 

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

  • Haga clic con el botón derecho del ratón en la página con el elemento que desea inspeccionar y seleccione Ver fuente de la 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”).
  • Copie el valor de la clase y péguelo en el campo Clase HTML sin las comillas. Por ejemplo, para un elemento que incluye en el campo.  
    • Cuando un elemento tiene varias clases, puede utilizar cualquiera de ellas 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 Clase HTML. Sin embargo, asegúrese de que ningún otro elemento comparte esa clase.
    • Al unir varias clases, utilice el siguiente formato: clase1.clase2.clase3.

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, quieres crear un evento de elemento clicado usando un selector jQuery para el para el siguiente elemento:

<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 utilizar el ID o la clase del elemento, puede utilizar un selector jQuery para apuntar a la propiedad href del elemento introduciendo lo siguiente en el campo del selector jQuery :

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

 

Más información sobre los selectores selectores compatibles.

¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.