Skip to main content

​
Product Variant Viewed (product_variant_viewed)

Purpose: Track when a user switches to or views a specific variant of a product whether on the product page or within a quick-view. When to Fire: Immediately after the variant change action completes (e.g. user selects a size/color option). Payload Schema:
FieldTypeDescription
skustringThe SKU of the product being viewed.
variant_skustringThe SKU of the selected variant (if any); otherwise the default variant SKU.
namestringProduct name.
modestringWhere the view originated:
  – "widget"
  – "search"
  – "category"
  – "collection"
  – "direct" (e.g. bookmarked or deep link)
search_termstringCurrent search term (if mode is "search").
search_locationstring"quick" or "page" (if mode is "search").
search_sourcestringFor suggestion clicks, pass the autocomplete category key from the response (e.g., "popular_search", "recent_search").
used_suggestionstringThe exact suggestion text the user clicked (e.g., “shirts”, “jeans”).
categorystringname (if mode is "category").
collectionstringCollection ID (if mode is "collection").
widget_rulestringRule ID that generated this view context.
widget_rule_typestringType of rule.
widget_idstringWidget instance ID (if mode is "widget").
widget_context_typestringEntity type for context.
widget_context_datastringAdditional context payload.
mode_detailsobjectNested object repeating the above fields specific to the chosen mode.
product_optionarray of objectsSelected product options, each { name: <string>, value: <string> }.
product_categoriesarray of objectsCategory hierarchy for this product, each { id, name, provider_id }.
facetsarrayActive filters when navigating to the product (each { field, value }).
request_idstringUnique identifier
page_depthstringCurrent page number (1, 2, 3, etc.).
Example: 
// Data after user selects a new variant:
const sku                = 'PROD-001';
const variantSku         = 'PROD-001-BLUE';
const name               = 'Performance Jacket';
const mode               = 'search';
const facets             = [];
const requestId          = 'request id';
const currentPage        = 1;        // Current page number (1, 2, 3, etc.)

const modeDetails        = {
  search_term: 'jack',
  search_location: 'page',
  used_suggestion: 'jacket',
  search_source: 'search_suggestion',
  category: null,
  collection: null,
  widget_rule: 'rule42',
  widget_rule_type: 'personalization',
  widget_id: null,
  widget_context_type: 'search',
  widget_context_data: '',
  facets: facets,
  request_id: requestId,
  page_depth: currentPage
};
const productOptions     = [{ name: 'Size', value: 'M' }];
const productCategory    = [{ id: 'apparel', name: 'Apparel', provider_id: 'prov1' }];
const facets             = [];
const requestId          = 'request id';
const currentPage        = 1;        // Current page number (1, 2, 3, etc.)

ExpAnalyticsService.trackProductVariantViewed({
  sku,
  variant_sku: variantSku,
  name,
  mode,
  mode_details: modeDetails,
  product_option: productOptions,
  product_categories: productCategory,
});