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.
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,
});
});
});
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,
});
});
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
The client-side ID of the customer, provided by Shopify
The ID of the customer event
The name of the customer event
The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
A snapshot of various read-only properties of the browser at the time of event
Snapshot of a subset of properties of the `document` object in the top frame of the browser
Snapshot of a subset of properties of the `navigator` object in the top frame of the browser
Snapshot of a subset of properties of the `window` object in the top frame of the browser
A snapshot of a subset of properties of the `document` object in the top frame of the browser
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the character set being used by the document
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the current document
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the URI of the page that linked to this page
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document), returns the title of the current document
A snapshot of a subset of properties of the `location` object in the top frame of the browser
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing a `'#'` followed by the fragment identifier of the URL
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
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the domain of the URL
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the entire URL
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
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
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the port number of the URL
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Location), a string containing the protocol scheme of the URL, including the final `':'`
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
A snapshot of a subset of properties of the `navigator` object in the top frame of the browser
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns `false` if setting a cookie will be ignored and true otherwise
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
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
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), returns the user agent string for the current browser
A snapshot of a subset of properties of the `window` object in the top frame of the browser
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
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
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the location, or current URL, of the window object
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the global object's origin, serialized as a string
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the height of the outside of the browser window
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), gets the width of the outside of the browser window
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollX
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), an alias for window.scrollY
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
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
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
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled horizontally
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window), the number of pixels that the document has already been scrolled vertically
The interface representing a screen, usually the one on which the current window is being rendered
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/height), the height of the screen
Per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/width), the width of the screen
A collection is a group of products that a shop owner can create to organize them or make their shops easier to browse.
A globally unique identifier.
The collection’s name. Maximum length: 255 characters.
A product variant represents a different version of a product, such as differing sizes or differing colors.
A globally unique identifier.
Image associated with the product variant. This field falls back to the product image if no image is available.
The product variant’s price.
The product object that the product variant belongs to.
The SKU (stock keeping unit) associated with the variant.
The product variant’s title.
The product variant’s untranslated title.
An image resource.
The location of the image as a URL.
A monetary value with currency.
The decimal money amount.
The three-letter code that represents the currency, for example, USD. Supported codes include standard ISO 4217 codes, legacy codes, and non- standard codes.
A product is an individual item for sale in a Shopify store.
The ID of the product.
The product’s title.
The [product type](https://help.shopify.com/en/manual/products/details/product-type) specified by the merchant.
The product’s untranslated title.
The relative URL of the product.
The product’s vendor name.