# search_submitted

The `search_submitted` event logs an instance where a customer performed a search on the storefront. The products returned from the search query are in this event object (the first product variant for each product is listed in the array). This event is available on the online store page.

```javascript
import {register} from '@shopify/web-pixels-extension';

register(({analytics}) => {
  analytics.subscribe('search_submitted', (event) => {
    // Example for accessing event data
    const searchResult = event.data.searchResult;

    const searchQuery = searchResult.query;

    const firstProductReturnedFromSearch =
      searchResult.productVariants[0]?.product.title;

    const payload = {
      event_name: event.name,
      event_data: {
        searchQuery: searchQuery,
        firstProductTitle: firstProductReturnedFromSearch,
      },
    };

    // Example for sending event to third party servers
    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
});

```

```javascript
analytics.subscribe('search_submitted', (event) => {
  // Example for accessing event data
  const searchResult = event.data.searchResult;

  const searchQuery = searchResult.query;

  const firstProductReturnedFromSearch =
    searchResult.productVariants[0]?.product.title;

  const payload = {
    event_name: event.name,
    event_data: {
      searchQuery: searchQuery,
      firstProductTitle: firstProductReturnedFromSearch,
    },
  };

  // Example for sending event to third party servers
  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});

```

## Properties

### PixelEventsSearchSubmitted

The `search_submitted` event logs an instance where a customer performed a search on the storefront. This event is available on the online store page

### clientId

value: `string`

The client-side ID of the customer, provided by Shopify

### context

value: `Context`

  - Context: export interface Context {
  /**
   * Snapshot of a subset of properties of the `document` object in the top
   * frame of the browser
   */
  document?: WebPixelsDocument;

  /**
   * Snapshot of a subset of properties of the `navigator` object in the top
   * frame of the browser
   */
  navigator?: WebPixelsNavigator;

  /**
   * Snapshot of a subset of properties of the `window` object in the top frame
   * of the browser
   */
  window?: WebPixelsWindow;
}

### data

value: `PixelEventsSearchSubmittedData`

  - PixelEventsSearchSubmitted: export interface PixelEventsSearchSubmitted {
  /**
   * The client-side ID of the customer, provided by Shopify
   */
  clientId?: string;
  context?: Context;
  data?: PixelEventsSearchSubmittedData;
  /**
   * The ID of the customer event
   */
  id?: string;

  /**
   * The name of the customer event
   */
  name?: string;

  /**
   * The sequence index number of the event.
   */
  seq?: number;
  /**
   * The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
   */
  timestamp?: string;
  type?: EventType.Standard;
}
  - PixelEventsSearchSubmittedData: export interface PixelEventsSearchSubmittedData {
  searchResult?: SearchResult;
}

### id

value: `string`

The ID of the customer event

### name

value: `string`

The name of the customer event

### seq

value: `number`

The sequence index number of the event.

### timestamp

value: `string`

The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

### type

value: `EventType.Standard`

  - EventType: export enum EventType {
  AdvancedDom = 'advanced-dom',
  Custom = 'custom',
  Dom = 'dom',
  Meta = 'meta',
  Standard = 'standard',
}

### Context

A snapshot of various read-only properties of the browser at the time of event

### document

value: `WebPixelsDocument`

  - WebPixelsDocument: export interface WebPixelsDocument {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document),
   * returns the character set being used by the document
   */
  characterSet?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document),
   * returns the URI of the current document
   */
  location?: Location;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document),
   * returns the URI of the page that linked to this page
   */
  referrer?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document),
   * returns the title of the current document
   */
  title?: string;
}
Snapshot of a subset of properties of the `document` object in the top frame of the browser

### navigator

value: `WebPixelsNavigator`

  - WebPixelsNavigator: export interface WebPixelsNavigator {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator),
   * returns `false` if setting a cookie will be ignored and true otherwise
   */
  cookieEnabled?: boolean;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator),
   * returns a string representing the preferred language of the user, usually
   * the language of the browser UI. The `null` value is returned when this
   * is unknown
   */
  language?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator),
   * returns an array of strings representing the languages known to the user,
   * by order of preference
   */
  languages?: ReadonlyArray<string>;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator),
   * returns the user agent string for the current browser
   */
  userAgent?: string;
}
Snapshot of a subset of properties of the `navigator` object in the top frame of the browser

### window

