---
title: Analytics.CustomView
description: >-
  Publishes a custom page view event to the `Analytics.Provider` component. The
  `type` prop must be preceded by `custom_`.
api_version: 2024-10
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-10/components/analytics/analytics-customview
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-10/components/analytics/analytics-customview.md
---

# Analytics.​Custom​View

Publishes a custom page view event to the `Analytics.Provider` component. The `type` prop must be preceded by `custom_`.

## analytics​Custom​View([props](#props-propertydetail-props)​)

### Parameters

* props

  CustomViewProps

  required

### CustomViewProps

* customData

  ```ts
  OtherData
  ```

* data

  ```ts
  OtherData
  ```

* type

  ```ts
  `custom_${string}`
  ```

```ts
{
  type: typeof AnalyticsEvent.CUSTOM_EVENT;
  data?: OtherData;
  customData?: OtherData;
}
```

### OtherData



```ts
OtherData
```

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  import {Analytics} from '@shopify/hydrogen';

  export default function Promotion() {
    return (
      <div className="promotion">
        <h1>Promotion page</h1>
        <Analytics.CustomView
          type="custom_promotion_viewed"
          data={{
            promotion: {
              id: '123',
            },
          }}
        />
      </div>
    );
  }
  ```

  ##### TypeScript

  ```ts
  import {Analytics} from '@shopify/hydrogen';

  export default function Promotion() {
    return (
      <div className="promotion">
        <h1>Promotion page</h1>
        <Analytics.CustomView
          type="custom_promotion_viewed"
          data={{
            promotion: {
              id: '123',
            },
          }}
        />
      </div>
    );
  }
  ```