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

# Analytics

> Emit storefront analytics events from a page.

Events dispatch through consent-derived sinks, so firing one is always safe, and you never check consent first.

## `analytics/analytics-provider`

`@replohq/sdk/analytics/analytics-provider`

#### `useAnalytics`

Returns the AnalyticsSink from the nearest AnalyticsProvider. Throws if used outside of an AnalyticsProvider.

```ts theme={null}
import { useAnalytics } from "@replohq/sdk/analytics/analytics-provider";
```

```ts theme={null}
useAnalytics: () => AnalyticsSink | null
```

#### `useAnalyticsOptional`

Returns the AnalyticsSink if an AnalyticsProvider is present, or null otherwise. Does not throw -- safe to use in components that may render with or without analytics.

```ts theme={null}
import { useAnalyticsOptional } from "@replohq/sdk/analytics/analytics-provider";
```

```ts theme={null}
useAnalyticsOptional: () => AnalyticsSink | null
```

**Also exported**

| Export              | Kind      | Type                                                                                                                  |
| ------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
| `AnalyticsProvider` | component | `({ children, checkoutProvider, }: React.PropsWithChildren<{ checkoutProvider?: CheckoutProvider; }>) => JSX.Element` |

## `analytics/hooks/use-product-viewed-analytics`

`@replohq/sdk/analytics/hooks/use-product-viewed-analytics`

#### `useProductViewedAnalytics`

Fires a `productViewed` analytics event when the product or selected variant changes. Deduplicates by product+variant ID so the same combination is only tracked once per component lifecycle.

```ts theme={null}
import { useProductViewedAnalytics } from "@replohq/sdk/analytics/hooks/use-product-viewed-analytics";
```

```ts theme={null}
useProductViewedAnalytics: ({ product, selectedVariant, }: UseProductViewedAnalyticsProps) => void
```