Skip to main content

Tracking Color Swatch Switches

This event tracks when a shopper switches a displayed product to a sibling color — a different color of the same item that is its own product (a separate product ID). It lets attribution credit the color whose image actually earned the click, even when the shopper ends up buying the sibling color they switched to.

window.FastSimonSDK.event({
    eventName: window.FastSimonEventName.ProductSwatchSwitchPerformed,
    data: {
        productID: "5551555", // The product now displayed after the switch (Required)
        sourceProductID: "4411441", // The product that was originally displayed (Required)
        position: 7 // The position of the tile in the grid (counted from 1, Optional)
    }
});

When to Use​

Fire this event at the moment a color swatch changes the displayed product to a different product:

  • Grid / collection tile swatches: the tile image swaps in place to a sibling color
  • Product page swatches on SPA themes: the page switches to the sibling color without a full page load

Best Practices​

  1. Fire only on a genuine switch between two different product IDs — the SDK silently ignores the event when sourceProductID equals productID (a self-switch) or when either field is missing
  2. sourceProductID is the originally shown product for that tile or page — the color that earned the impression, not the last one previewed
  3. Do not fire for size selections or for color options that share a single product ID — this event is specifically for color siblings that are separate products
  4. No page-speed impact — the report is asynchronous and fire-and-forget, and it never changes anything the shopper sees