Antes de enviar eventos de analíticas a nuestra API, nuestros widgets también lanzan sus correspondientes eventos de JS que pueden ser escuchados usando un event listener de JS para realizar funcionalidades personalizadas (por ejemplo: enviar eventos de analíticas al proveedor de analíticas que quieras, etc.).
Para escuchar estos eventos, es necesario usar el ID del contenedor ("ps-widget" para widgets creados con el Widget Editor, o un elemento con ID específico para widgets legacy) y luego poner a la escucha el evento en cuestión con addEventListener. El objeto event contendrá el campo "detail", con más información.
La siguiente lista contiene todos los eventos de analíticas que nuestros widgets disparan, con su correspondiente nombre de evento JS:
1. widget_clicked - widget_click (detail: target - elemento DOM para la imagen en la que se ha hecho click),
2. widget_loaded - sin evento JS que le corresponda,
3. widget_hidden - sin evento JS que le corresponda,
4. thumbs_displayed - photos_shown (detail: photoIds - array de los id de las fotos que se acaban de mostrar),
5. photo_viewed - sin evento JS que le corresponda,
6. photo_not_found - sin evento JS que le corresponda,
7. thumb_not_found - sin evento JS que le corresponda,
8. shop_this_look_clicked - info_product_click (detail: photoId - id de la foto relacionada, product - objeto del producto, productIndex - indíce del producto entre las fotos de producto)
Ejemplo de código para poner un evento a la escucha:
document.querySelector('ps-widget').addEventListener('widget_click', function(e) {
console.log(e.detail);
});