Cómo crear eventos de elementos seleccionados

Última actualización: March 25, 2016

Los eventos de elementos seleccionados se registran cuando un visitante anónimo o un contacto de HubSpot hace clic en partes específicas de tu sitio web. Los eventos de elementos seleccionados se pueden crear de las siguientes dos maneras:

  • Instalar y usar nuestro bookmarklet
  • Crear manualmente el evento con un selector de ID, Clase o jQuery

Recomendamos usar el bookmarklet de eventos para los eventos seleccionados más simples, como los hipervínculos. Para contenido más complejo, como imágenes o llamadas a la acción (CTA, por su sigla en inglés), sugerimos crear el evento de forma manual. A continuación, repasaremos ambas formas de crear estos eventos.

Algunos usos comunes de los Eventos de elementos seleccionados son los siguientes:

  • Se hizo clic en una CTA de demostración gratuita.
  • Un visitante descargó un PDF.
  • Un visitante hizo clic en la imagen de un producto específico en tu página de listado de productos.
Eventos de elementos de hecho clic sólo se pueden crear y rastrear en las páginas con código de seguimiento de HubSpot en ellas (páginas de HubSpot y / o páginas externas).

Por favor, tenga en cuenta: Los Eventos sólo están disponible en la edición Enterprise de HubSpot.

Crear un evento seleccionado con el bookmarklet Eventos

Para usar nuestro bookmarklet Eventos, primero deberás instalar el bookmarklet en tu navegador. Para instalar el bookmarklet, navega hasta Informes > Eventos > Instalar bookmarklet. Para obtener instrucciones detalladas sobre la instalación y uso del bookmarklet para crear un Evento, haz clic aquí.

Captura de pantalla del artículo de ayuda de HubSpot

Cuando hayas finalizado, el Evento nuevo estará disponible para verse la próxima vez que vayas a Informes > Eventos.

Dependiendo de la complejidad del marcado HTML de su sitio web, el bookmarklet puede ser incapaz de detectar un selector único para ese elemento. En este caso, se debe crear manualmente el evento siguiendo las instrucciones a continuación.

Crear manualmente el evento con un selector de ID, Clase o jQuery

Sigue estas instrucciones para crear manualmente un Evento de elemento seleccionado.

Navegar hasta Eventos

Desde tu panel de HubSpot, navega hasta Informes > Eventos.

Captura de pantalla del artículo de ayuda de HubSpot

Crear un evento nuevo

En el lado derecho, selecciona el botón azul que dice Crear evento nuevo.

Captura de pantalla del artículo de ayuda de HubSpot

Asignar un nombre al evento y seleccionar el tipo de evento

Después de darle un nombre a tu evento, al hacer clic en el nombre o el ícono del lápiz, puedes elegir el tipo de evento que quieras haciendo clic en el menú desplegable Monitoreo por tipo de evento .

Selecciona Elemento seleccionado.

Captura de pantalla del artículo de ayuda de HubSpot

Elegir tu selector para monitorear el elemento correcto

Elige el conector ID, Clase o jQuery completo para determinar un elemento para monitorear.

Captura de pantalla del artículo de ayuda de HubSpot

ID

Usa un atributo de ID del elemento que quieras detectar cuando alguien le hace clic. Los ID aparecen en tu HTML como id="a-unique-name-for that-element". Visita la Fuente de página  o haz clic con el botón derecho en el navegador y selecciona Inspeccionar elemento para determinar el atributo o selector, si no sabes cuál es.

Captura de pantalla del artículo de ayuda de HubSpot

En el ejemplo descrito arriba, la CTA podría ser seleccionada agregando home-marquee-link-cta al campo ID.

Captura de pantalla del artículo de ayuda de HubSpot

Clase

Usa un atributo de clase del elemento que quieras detectar cuando alguien le hace clic. Las clases aparecen en tu HTML como clase="a-name-for that-element". Visita la Fuente de página  o haz clic con el botón derecho en el navegador y selecciona Inspeccionar elemento para determinar el atributo o selector, si no sabes cuál es.

Captura de pantalla del artículo de ayuda de HubSpot

En el ejemplo descrito arriba, la CTA podría ser seleccionada agregando badge al campo de clase.

Captura de pantalla del artículo de ayuda de HubSpot

Selector jQuery completo

También puedes usar selectores completos para elementos determinados. Usar un selector completo jQuery o CSS es útil si el elemento que hayas definido no tiene una clase o ID, o si necesitas ser más específico. Puedes leer más acerca de los conectores admitidos aquí.

Captura de pantalla del artículo de ayuda de HubSpot

En el ejemplo descrito anteriormente, no hay ninguna clase o ID presente, por lo que el enlace podría ser seleccionado con el uso de un selector de atributo que selecciona etiquetas de anclaje que se enlazan con una URL en particular.

Captura de pantalla del artículo de ayuda de HubSpot

Especificar una página (opcional)

Si solo quieres que el elemento sea monitoreado como un evento en una página específica, introduce la URL aquí.

Captura de pantalla del artículo de ayuda de HubSpot

Agregar un valor de conversión (opcional)

Si el elemento que monitoreas tiene un valor monetario asociado, puedes agregarlo aquí marcando la casilla Usar valor de conversión.

El valor de este evento de elemento seleccionado se canalizará a la propiedad predeterminada Ingresos en el grupo de propiedades de Estadísticas de los Contactos. Aprenderás más sobre esta función en este artículo.

Captura de pantalla del artículo de ayuda de HubSpot

Etiquetar tus eventos

Etiqueta tus eventos con temas personalizados para encontrarlos fácilmente y realizar un seguimiento de ellos.

Captura de pantalla del artículo de ayuda de HubSpot

Crear evento

Cuando hayas establecido todos los criterios de tu evento, haz clic en el botón azul en la parte inferior para Crear evento.

Captura de pantalla del artículo de ayuda de HubSpot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: