Crear y configurar eventos

Los eventos u objetivos en MicroMetrics son interacciones sobre las que deseas recopilar datos, además de las vistas de página. Acciones como clics en enlaces, envíos de formularios e incluso comercio electrónico se pueden configurar como eventos en MicroMetrics.

Configuración básica de eventos

Los eventos se pueden seguir con la función de Javascript pa.track() y admiten hasta tres claves de datos:

  • Name (Obligatorio). Es el nombre del evento que se mostrará en el informe de MicroMetrics.
  • Value (Opcional). Es el valor cuantitativo del evento. Para aplicar decimales debes utilizar como separador el punto (.).
  • Unit (Opcional). Es el tipo de moneda, en caso de tener un valor asignado. Aplica el estándar internacional ISO 4217.

A continuación te mostramos algunos ejemplos de scripts de eventos:

pa.track({name: 'Suscripción'})
pa.track({name: 'Pago', value: 5.25, unit: 'EUR'})

Debes tener en cuenta que cualquier recurso externo que ralentice o dañe la página (javascript, archivos CSS, etc.) puede afectar al funcionamiento de tus eventos.

Un solo error de javascript puede provocar que todos los javascript funcionen mal en una página. Revisa periódicamente la consola del navegador para detectar si existen errores de javascript.

Ejemplos de eventos en MicroMetrics

Eventos de carga de página

Si deseas analizar con más detalle las páginas más importantes de tu sitio web, puedes activar un evento cada vez que se carga una página así:

<script>
window.addEventListener('load', (event) => {
  pa.track({name: 'Equipo'});
});
</script>

Eventos de clic en enlaces

Hay dos formas de activar un evento cuando se hace clic en un enlace o cualquier otro elemento.

El primero es agregar un evento de tipo onclick, así:

<a href="/contacto" onclick="pa.track({name: 'Contacto'});">Contacto</a>

El segundo es apuntar a uno o todos los elementos con un ID o CLASS específicos de la página. Si usas este método, asegúrate siempre de que el script debe aparecer después del último ID o CLASS, o no funcionará.

Siguiendo el ejemplo anterior, si deseas activar un evento cada vez que un visitante hace clic en el enlace, debes configurarlo así:

<a href="/contacto" id="contacto">contacto</a>

A continuación, agrega el siguiente script justo antes del elemento </body>.

<script>
window.addEventListener('load', (event) => {
  document.getElementById('contacto').addEventListener('click', () => {
    pa.track({name: 'Contacto'});
  });
});
</script>

Eventos de envío de formularios

Al igual que vimos anteriormente con los enlaces, existen dos métodos para activar un evento al enviar un formulario.

Si puedes editar el HTML de tu formulario, puedes activar un evento de tipo onsubmit, así:

<form method="post" onsubmit="pa.track({name: 'Contacto'});">

Si no puedes editar el HTML de tu formulario, pero éste contiene un ID o CLASS como el siguiente:

<form method="post" id="Contacto">

A continuación, puedes agregar el siguiente script justo antes del elemento </body>:

<script>
window.addEventListener('load', (event) => {
  document.getElementById('contacto').addEventListener('submit', () => {
    pa.track({name: 'Contacto'});
  });
});
</script>

Eventos de comercio electrónico

Si quieres registrar las transacciones de tu comercio electrónico, además del importe de los pedidos, puedes incluir el siguiente script cuando se carga la página de confirmación del pedido:

<script>
window.addEventListener('load', (event) => {
  pa.track({name: 'Pago', value: 10.99, unit: 'EUR'});
});
</script>

Eventos de error 404

Si quieres registrar las páginas que provocan un error 404 en tu sitio web, puedes incluir el siguiente script cuando se carga la página de error 404 de tu plantilla:

<script>
window.addEventListener('load', (event) => {
  pa.track({name: '404 ' + document.location.pathname});
});
</script>

Eventos de clics salientes

Si quieres registrar los clics con enlaces salientes de tu sitio web para saber hacia qué páginas se marchan tus visitantes, agrega el siguiente script justo antes del elemento </body>:

<script>
document.addEventListener('click', function (event){
  if(event.target && event.target.href && event.target.host && event.target.host !== location.host){
    pa.track({name: 'Saliente ' + event.target.href});
  }
});
</script>

Eventos de búsquedas

Si quieres registrar búsquedas internas en tu sitio web para saber qué términos utilizan en las búsquedas tus visitantes, agrega el siguiente script justo antes del elemento </body>. No olvides modificar el parámetro de consulta de este fragmento por el que utilices en tu web, por ejemplo en WordPress es «s»:

<script>
window.addEventListener('load', (event) => {
  const urlParam = new URLSearchParams(window.location.search);
  pa.track({name: 'Busca: ' + urlParam.get('s')});
});
</script>

Seguimiento de eventos en WordPress

Si deseas medir eventos y tu web funciona sobre WordPress hospedado, puedes ahorrarte mucho tiempo con nuestro plugin ya que facilita crear eventos desde el panel de administración sin necesidad de tocar ningún código.

Nota sobre uso de datos personales

Asegúrate de no incluir ninguna información de identificación personal en ningún evento que envíes a MicroMetrics. Esto puede incluir, entre otros, nombre, correo electrónico, número de teléfono, ID de usuario o dirección IP.

Al incluir cualquiera de los datos anteriores, estarías violando nuestros términos y condiciones, además de violar el RGPD si no has solicitado expresamente el consentimiento del usuario para recopilarlos, y corres el riesgo de que eliminemos tu cuenta.