Analytics Scripts

Garderobo A.I. widget scripts automatically handle the tracking and reporting of most standard events, ensuring seamless data collection for analytics and recommendations. However, to fully leverage the service capabilities and gain deeper insights, it is necessary to implement additional custom events.

Required Events

  1. add_to_cart This event captures when a user adds a product to their cart. By tracking this interaction, Garderobo A.I. can refine recommendations and measure the effectiveness of widgets in driving purchase intent.

  2. purchase This event logs completed transactions, allowing Gardеrobo A.I. to analyze sales performance and the direct impact of widgets on revenue.

Optional Events

  1. redeemed This event allows you to analyze the redemption of products and build data based not only on orders placed, but also on orders redeemed.

  2. view_widget This event is triggered automatically when the user scrolls to the location of the widgets on the webpage. It will be sent as many times as there are separate widgets in the visible area of the page. The event is accompanied by the appropriate widget_source.

  3. action_open_look_popup

    When clicked on, some widgets (non-horizontal) open into a popup window. The window contains the picture of the look and a list of individual items, of which the look consists. The items are clickable and linked to the PDP of the item. Each item in the popup also contains clickable options to choose size, add to cart directly from popup, or add to (or remove from) favorites. The event is accompanied by the appropriate widget_source.

  4. view_look_in_popup

    This event is automatically triggered when a popup opens and is accompanied by look_id as well as the appropriate widget_source.

  5. view_product_in_widget

    For non-horizontal widgets, this event is automatically triggered when a popup window with a look opens. For horizontal widgets, this event is triggered when the user scrolls to the location of the widget on the page. The event is triggered as many times as there are individual items visible within the widget, and is accompanied by the appropriate widget_source and target_id of the items.

  6. add_to_cart_from_popup

    If an item is added to cart directly from the popup, this event is triggered and is accompanied by the item's target_id as well as the appropriate widget_source.

  7. widget_click

    When the user clicks on an individual item within a widget, this event will be triggered with the appropriate widget_source and target_id of the item, and the user will be taken to the item's PDP.

  8. product_click

    When the user clicks on an individual item within a widget, this event will be triggered with the appropriate target_id of the item, and the user will be taken to the item's PDP.

  9. action_add_to_favorites

    This event is triggered when the user adds an items to favorites directly from the widget. It is accompanied by the item's target_id as well as the appropriate widget_source.

  10. action_remove_from_favorites

    This event is triggered when the user removes an items to favorites. It is accompanied by the item's target_id as well as the appropriate widget_source.

Integration of "add_to_cart" event

This script should be executed at the moment of adding an item to the cart. Usually this event is passed to GTM using dataLayer and the script is executed there. But there is no mandatory requirement to pass it to GTM.

function garderoboSendData() {
    let data = {
        "event_name": "add_to_cart",
        "fetch_field": "yml_id",
        "fetch_id": <product offer ID>,
        "user_id": <user Id>,
        "version": 7,
        "session_key": localStorage.getItem("_garderoboSessionKey"),
        "device_type": <device type>,
        "stat_url": "https://stat.garderobo.ai/",
        "api_key": "<api_key>"
    };
    
    let formData = new URLSearchParams();
    for (var key in data) {
        formData.append(key, data[key]);
    }
    
    let success = navigator.sendBeacon(data['stat_url'], formData);
  }

fetch_id - Product offer identifier (Size Id)

user_id - User ID (if the user is authorized) or null if not authorized

session_key - The user session that Garderobo widgets generate during initialization. It is located in the browser's LocalStorage.

device_type - Device Type. You need to pass one of the list values as a string: "Mobile", "Tablet", "Desktop"

api_key - Api key that Garderobo give out at the moment of starting the cooperation;

You can get device_type using JS function:

function garderoboDeviceType() {
   let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  if (screenWidth < 768) {      
    return 'Mobile';
  } else if (screenWidth >= 768 && screenWidth < 1024) {
    return 'Tablet';
  } else {
    return 'Desktop';
  }
}

Integration of "purchase" event

This event should be sent at the moment of order placement.

function garderoboSendData() {
    let products = <list of products>;
    for (let i=0; i < products.length; i++) {
        let data = {
            "event_name": "purchase",
            "fetch_field": "yml_id",
            "fetch_id": <products[i].offerId>,
            "user_id": <user Id>,
            "transaction_id": <order Id>,
            "version": 7,
            "session_key": localStorage.getItem("_garderoboSessionKey"),
            "device_type": <device type>,
            "stat_url": "https://stat.garderobo.ai/",
            "api_key": "<api_key>"
        };
        
        for (var j=0; j < products[i].quantity; j++) {
            var formData = new URLSearchParams();
            for (var key in data) {
                formData.append(key, data[key]);
            }
    
            var success = navigator.sendBeacon(data['stat_url'], formData);
        }
    }
  }

products - List of products added to the order;

fetch_id - Product offer identifier (Size Id)

user_id - User ID (if the user is authorized) or null if not authorized

transaction_id - Internal identifier of the placed order

session_key - The user session that Garderobo widgets generate during initialization. It is located in the browser's LocalStorage.

device_type - Device Type. You need to pass one of the list values as a string: "Mobile", "Tablet", "Desktop"

api_key - Api key that Garderobo give out at the moment of starting the cooperation;

Integration of "redeemed" event

Sent at the moment when the order or part of the products in the order is redeemed

function garderoboSendData() {
    let products = <list of redeemed products>;
    for (let i=0; i < products.length; i++) {
        let data = {
            "event_name": "redeemed",
            "fetch_field": "yml_id",
            "fetch_id": <product offer ID>,
            "transaction_id": <order Id>,
            "version": 7,
            "stat_url": "https://stat.garderobo.ai/",
            "api_key": "<api_key>"
        };
        
        for (var j=0; j < products[i].quantity; j++) {
            var formData = new URLSearchParams();
            for (var key in data) {
                formData.append(key, data[key]);
            }
    
            var success = navigator.sendBeacon(data['stat_url'], formData);
        }
    }
  }

products - List of redeemed products;

fetch_id - Product offer identifier (Size Id)

transaction_id - Internal identifier of the placed order

api_key - Api key that Garderobo give out at the moment of starting the cooperation;

Last updated