value: `WebPixelsWindow`

  - WebPixelsWindow: export interface WebPixelsWindow {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window),
   * gets the height of the content area of the browser window including, if
   * rendered, the horizontal scrollbar
   */
  innerHeight?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets
   * the width of the content area of the browser window including, if rendered,
   * the vertical scrollbar
   */
  innerWidth?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * location, or current URL, of the window object
   */
  location?: Location;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * global object's origin, serialized as a string
   */
  origin?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets
   * the height of the outside of the browser window
   */
  outerHeight?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets
   * the width of the outside of the browser window
   */
  outerWidth?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an
   * alias for window.scrollX
   */
  pageXOffset?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an
   * alias for window.scrollY
   */
  pageYOffset?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen), the
   * interface representing a screen, usually the one on which the current
   * window is being rendered
   */
  screen?: Screen;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * horizontal distance from the left border of the user's browser viewport to
   * the left side of the screen
   */
  screenX?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * vertical distance from the top border of the user's browser viewport to the
   * top side of the screen
   */
  screenY?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * number of pixels that the document has already been scrolled horizontally
   */
  scrollX?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the
   * number of pixels that the document has already been scrolled vertically
   */
  scrollY?: number;
}
Snapshot of a subset of properties of the `window` object in the top frame of the browser

### WebPixelsDocument

A snapshot of a subset of properties of the `document` object in the top frame of the browser

### characterSet

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the character set being used by the document

### location

value: `Location`

  - Location: export interface Location {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing a `'#'` followed by the fragment identifier of the URL
   */
  hash?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the host, that is the hostname, a `':'`, and the port of
   * the URL
   */
  host?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the domain of the URL
   */
  hostname?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the entire URL
   */
  href?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the canonical form of the origin of the specific location
   */
  origin?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing an initial `'/'` followed by the path of the URL, not
   * including the query string or fragment
   */
  pathname?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the port number of the URL
   */
  port?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the protocol scheme of the URL, including the final `':'`
   */
  protocol?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing a `'?'` followed by the parameters or "querystring" of
   * the URL
   */
  search?: string;
}
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the current document

### referrer

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the page that linked to this page

### title

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the title of the current document

### Location

A snapshot of a subset of properties of the `location` object in the top frame of the browser

### hash

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a `'#'` followed by the fragment identifier of the URL

### host

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the host, that is the hostname, a `':'`, and the port of the URL

### hostname

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the domain of the URL

### href

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the entire URL

### origin

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the canonical form of the origin of the specific location

### pathname

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing an initial `'/'` followed by the path of the URL, not including the query string or fragment

### port

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the port number of the URL

### protocol

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the protocol scheme of the URL, including the final `':'`

### search

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a `'?'` followed by the parameters or "querystring" of the URL

### WebPixelsNavigator

A snapshot of a subset of properties of the `navigator` object in the top frame of the browser

### cookieEnabled

value: `boolean`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns `false` if setting a cookie will be ignored and true otherwise

### language

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns a string representing the preferred language of the user, usually the language of the browser UI. The `null` value is returned when this is unknown

### languages

value: `ReadonlyArray<string>`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns an array of strings representing the languages known to the user, by order of preference

### userAgent

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns the user agent string for the current browser

### WebPixelsWindow

A snapshot of a subset of properties of the `window` object in the top frame of the browser

### innerHeight

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar

### innerWidth

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the content area of the browser window including, if rendered, the vertical scrollbar

### location

value: `Location`

  - Location: export interface Location {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing a `'#'` followed by the fragment identifier of the URL
   */
  hash?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the host, that is the hostname, a `':'`, and the port of
   * the URL
   */
  host?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the domain of the URL
   */
  hostname?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the entire URL
   */
  href?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the canonical form of the origin of the specific location
   */
  origin?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing an initial `'/'` followed by the path of the URL, not
   * including the query string or fragment
   */
  pathname?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the port number of the URL
   */
  port?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing the protocol scheme of the URL, including the final `':'`
   */
  protocol?: string;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a
   * string containing a `'?'` followed by the parameters or "querystring" of
   * the URL
   */
  search?: string;
}
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the location, or current URL, of the window object

### origin

value: `string`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the global object's origin, serialized as a string

### outerHeight

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the outside of the browser window

### outerWidth

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the outside of the browser window

### pageXOffset

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollX

### pageYOffset

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollY

### screen

value: `Screen`

  - Screen: export interface Screen {
  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/height),
   * the height of the screen
   */
  height?: number;

  /**
   * Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/width),
   * the width of the screen
   */
  width?: number;
}
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen), the interface representing a screen, usually the one on which the current window is being rendered

