shopify:page:view

Fires once per page load, on every page of the storefront.

Storefronts on the Online Store are multi-page, so every navigation is a fresh document with fresh listeners, and this event marks the start of each one. The template tells you which kind of page the buyer landed on.

Storefronts dispatch it once the document is ready, which means a DOMContentLoaded listener, or immediately if the page has already loaded. A listener registered synchronously at script load catches it, and one attached later doesn't.

Liquid doesn't run inside a theme's JavaScript assets, so the layout renders the page type into an attribute and the script reads it from there.

Anchor to propertiesProperties

Anchor to page page required: The page the buyer landed on.
Anchor to detail detail Record<string, unknown>: Optional custom data for the storefront's internal use. Listeners can read it.

Examples

Dispatch the event

import { PageViewEvent } from '@shopify/standard-events';

document.addEventListener('DOMContentLoaded', () => {

document.dispatchEvent(

new PageViewEvent({

page: {

template: 'product',

title: document.title,

url: window.location.href,

}),

);

});

Examples

Dispatch the event

import { PageViewEvent } from '@shopify/standard-events';

document.addEventListener('DOMContentLoaded', () => {
  document.dispatchEvent(
    new PageViewEvent({
      page: {
        template: 'product',
        title: document.title,
        url: window.location.href,
      },
    }),
  );
});

Listen for the event

document.addEventListener('shopify:page:view', (event) => {
  if (event.page.template === 'product') {
    loadRecommendations(event.page.url);
  }
});

Was this page helpful?

Anchor to propertiesProperties

StandardEventPage