Skip to main content

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 and Shopify analytics functionality available in Hydrogen.

Note

Search tracking is only supported in custom storefronts built with either Hydrogen or other React frameworks using the Hydrogen React library.

Anchor to What you’ll learnWhat 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.

Anchor to RequirementsRequirements

Anchor to Step 1: Set up Shopify cookiesStep 1: Set up Shopify cookies

To enable search tracking, use Hydrogen’s 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

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

export default function App() {
useShopifyCookies({hasUserConsent: true});
import {useShopifyCookies} from '@shopify/hydrogen';

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

Learn more about how to set up Shopify analytics.

Shopify cookies are automatically added to Storefront API queries when Hydrogen’s createStorefrontClient utility function is used.

Anchor to Step 2: Extract and append search tracking parametersStep 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.

Anchor to Example of ,[object Object]Example of search

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

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

JSON response

{
"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"
}
}
]
}
}
}

Anchor to Example of ,[object Object]Example of predictiveSearch

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

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

JSON response

{
"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"
}
]
}
}
}

Anchor to Example of appending tracking parametersExample of appending tracking parameters

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

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.

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

Anchor to Step 3: Send analytics to ShopifyStep 3: Send analytics to Shopify

Follow the Hydrogen analytics documentation to learn how to send tracking events to Shopify.

Anchor to Next stepsNext steps

Was this page helpful?