collection_viewed
interface

The collection_viewed event logs an instance where a customer visited a product collection index page. This event is available on the online store page.

Anchor to propertiesProperties

Anchor to clientId clientId string: The client-side ID of the customer, provided by Shopify
Anchor to context context
Anchor to data data
Anchor to id id string: The ID of the customer event
Anchor to name name string: The name of the customer event
Anchor to seq seq number: The sequence index number of the event.
Anchor to timestamp timestamp string: The timestamp of when the customer event occurred, in ISO 8601 format
Anchor to type type .Standard

PixelEventsCollectionViewed

The `collection_viewed` event logs an instance where a customer visited a product collection index page. This event is available on the online store page

clientId
The client-side ID of the customer, provided by Shopify
```
string
```
context
```
Context
```
data
```
PixelEventsCollectionViewedData
```
id
The ID of the customer event
```
string
```
name
The name of the customer event
```
string
```
seq
The sequence index number of the event.
```
number
```
timestamp
The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
```
string
```
type
```
EventType.Standard
```

export interface PixelEventsCollectionViewed {
  /**
   * The client-side ID of the customer, provided by Shopify
   */
  clientId?: string;
  context?: Context;
  data?: PixelEventsCollectionViewedData;
  /**
   * 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;
}

Context

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

document
Snapshot of a subset of properties of the `document` object in the top frame of the browser
```
WebPixelsDocument
```
navigator
Snapshot of a subset of properties of the `navigator` object in the top frame of the browser
```
WebPixelsNavigator
```
window
Snapshot of a subset of properties of the `window` object in the top frame of the browser
```
WebPixelsWindow
```

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

WebPixelsDocument

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

characterSet
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the character set being used by the document
```
string
```
location
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the current document
```
Location
```
referrer
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the page that linked to this page
```
string
```
title
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the title of the current document
```
string
```

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

Location

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

hash
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a `'#'` followed by the fragment identifier of the URL
```
string
```
host
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
```
string
```
hostname
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the domain of the URL
```
string
```
href
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the entire URL
```
string
```
origin
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
```
string
```
pathname
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
```
string
```
port
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the port number of the URL
```
string
```
protocol
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the protocol scheme of the URL, including the final `':'`
```
string
```
search
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
```
string
```

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

WebPixelsNavigator

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

cookieEnabled
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns `false` if setting a cookie will be ignored and true otherwise
```
boolean
```
language
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
```
string
```
languages
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
```
ReadonlyArray<string>
```
userAgent
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns the user agent string for the current browser
```
string
```

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

WebPixelsWindow

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

innerHeight
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
```
number
```
innerWidth
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
```
number
```
location
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the location, or current URL, of the window object
```
Location
```
origin
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the global object's origin, serialized as a string
```
string
```
outerHeight
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the outside of the browser window
```
number
```
outerWidth
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the outside of the browser window
```
number
```
pageXOffset
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollX
```
number
```
pageYOffset
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollY
```
number
```
screen
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
```
screenX
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
```
number
```
screenY
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
```
number
```
scrollX
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled horizontally
```
number
```
scrollY
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled vertically
```
number
```

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

Screen

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

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

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

PixelEventsCollectionViewedData

collection
```
Collection
```

export interface PixelEventsCollectionViewedData {
  collection?: Collection;
}

Collection

A collection is a group of products that a shop owner can create to organize them or make their shops easier to browse.

id
A globally unique identifier.
```
string
```
productVariants
```
ProductVariant[]
```
title
The collection’s name. Maximum length: 255 characters.
```
string
```

export interface Collection {
  /**
   * A globally unique identifier.
   */
  id?: string;
  productVariants?: ProductVariant[];

  /**
   * The collection’s name. Maximum length: 255 characters.
   */
  title?: string;
}

ProductVariant

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

id
A globally unique identifier.
```
string | null
```
image
Image associated with the product variant. This field falls back to the product image if no image is available.
```
Image | null
```
price
The product variant’s price.
```
MoneyV2
```
product
The product object that the product variant belongs to.
```
Product
```
sku
The SKU (stock keeping unit) associated with the variant.
```
string | null
```
title
The product variant’s title.
```
string | null
```
untranslatedTitle
The product variant’s untranslated title.
```
string | null
```

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

Image

An image resource.

src
The location of the image as a URL.
```
string | null
```

export interface Image {
  /**
   * The location of the image as a URL.
   */
  src?: string | null;
}

MoneyV2

A monetary value with currency.

amount
The decimal money amount.
```
number
```
currencyCode
The three-letter code that represents the currency, for example, USD. Supported codes include standard ISO 4217 codes, legacy codes, and non- standard codes.
```
string
```

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

Product

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

id
The ID of the product.
```
string | null
```
title
The product’s title.
```
string
```
type
The [product type](https://help.shopify.com/en/manual/products/details/product-type) specified by the merchant.
```
string | null
```
untranslatedTitle
The product’s untranslated title.
```
string | null
```
url
The relative URL of the product.
```
string | null
```
vendor
The product’s vendor name.
```
string
```

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

EventType

AdvancedDom
```
advanced-dom
```
Custom
```
custom
```
Dom
```
dom
```
Meta
```
meta
```
Standard
```
standard
```

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

Was this section helpful?

Accessing Standard Events

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

analytics.subscribe('collection_viewed', (event) => {

// Example for accessing event data

const collection = event.data.collection;

const collectionTitle = collection.title;

const priceOfFirstProductInCollection =

collection.productVariants[0]?.price.amount;

const payload = {

event_name: event.name,

event_data: {

collectionTitle: collectionTitle,

priceFirstItem: priceOfFirstProductInCollection,

};

// Example for sending event to third party servers

fetch('https://example.com/pixel', {

method: 'POST',

body: JSON.stringify(payload),

keepalive: true,

});

examples

Accessing Standard Events

App Pixel

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

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

    const collectionTitle = collection.title;

    const priceOfFirstProductInCollection =
      collection.productVariants[0]?.price.amount;

    const payload = {
      event_name: event.name,
      event_data: {
        collectionTitle: collectionTitle,
        priceFirstItem: priceOfFirstProductInCollection,
      },
    };

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

Custom Pixel

analytics.subscribe('collection_viewed', (event) => {
  // Example for accessing event data
  const collection = event.data.collection;

  const collectionTitle = collection.title;

  const priceOfFirstProductInCollection =
    collection.productVariants[0]?.price.amount;

  const payload = {
    event_name: event.name,
    event_data: {
      collectionTitle: collectionTitle,
      priceFirstItem: priceOfFirstProductInCollection,
    },
  };

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

collection_viewedinterface

Anchor to propertiesProperties

PixelEventsCollectionViewed

Context

WebPixelsDocument

Location

WebPixelsNavigator

WebPixelsWindow

Screen

PixelEventsCollectionViewedData

Collection

ProductVariant

Image

MoneyV2

Product

EventType

examples

Accessing Standard Events

App Pixel

Custom Pixel

collection_viewed
interface