---
title: 'shopify:page:view'
description: Fires once on every page load.
source_url:
  html: 'https://shopify.dev/docs/api/storefront-events-and-actions/events/page-view'
  md: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/page-view.md
api_name: storefront-events-and-actions
---

# 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](https://shopify.dev/docs/api/storefront-events-and-actions/events/listen#adding-a-listener) 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.

#### Properties

* **page**

  **StandardEventPage**

  **required**

  The page the buyer landed on.

* **detail**

  **Record\<string, unknown>**

  Optional custom data for the storefront's internal use. Listeners can read it.

### StandardEventPage

The page a buyer is viewing.

* template

  The Liquid template that rendered the page, such as \`product\` or \`collection\`.

  ```ts
  string
  ```

* title

  The page title.

  ```ts
  string
  ```

* url

  The full page URL.

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### Dispatch the event

  ```javascript
  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

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

***