---
title: Optimize your store’s performance with search tracking
description: Track search metrics with the Storefront API to gain insights, improve relevance, and increase conversions.
source_url:
  html: https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking
  md: https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking.md
---

ExpandOn this page

* [What you’ll learn](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#requirements)
* [Step 1: Set up Shopify cookies](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-1-set-up-shopify-cookies)
* [Step 2: Extract and append search tracking parameters](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-2-extract-and-append-search-tracking-parameters)
* [Step 3: Send analytics to Shopify](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-3-send-analytics-to-shopify)
* [Next steps](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#next-steps)

# Optimize your store’s performance with search tracking

You can measure your storefront’s search performance and improve its relevance by collecting and leveraging customer interaction data.

This guide shows you how to set up search tracking on your custom storefront using the [Storefront API](https://shopify.dev/docs/api/storefront) and [Shopify analytics functionality available in Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics).

Note

Search tracking is only supported in custom storefronts built with either [Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started) or other React frameworks using the [Hydrogen React](https://shopify.dev/docs/api/hydrogen-react) library.

***

## What you’ll learn

In this tutorial, you’ll learn how to do the following tasks:

* Set up Shopify cookies.
* Extract and append search tracking parameters.
* Send analytics to Shopify.

***

## Requirements

* You've completed the [Getting started with the Storefront API](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/getting-started) guide.

- You’ve learned [how to set up Shopify analytics in Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics).
- You’re using the Storefront API version `2023-07` or higher.

***

## Step 1: Set up Shopify cookies

To enable search tracking, use Hydrogen’s [`useShopifyCookies`](https://shopify.dev/docs/api/hydrogen-react/latest/hooks/useshopifycookies) hook to create and refresh required Shopify cookies. It's up to you to decide how to obtain the value for `hasUserConsent`. Without `hasUserConsent` set to `true`, Shopify cookies are removed.

## File

## app/root.jsx

```jsx
import {useShopifyCookies} from '@shopify/hydrogen';


export default function App() {
  useShopifyCookies({hasUserConsent: true});
```

```tsx
import {useShopifyCookies} from '@shopify/hydrogen';


export default function App() {
  useShopifyCookies({hasUserConsent: true});
```

##### JavaScript

```
import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
  useShopifyCookies({hasUserConsent: true});
```

##### TypeScript

```
import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
  useShopifyCookies({hasUserConsent: true});
```

Tip

Learn more about [how to set up Shopify analytics](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics).

Shopify cookies are automatically added to Storefront API queries when Hydrogen’s [`createStorefrontClient`](https://shopify.dev/docs/api/hydrogen-react/latest/utilities/createstorefrontclient) utility function is used.

* For Hydrogen storefronts, follow the [Hydrogen documentation](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching).
* For storefronts using other React frameworks and the Hydrogen React library, follow the [Hydrogen React documentation](https://shopify.dev/docs/api/hydrogen-react).

***

## Step 2: Extract and append search tracking parameters

You can extract search tracking parameters from the `search` and `predictiveSearch` responses using the `trackingParameters` field. The following examples show how to return the tracking parameters and append them to the search result URLs.

### Example of `search`

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL query

```graphql
{
  search(query: "snowboard", types: PRODUCT, first: 3) {
    edges {
      node {
        ... on Product {
          handle
          trackingParameters
        }
      }
    }
  }
}
```

## JSON response

```json
{
  "data": {
    "search": {
      "edges": [
        {
          "node": {
            "handle": "mail-it-in-freestyle-snowboard",
            "trackingParameters": "_pos=1&_sid=2d34dc612&_ss=r"
          }
        },
        {
          "node": {
            "handle": "the-dev-snowboard",
            "trackingParameters": "_pos=2&_sid=2d34dc612&_ss=r"
          }
        },
        {
          "node": {
            "handle": "snowboard",
            "trackingParameters": "_pos=3&_sid=2d34dc612&_ss=r"
          }
        }
      ]
    }
  }
}
```

### Example of `predictiveSearch`

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL query

```graphql
{
  predictiveSearch(query: "toy") {
    queries {
      text
      trackingParameters
    }
    collections {
      handle
      trackingParameters
    }
    products {
      handle
      trackingParameters
    }
  }
}
```

## JSON response

```json
{
  "data": {
    "predictiveSearch": {
      "queries": [
        {
          "text": "snowboard",
          "trackingParameters": "_pos=1&_psq=snow&_ss=e&_v=1.0"
        },
        {
          "text": "oxygen snowboard",
          "trackingParameters": "_pos=2&_psq=snow&_ss=e&_v=1.0"
        },
        {
          "text": "3d snowboard",
          "trackingParameters": "_pos=3&_psq=snow&_ss=e&_v=1.0"
        }
      ],
      "collections": [
        {
          "handle": "hydrogen-snowboards",
          "trackingParameters": "_pos=1&_psq=toy&_ss=e&_v=1.0"
        }
      ],
      "products": [
        {
          "handle": "the-hosted-snowboard",
          "trackingParameters": "_pos=1&_psq=snow&_ss=e&_v=1.0"
        },
        {
          "handle": "the-dev-snowboard",
          "trackingParameters": "_pos=2&_psq=snow&_ss=e&_v=1.0"
        },
        {
          "handle": "the-hero-snowboard",
          "trackingParameters": "_pos=3&_psq=snow&_ss=e&_v=1.0"
        }
      ]
    }
  }
}
```

### Example of appending tracking parameters

The following example shows how to construct search result URLs using an array of products.

```js
const products = [
  {
    handle: "mail-it-in-freestyle-snowboard",
    trackingParameters: "_pos=1&_sid=2d34dc612&_ss=r"
  },
  {
    handle: "the-dev-snowboard",
    trackingParameters: "_pos=2&_sid=2d34dc612&_ss=r"
  },
  {
    handle: "snowboard",
    trackingParameters: "_pos=3&_sid=2d34dc612&_ss=r"
  }
];
const searchResultUrls = products.map((product) => {
  return `https://yourstore.com/products/${product.handle}?${product.trackingParameters}`;
});
```

The following example shows how to construct search result URLs using an array of queries.

```js
const getQueryParams = (resource, params) => {
  if (params) {
    return resource.trackingParameters
      ? `?${params}&${resource.trackingParameters}`
      : `?${params}`;
  } else {
    return resource.trackingParameters
      ? `?${resource.trackingParameters}`
      : '';
  }
};


const queries = [
  {
    text: "snowboard",
    trackingParameters: "_pos=1&_psq=snow&_ss=e&_v=1.0"
  },
  {
    text: "oxygen snowboard",
    trackingParameters: "_pos=2&_psq=snow&_ss=e&_v=1.0"
  },
  {
    text: "3d snowboard",
    trackingParameters: "_pos=3&_psq=snow&_ss=e&_v=1.0"
  }
];
const searchResultUrls = queries.map((query) => {
  const queryParams = getQueryParams(query, `q=${encodeURIComponent(query.text)}`)
  return `https://yourstore.com/search${queryParams}`;
});
```

***

## Step 3: Send analytics to Shopify

Follow the [Hydrogen analytics documentation](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/tracking) to learn how to send tracking events to Shopify.

***

## Next steps

* Customize search, filters, and product recommendations using the [Shopify Search & Discovery app](https://help.shopify.com/manual/online-store/search-and-discovery).

***

* [What you’ll learn](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#requirements)
* [Step 1: Set up Shopify cookies](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-1-set-up-shopify-cookies)
* [Step 2: Extract and append search tracking parameters](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-2-extract-and-append-search-tracking-parameters)
* [Step 3: Send analytics to Shopify](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#step-3-send-analytics-to-shopify)
* [Next steps](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/search-discovery/search-tracking#next-steps)