Choose a version:

getClientBrowserParameters
utility

Gathers client browser values commonly used for analytics

Anchor to getClientBrowserParameters
getClientBrowserParameters()

If executed on server, this method will return empty string for each field.

Anchor to getClientBrowserParameters-returnsReturns

ClientBrowserParameters

navigationApi string: Navigation api: 'PerformanceNavigationTiming' | 'performance.navigation'.

Use getClientBrowserParameters() to collect this value.
navigationType string: Navigation type: 'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'.

Use getClientBrowserParameters() to collect this value.
path string: Value of window.location.pathname.

Use getClientBrowserParameters() to collect this value.
referrer string: Value of window.document.referrer.

Use getClientBrowserParameters() to collect this value.
search string: Value of window.location.search.

Use getClientBrowserParameters() to collect this value.
title string: Value of document.title.

Use getClientBrowserParameters() to collect this value.
uniqueToken string: Shopify unique user token: Value of _shopify_y cookie.

Use getClientBrowserParameters() to collect this value.
url string: Value of window.location.href.

Use getClientBrowserParameters() to collect this value.
userAgent string: Value of navigator.userAgent.

Use getClientBrowserParameters() to collect this value.
visitToken string: Shopify session token: Value of _shopify_s cookie.

Use getClientBrowserParameters() to collect this value.

GetClientBrowserParametersGeneratedType

ClientBrowserParameters

ClientBrowserParameters

export function getClientBrowserParameters(): ClientBrowserParameters {
  if (errorIfServer('getClientBrowserParameters')) {
    return {
      uniqueToken: '',
      visitToken: '',
      url: '',
      path: '',
      search: '',
      referrer: '',
      title: '',
      userAgent: '',
      navigationType: '',
      navigationApi: '',
    };
  }

  const [navigationType, navigationApi] = getNavigationType();
  const cookies = getShopifyCookies(document.cookie);

  return {
    uniqueToken: cookies[SHOPIFY_Y],
    visitToken: cookies[SHOPIFY_S],
    url: location.href,
    path: location.pathname,
    search: location.search,
    referrer: document.referrer,
    title: document.title,
    userAgent: navigator.userAgent,
    navigationType,
    navigationApi,
  };
}

ClientBrowserParameters

navigationApi
Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
navigationType
Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
path
Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
referrer
Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
search
Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
title
Value of `document.title`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
uniqueToken
Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```
url
Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
userAgent
Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
visitToken
Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```

{
  /**
   * Shopify unique user token: Value of `_shopify_y` cookie.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  uniqueToken: string;
  /**
   * Shopify session token: Value of `_shopify_s` cookie.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  visitToken: string;
  /**
   * Value of `window.location.href`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  url: string;
  /**
   * Value of `window.location.pathname`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  path: string;
  /**
   * Value of `window.location.search`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  search: string;
  /**
   * Value of `window.document.referrer`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  referrer: string;
  /**
   * Value of `document.title`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  title: string;
  /**
   * Value of `navigator.userAgent`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  userAgent: string;
  /**
   * Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  navigationType: string;
  /**
   * Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`.
   *
   * Use `getClientBrowserParameters()` to collect this value.
   **/
  navigationApi: string;
}

Was this section helpful?

Example code

import * as React from 'react';

import {useEffect} from 'react';

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

export default function App({Component, pageProps}) {

useEffect(() => {

getClientBrowserParameters();

});

return <Component {...pageProps} />;

}

examples

Example code

description

I am the default example

JavaScript

import * as React from 'react';
import {useEffect} from 'react';
import {getClientBrowserParameters} from '@shopify/hydrogen';

export default function App({Component, pageProps}) {
  useEffect(() => {
    getClientBrowserParameters();
  });

  return <Component {...pageProps} />;
}

TypeScript

import * as React from 'react';
import {useEffect} from 'react';
import {getClientBrowserParameters} from '@shopify/hydrogen';

export default function App({Component, pageProps}) {
  useEffect(() => {
    getClientBrowserParameters();
  });

  return <Component {...pageProps} />;
}