Before our widgets send off analytics events to our API, they also fire corresponding JS events that can be listened to using a JS event listener to perform other custom functions (such as sending out custom analytics events to the analytics provider of your choice, etc..).
To listen to these events, you need to use the container ID ("ps-widget" element for widgets created with our widget editor or an element with given id for our legacy) and then listen for the required events. The event object will have "detail" field containing more information.
The following is a list of analytics events fired by our widgets and their corresponding JS event names:
1. widget_clicked - widget_click (detail: target - DOM element for the image that was clicked),
2. widget_loaded - no corresponding JS event,
3. widget_hidden - no corresponding JS event,
4. thumbs_displayed - photos_shown (detail: photoIds - array of newly displayed photos ids),
5. photo_viewed - no corresponding JS event,
6. photo_not_found - no corresponding JS event,
7. thumb_not_found - no corresponding JS event,
8. shop_this_look_clicked - info_product_click (detail: photoId - id of related photo, product - product object, productIndex - index of product among photo products)
Example code to listen to event:
document.querySelector('ps-widget').addEventListener('widget_click', function(e) {
console.log(e.detail);
});