Skip to main content

Track Color Swatch Changes

Why this matters

When each color is sold as a separate product, shoppers often discover one color and then switch to another using the color swatches, either on the product grid (if you display swatches there) or on the product page. When they buy the color they switched to, Fast Simon needs to know that the two colors are the same item and that the shopper moved from one to the other. The swatch-switch event provides that link.

Without it, the color that first caught the shopper's attention gets no credit for the sale, which skews your results and can cause that color to be shown less over time. Reporting this event is what keeps attribution, personalization reporting, and A/B testing accurate whenever each color is a separate product.

If your colors are variants of a single product instead, this event is not needed.

The Event

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

window.FastSimonSDK.event({
eventName: window.FastSimonEventName.ProductSwatchSwitchPerformed,
data: {
productID: "5551555",
sourceProductID: "4411441",
position: 7
}
});

Fields

FieldRequiredMeaning
productIDYesThe product displayed after the color change
sourceProductIDYesThe product originally displayed before the change — the color that earned the impression
positionOptionalThe tile's position in the grid, counted from 1 (omit on product pages)

When to Fire — and When Not To

Fire only when the product ID changes:

  • Grid / collection tile swatches: the tile image swaps in place to a different color that is its own product
  • Product page swatches: the page switches to a different color product, with or without a full page load

Do not fire for:

  • Size selections
  • Color options that are variants of the same product (the product ID does not change)
  • Any case where sourceProductID and productID are identical — the SDK silently ignores such events

Best Practices

  1. sourceProductID is the originally shown product for that tile or page — the color that earned the impression, not the last one previewed. If a shopper switches A → B → C, report A → B and then A → C from the grid tile (the tile's original product stays the source).
  2. No page-speed impact — the report is asynchronous and fire-and-forget, and it never changes anything the shopper sees.