---
title: Analytics.SearchView
description: Publishes a `search_viewed` event to the `Analytics.Provider` component.
api_version: 2024-04
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/components/analytics/analytics-searchview
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/components/analytics/analytics-searchview.md
---

# Analytics.​Search​View

Publishes a `search_viewed` event to the `Analytics.Provider` component.

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

### Parameters

* props

  SearchViewProps

  required

### SearchViewProps

* data

  ```ts
  SearchPayload
  ```

* customData

  ```ts
  OtherData
  ```

```ts
{
  data?: SearchPayload;
  customData?: OtherData;
}
```

### SearchPayload

* searchTerm

  The search term used for the search results page

  ```ts
  string
  ```

* searchResults

  The search results

  ```ts
  any
  ```

```ts
{
  /** The search term used for the search results page */
  searchTerm: string;
  /** The search results */
  searchResults?: any;
}
```

### OtherData



```ts
OtherData
```

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  import {Analytics} from '@shopify/hydrogen';
  import {json} from '@shopify/remix-oxygen';
  import {useLoaderData} from '@remix-run/react';

  export async function loader({request}) {
    const url = new URL(request.url);
    const searchParams = new URLSearchParams(url.search);
    const searchTerm = String(searchParams.get('q') || '');

    return json({
      searchTerm,
    });
  }

  export default function SearchPage() {
    const {searchTerm} = useLoaderData();
    return (
      <div className="search">
        <h1>Search</h1>
        <Analytics.SearchView data={{searchTerm}} />
      </div>
    );
  }
  ```

  ##### TypeScript

  ```ts
  import {Analytics} from '@shopify/hydrogen';
  import {type LoaderFunctionArgs, json} from '@shopify/remix-oxygen';
  import {useLoaderData} from '@remix-run/react';

  export async function loader({request}: LoaderFunctionArgs) {
    const url = new URL(request.url);
    const searchParams = new URLSearchParams(url.search);
    const searchTerm = String(searchParams.get('q') || '');

    return json({
      searchTerm,
    });
  }

  export default function SearchPage() {
    const {searchTerm} = useLoaderData<typeof loader>();
    return (
      <div className="search">
        <h1>Search</h1>
        <Analytics.SearchView data={{searchTerm}} />
      </div>
    );
  }
  ```