Choose a version:

Analytics.SearchView

Publishes a search_viewed event to the Analytics.Provider component.

Anchor to analyticsSearchView
analyticsSearchView(
props
)

Anchor to analyticsSearchView-parametersParameters

Anchor to props props required

Examples

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 (

<h1>Search</h1>

<Analytics.SearchView data={{searchTerm}} />

</div>

);

}

Examples

Example

JavaScript

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

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

Was this page helpful?

Analytics.SearchView

Anchor to analyticsSearchView
analyticsSearchView(
props
)

Anchor to analyticsSearchView-parametersParameters

SearchViewProps

OtherData

SearchPayload

Anchor to analyticsSearchViewanalyticsSearchView(propsprops)

Anchor to analyticsSearchView-parametersParameters

SearchViewProps

OtherData

SearchPayload

Anchor to analyticsSearchView
analyticsSearchView(
props
)