---
title: Analytics.SearchView
description: Publishes a `search_viewed` event to the `Analytics.Provider` component.
api_version: 2026-01
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-searchview
  md: >-
    https://shopify.dev/docs/api/hydrogen/latest/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

* customData

  ```ts
  OtherData
  ```

* data

  ```ts
  SearchPayload
  ```

### OtherData



### SearchPayload

* searchResults

  The search results

  ```ts
  any
  ```

* searchTerm

  The search term used for the search results page

  ```ts
  string
  ```

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  import {Analytics} from '@shopify/hydrogen';
  import {useLoaderData} from 'react-router';

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

    return {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} from 'react-router';
  import {useLoaderData} from 'react-router';

  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 {searchTerm};
  }

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