---
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-04
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/components/analytics/analytics-customview
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/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

* type

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

* data

  ```ts
  OtherData
  ```

* customData

  ```ts
  OtherData
  ```

### 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>
    );
  }
  ```