Implementando el JavaScript de forma Avanzada

En la mayoría de los casos la instalación de la tag de navegación es simple. Necesitas pegar nuestro código en el pie de la página (antes del cierre del </body>), insertar las <meta> tags referentes a cada tipo de página e identificar el visitante durante la navegación a través de un ID de Cliente o ID de Sesión. Con esto, pasamos a recibir los eventos de navegación de su página.

Existen casos, sin embargo, donde esta implementación no es viable, como en aplicaciones de página única o cuando se utiliza el Google Tag Manager. En estos escenarios debes programar la aplicación para disparar los eventos en un período de tiempo controlado por usted.

Porqué esto es necesario?

La implementación básica de nuestro código dispara el evento de navegación así que la página termina de cargar, similar al método onload() del JavaScript o al método .ready() del jQuery.

Cuando la navegación o el flujo del site son gestionados a través de requisiciones asíncronas, como el Ajax por ejemplo, el navegador del usuario no hace redireccionamientos de página. Luego, el disparo automático no es ejecutado y por ese motivo, no capturamos las informaciones de navegación del visitante en su página.

Quien utiliza el Google Tag Manager también tiene una situación similar: los scripts son insertados por el GTM de forma asíncrona y mediante disparadores, que pueden o no suceder en el momento del método onload().

Para permitir la captura de la navegación en estos dos escenarios (Single Page o GTM) debes utilizar una implementación diferente, donde los eventos de navegación son disparados por su aplicación, dentro de un plazo programado previamente y descrito en el JavaScript que implementará.

Cómo disparar las tags mediante programación

Al implementar su página existen varios elementos que son cargados en tiempos distintos. El objetivo del script abajo es "aguardar" la ejecución de los scripts existentes en su página y solamente después de eso, ser cargado.

Para implementar nuestras tags en escenarios de flujos asíncronos debes:

1. Desactivar el disparo automático

Para que gestiones el envío de eventos es necesario, primero, desactivar el disparo automático.

Para hacerlo debes insertar el parámetro post_on_load: false a la hora de cargar nuestro script, de la siguiente manera:

var __kdt = __kdt || [];

__kdt.push({"public_key": "TEE973BEC88"});

__kdt.push({"post_on_load": false}); // Envio automático desativado

(function() {

var kdt = document.createElement('script');

kdt.id = 'kdtjs'; kdt.type = 'text/javascript';

kdt.async = true;

kdt.src = 'https://i.k-analytix.com/k.js';

var s = document.getElementsByTagName('body')[0];

s.parentNode.insertBefore(kdt, s);

})();

</script>

2. Disparar el evento

Así que la página esté cargada debes llamar el método Konduto.sendEvent(), pasando como parámetros el tipo de evento y la categoría de la página:

var page_category = 'home';

(function() {

var period = 300;

var limit = 20 * 1e3;

var nTry = 0;

var intervalID = setInterval(function() {

var clear = limit/period <= ++nTry;

if ((typeof(Konduto) !== "undefined") &&

(typeof(Konduto.sendEvent) !== "undefined")) {

Konduto.sendEvent('page', page_category); // Disparo programático de evento

clear = true;

}

if (clear) {

clearInterval(intervalID);

}

period);

})(page_category);

Esta implementación no cambiará el rendimiento de su site y será imperceptible al visitante de su página.

Con estos pasos es posible controlar, a cualquier momento, el disparo de nuevos eventos de navegación y garantizar que los datos colectados por nuestro script lleguen en conjunto a los datos del pedido enviado a nuestra API.

Es importante también enviar eventos con contexto de página para que podamos tener una visualización más amplia de los eventos de navegación. Para tal, utilice los códigos ejemplificados abajo:

Konduto.sendEvent('page','checkout');

</script>

Konduto.sendEvent('page','product');

</script>

Konduto.sendEvent('page','password-reset');

</script><br>