# Analytics.SearchView

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

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

```

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

```

## Props

### AnalyticsSearchViewGeneratedType

#### Returns: 

#### Params:

- props: SearchViewProps
export function AnalyticsSearchView(props: SearchViewProps) {
  return <AnalyticsView {...props} type="search_viewed" />;
}


### SearchViewProps

### data

value: `SearchPayload`


### customData

value: `OtherData`


### SearchPayload

### searchTerm

value: `string`

The search term used for the search results page

### searchResults

value: `any`

The search results