Documentación

Toda la información que buscas, en un sitio

¿Cómo hacer el seguimiento de eventos personalizados en JavaScript?

Nelio A/B Testing incluye una serie de acciones de conversión que probablemente satisfagan las necesidades de la mayoría de usuarios. Por ejemplo, permite de forma sencilla hacer un seguimiento de las páginas que sus visitantes ven, los elementos o enlaces a los que hacen clic o los productos de WooCommerce que compran.

No obstante, hay situaciones que pueden ser relevantes para ti y que ninguna de esas acciones cubre. Si ese es tu caso, puedes usar la acción de conversión de Evento personalizado para, usando JavaScript y un poco de código, hacer el seguimiento de lo que quieras.

Ejemplo: tiempo en página (básico)

Supongamos, por ejemplo, que quieres lanzar una conversión cuando un visitante ha estado, como mínimo, durante 30 segundos en la página bajo test. Para ello, lo único que debes hacer es añadir una acción de conversión de Evento personalizado en tu test y ponerle de nombre algo como time-30s.

Luego, lo único que deberás hacer es programar el pequeño fragmento de código JavaScript que lanzará la conversión cuando hayan pasado 30 segundos desde que el usuario accedió a la web. Algo así:

setTimeout( function() {
  nab.trigger( 'time-30s' );
}, 30000 );

Como ves, nada especial: un simple temporizador que, pasados 30.000ms, invoca la función anónima con la que lanzamos el evento time-30s usando la función nab.trigger de Nelio A/B Testing.

Eso sí, ten en cuenta que este código habrá que ponerlo en algún sitio de tu página bajo test y su variante. Una opción, por ejemplo, podría ser añadir un bloque HTML (si usas Gutenberg) con una etiqueta script como esta:

<script type="text/javascript">
  setTimeout( function() {
    nab.trigger( 'time-30s' );
  }, 30000 );
</script>

Ejemplo: tiempo en página (avanzado)

Probablemente te hayas percatado de que las conversiones en Nelio A/B Testing son eventos binarios. Es decir, la conversión ha sucedido o no ha sucedido; no hay termino medio. Por ello, es fácil saber si un usuario ha estado, como mínimo, 30 segundos en nuestra página (es una pregunta a la que respondemos con «sí» o «no»), pero no podemos saber qué variante es mejor a la hora de mantener a tus visitantes en la web, porque se trata de saber cuánto tiempo están de media en cada variante.

Para solucionar este problema podemos implementar una pequeña «trampa»: creamos una prueba A/B con múltiples objetivos, cada uno de ellos con una única acción de conversión. Luego, en cada objetivo lo que hacemos es lo mismo que hemos hecho en el ejemplo anterior, pero controlando diferentes intervalos de tiempo. Por ejemplo, supón que tenemos los siguientes cuatro objetivos:

  1. Objetivo 1: acción de conversión personalizada time-10s
  2. Objetivo 2: acción de conversión personalizada time-30s
  3. Objetivo 3: acción de conversión personalizada time-60s
  4. Objetivo 4 acción de conversión personalizada time-90s

Con el siguiente código de seguimiento:

setTimeout( function() {
  nab.trigger( 'time-10s' );
}, 10000 );
setTimeout( function() {
  nab.trigger( 'time-30s' );
}, 30000 );
setTimeout( function() {
  nab.trigger( 'time-60s' );
}, 60000 );
setTimeout( function() {
  nab.trigger( 'time-90s' );
}, 90000 );

O si quieres una versión más cortita que haga lo mismo:

[ 10, 30, 60, 90 ].forEach(
  ( threshold ) => setTimeout(
    () => nab.trigger( `time-${ threshold }s` ),
    threshold * 1000
  )
);

Con esta configuración, lanzamos conversiones a los 10, 30, 60 y 90 segundos de actividad de un visitante en tu página. Como cada corte está definido en su propio objetivo, podemos ver los ratios de conversión en cada uno de esos intervalos. Viendo todos los objetivos y analizándolos en conjunto, podemos entender qué variante es mejor para mantener visitas en la página.

Ejemplo: desplazamiento vertical (scroll)

Otro escenario muy habitual que puede interesarte es conocer cuánto desplazamiento vertical (o scroll) han hehco tus visitantes en la página bajo test. Esta información está disponible para suscriptores en el apartado Scrollmap de los Heatmaps de tus variantes, pero no es una acción de conversión propiamente dicha.

Si quisieras usar esta métrica como acción de conversión, deberías implementar una solución similar a la que acabamos de ver para el tiempo en página. Es decir, creas diferentes objetivos:

  1. Objetivo 1: acción de conversión personalizada scroll-30
  2. Objetivo 2: acción de conversión personalizada scroll-50
  3. Objetivo 3: acción de conversión personalizada scroll-75
  4. Objetivo 4: acción de conversión personalizada scroll-100

y luego lanzas la conversión cuando toca:

( function() {
  [ 30, 50, 75, 100 ].forEach(
    ( threshold ) => document.addEventListener( 'scroll', () => {
      const bottom = window.pageYOffset + window.innerHeight;
      const scroll = 100 * bottom / document.body.clientHeight;
      if ( scroll >= threshold ) {
        nab.trigger( `scroll-${ threshold }` );
      }
    } )
  );
} )();

Fíjate que el código es similar al anterior, pero hemos cambiado la forma en que detectamos cuándo lanzar el evento. Ahora usamos addEventListener para saber cuándo se produce scroll en la página y, cada vez que ello sucede, calculamos el porcentaje de scroll que llevamos. Cuando el nivel de scroll supera el corte que hemos definido, lanzamos la conversión.