Última actualización: enero 19, 2023
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:
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:
- Instalar y usar la extensión de Chrome del evento para eventos simples seleccionados, como hipervínculos e imágenes.
- Crear manualmente el evento usando un selector de ID, Clase o jQuery para contenido más complejo, como CTA.
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 icono de Configuración en la barra de navegación superior.
- 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 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 de tu navegador Chrome, haz clic en el símbolo de rueda dentada
- En el cuadro de diálogo, selecciona Elemento seleccionado.
- 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
- 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.
- 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 HTML: introduzca el ID del elemento que desea rastrear. Por ejemplo, si tu elemento seleccionado está configurado <button id="log-in">, ingresa inicio de sesión.
- Clase HTML: introduzca la 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.
- 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
Puede identificar un elemento por su ID HTML, clase HTML o utilizando un selector jQuery.
ID
Para encontrar y utilizar el ID de un 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”).
- Copie el valor del 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 completar los eventos. Por lo tanto, sólo debe utilizar la clase 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 el ID en su lugar.
- Si no puedes actualizar el código fuente de un elemento para añadir una clase o un ID único, se recomienda utilizar 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 utilizarla 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”).
- Copie el valor de la clase y péguelo en el campo HTML Class sin las comillas. Por ejemplo, para un elemento que incluye en el campo
- Cuando un elemento tiene varias clases, puede utilizar cualquiera de sus clases como objetivo. Por ejemplo, si un elemento incluye
class="cta--primary cta--medium homepage-sales", puede introducircta--primary,cta--mediumohomepage-salesen el campo Clase HTML. Sin embargo, asegúrese de que ningún otro elemento comparta esa clase. - Al unir varias clases, utilice el siguiente formato:
clase1.clase2.clase3.
- Cuando un elemento tiene varias clases, puede utilizar cualquiera de sus clases como objetivo. Por ejemplo, si un elemento incluye
Selector de jQuery
También puedes usar selectores completos de jQuery para dirigirte a elementos. Esto es útil si el elemento al que te diriges no tiene un ID o una clase, o si necesitas ser más específico
Por ejemplo, quieres crear un evento de elemento pulsado utilizando 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">Empezar a trabajar</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 sobrelos selectores compatibles con .
