> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Viewed

## Widget Viewed (`widget_viewed`)

**Purpose:**
Track when a recommendation widget is rendered, capturing both the number of items displayed and contextual rule and algorithm metadata.

**When to Fire:**
After your widget API loads its data and before rendering the widget on the page.

**Payload Schema:**

| Field                 | Type             | Description                                                                    |
| --------------------- | ---------------- | ------------------------------------------------------------------------------ |
| `no_of_results`       | number           | Total number of items in the widget (`widgetData.Data.total_count`).           |
| `products_detail`     | array of objects | List of product objects, each containing:                                      |
|  – `sku`              | string           | Product SKU.                                                                   |
|  – `product_category` | array of objects | Category hierarchy, each `{ id, name, provider_id }`.                          |
| `rule`                | string           | Overall rule ID (`rule_details.rule_id`).                                      |
| `rule_type`           | string           | Overall rule type (`rule_details.rule_type`).                                  |
| `widget_id`           | string           | Overall widget ID (`rule_details.widget_id`).                                  |
| `context_type`        | string           | Overall context type (`rule_details.context_type`).                            |
| `context_data`        | string           | Overall context data (`rule_details.context_data`).                            |
| `page_type`           | string           | Page type where widget appears (e.g. `"web_page"`, `"product"`, `"category"`). |
| `page_meta_id`        | string           | Page metadata ID (e.g. `page.content_model_data_id`).                          |
| `page_display_name`   | string           | Page display name (e.g. `page.title`).                                         |

**Example:**

```js theme={null}
// After fetching widget data:
const widgetData = {
  Data: {
    total_count: 2,
    items: [
      {
        sku: 'ABC123',
        name: 'Sneakers Pro',
        price: 79.99,
        brand: 'FitBrand',
        product_category: [
          { id: 'cat1', name: 'Shoes', provider_id: 'prov1' }
        ],
      },
      // …other items
    ],
    rule_details: {
      rule_id: "ABC",
      rule_name: "Global Rule for All Instances",
      rule_type: "global",
      algorithm: "popular_items",
      widget_id: "ABC123",
      context_type: "global",
      context_data: "",
    }
  }
};

const products       = widgetData.Data.items;
const themeCurrency  = 'USD';
const pageType       = 'product';
const pageMetaId     = 'P123';
const pageTitle      = 'Sneakers Pro';


ExpAnalyticsService.trackWidgetViewed({
  no_of_results: widgetData.Data.total_count,
  products_detail: products.map(item => ({
    sku: item.sku,
    product_category: item.product_category,
  })),
  rule: widgetData.rule_details.rule_id,
  rule_type: widgetData.rule_details.rule_type,
  widget_id: widgetData.rule_details.widget_id,
  context_type: widgetData.rule_details.context_type,
  context_data: widgetData.rule_details.context_data,
  category: widgetData.rule_details.category,
  page_type: pageType,
  page_meta_id: pageMetaId,
  page_display_name: pageDisplayName,
});
```