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:
| Field | Type | Description |
|---|---|---|
sku | string | The SKU of the product being viewed. |
variant_sku | string | The SKU of the selected variant (if any); otherwise the default variant SKU. |
name | string | Product name. |
mode | string | Where the view originated: |
– "widget" | ||
– "search" | ||
– "category" | ||
– "collection" | ||
– "direct" (e.g. bookmarked or deep link) | ||
search_term | string | Current search term (if mode is "search"). |
search_location | string | "quick" or "page" (if mode is "search"). |
search_source | string | For suggestion clicks, pass the autocomplete category key from the response (e.g., "popular_search", "recent_search"). |
used_suggestion | string | The exact suggestion text the user clicked (e.g., “shirts”, “jeans”). |
category | string | name (if mode is "category"). |
collection | string | Collection ID (if mode is "collection"). |
widget_rule | string | Rule ID that generated this view context. |
widget_rule_type | string | Type of rule. |
widget_id | string | Widget instance ID (if mode is "widget"). |
widget_context_type | string | Entity type for context. |
widget_context_data | string | Additional context payload. |
mode_details | object | Nested object repeating the above fields specific to the chosen mode. |
product_option | array of objects | Selected product options, each { name: <string>, value: <string> }. |
product_categories | array of objects | Category hierarchy for this product, each { id, name, provider_id }. |
facets | array | Active filters when navigating to the product (each { field, value }). |
request_id | string | Unique identifier |
page_depth | string | Current page number (1, 2, 3, etc.). |
// 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,
});