### screenX

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the horizontal distance from the left border of the user's browser viewport to the left side of the screen

### screenY

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the vertical distance from the top border of the user's browser viewport to the top side of the screen

### scrollX

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled horizontally

### scrollY

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled vertically

### Screen

The interface representing a screen, usually the one on which the current window is being rendered

### height

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/height), the height of the screen

### width

value: `number`

Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/width), the width of the screen

### PixelEventsSearchSubmittedData

### searchResult

value: `SearchResult`

  - SearchResult: export interface SearchResult {
  productVariants?: ProductVariant[];

  /**
   * The search query that was executed
   */
  query?: string;
}

### SearchResult

An object that contains the metadata of when a search has been performed.

### productVariants

value: `ProductVariant[]`

  - ProductVariant: export interface ProductVariant {
  /**
   * A globally unique identifier.
   */
  id?: string | null;

  /**
   * Image associated with the product variant. This field falls back to the
   * product image if no image is available.
   */
  image?: Image | null;

  /**
   * The product variant’s price.
   */
  price?: MoneyV2;

  /**
   * The product object that the product variant belongs to.
   */
  product?: Product;

  /**
   * The SKU (stock keeping unit) associated with the variant.
   */
  sku?: string | null;

  /**
   * The product variant’s title.
   */
  title?: string | null;

  /**
   * The product variant’s untranslated title.
   */
  untranslatedTitle?: string | null;
}
  - Product: export interface Product {
  /**
   * The ID of the product.
   */
  id?: string | null;

  /**
   * The product’s title.
   */
  title?: string;

  /**
   * The [product
   * type](https://help.shopify.com/en/manual/products/details/product-type)
   * specified by the merchant.
   */
  type?: string | null;

  /**
   * The product’s untranslated title.
   */
  untranslatedTitle?: string | null;

  /**
   * The relative URL of the product.
   */
  url?: string | null;

  /**
   * The product’s vendor name.
   */
  vendor?: string;
}

### query

value: `string`

The search query that was executed

### ProductVariant

A product variant represents a different version of a product, such as differing sizes or differing colors.

### id

value: `string | null`

A globally unique identifier.

### image

value: `Image | null`

  - Image: export interface Image {
  /**
   * The location of the image as a URL.
   */
  src?: string | null;
}
Image associated with the product variant. This field falls back to the product image if no image is available.

### price

value: `MoneyV2`

  - MoneyV2: export interface MoneyV2 {
  /**
   * The decimal money amount.
   */
  amount?: number;

  /**
   * The three-letter code that represents the currency, for example, USD.
   * Supported codes include standard ISO 4217 codes, legacy codes, and non-
   * standard codes.
   */
  currencyCode?: string;
}
The product variant’s price.

### product

value: `Product`

  - Product: export interface Product {
  /**
   * The ID of the product.
   */
  id?: string | null;

  /**
   * The product’s title.
   */
  title?: string;

  /**
   * The [product
   * type](https://help.shopify.com/en/manual/products/details/product-type)
   * specified by the merchant.
   */
  type?: string | null;

  /**
   * The product’s untranslated title.
   */
  untranslatedTitle?: string | null;

  /**
   * The relative URL of the product.
   */
  url?: string | null;

  /**
   * The product’s vendor name.
   */
  vendor?: string;
}
The product object that the product variant belongs to.

### sku

value: `string | null`

The SKU (stock keeping unit) associated with the variant.

### title

value: `string | null`

The product variant’s title.

### untranslatedTitle

value: `string | null`

The product variant’s untranslated title.

### Image

An image resource.

### src

value: `string | null`

The location of the image as a URL.

### MoneyV2

A monetary value with currency.

### amount

value: `number`

The decimal money amount.

### currencyCode

value: `string`

The three-letter code that represents the currency, for example, USD. Supported codes include standard ISO 4217 codes, legacy codes, and non- standard codes.

### Product

A product is an individual item for sale in a Shopify store.

### id

value: `string | null`

The ID of the product.

### title

value: `string`

The product’s title.

### type

value: `string | null`

The [product type](https://help.shopify.com/en/manual/products/details/product-type) specified by the merchant.

### untranslatedTitle

value: `string | null`

The product’s untranslated title.

### url

value: `string | null`

The relative URL of the product.

### vendor

value: `string`

The product’s vendor name.

### EventType

### AdvancedDom

value: `advanced-dom`


### Custom

value: `custom`


### Dom

value: `dom`


### Meta

value: `meta`


### Standard

value: `standard`