# Web Pixels API
The Web Pixels API gives you access to a set of controlled APIs for accessing browser APIs and subscribing to customer events, within one of our Lax or Strict sandboxes.

## App Web Pixels

For app developers integrating app web pixels, pixels are loaded in a strict sandbox. To initialize the web pixel extension API you can import the `@shopify/web-pixels-extension package` for stronger typing and register your pixel. Once initialized, the `api` object (the **Standard API**) has access to the following properties:

- [`analytics`](/docs/api/web-pixels-api/standard-api/analytics): Provides access to Shopify's customer event API
- [`browser`](/docs/api/web-pixels-api/standard-api/browser): Provides access to specific browser methods that asynchronously execute in the top frame (cookie, localStorage, sessionStorage)
- [`init`](/docs/api/web-pixels-api/standard-api/init): A JSON object containing a snapshot of the page at time of page render.
  - Contains a context field that provides the Context of the page at the time of page render
  - Contains a data field that provides access to the Cart and Customer objects at the time of page render
- [`settings`](/docs/api/web-pixels-api/standard-api/settings): Provides access to the settings JSON object as set by the [GraphQL Admin API](https://shopify.dev/docs/apps/marketing/pixels/getting-started#step-5-create-a-web-pixel-setting-for-the-store) (Web pixel app extensions only)

To learn more about these Standard API properties, or how to create app pixels, please view the following documentation.



### Initializing the API

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

register((api) => {
  // you can access the web pixel extension API in here
  api.analytics.subscribe('page_viewed', (event) => {
    console.log(`Event Name is: ${event.name}`);
    // Event Name is: page_viewed

    // Set a cookie with the standard API
    api.browser.cookie.set('my_user_id', 'ABCX123');

    console.log(`Customer Name: ${api.init.data.customer.firstName}`);
    // Customer Name: Bogus

    console.log(api.settings);
    /**
     * {
     *   "accountID": 234
     * }
     */
  });
});

```

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

register(({analytics, browser, settings, init}) => {
  // instead of accessing the `api` object, you can deconstruct the properties for convenience

  analytics.subscribe('page_viewed', (event) => {
    console.log(`Event Name is: ${event.name}`);
    // Event Name is: page_viewed

    // Set a cookie with the standard API
    browser.cookie.set('my_user_id', 'ABCX123');

    console.log(`Customer Name: ${init.data.customer.firstName}`);
    // Customer Name: Bogus

    console.log(settings);
    /**
     * {
     *   "accountID": 234
     * }
     */
  });
});

```


- [API Reference](/docs/api/web-pixels-api/standard-api): Standard API
- [API Reference](https://shopify.dev/docs/apps/marketing/pixels/getting-started): App Pixel Tutorial
- [API Reference](https://help.shopify.com/en/manual/promoting-marketing/pixels/app-pixels): App Pixel FAQ
## Custom Web Pixels
Custom Pixels are loaded within a lax sandbox and configured within the pixel manager interface in the Shopify admin. For this developer interface, the `analytics`, `browser` and the `init` variables on the `api` object have already been deconstructed for you, and you can call them without having to write any additional boilerplate code.


### Initializing the API

```javascript
// With Custom Pixels, you can simply write the following without the "register" boilerplate.

analytics.subscribe('page_viewed', (event) => {
  console.log(`Event Name is: ${event.name}`);
  // Event Name is: page_viewed

  // Set a cookie with the standard API
  browser.cookie.set('my_user_id', 'ABCX123');

  console.log(`Customer Name: ${init.data.customer.firstName}`);
  // Customer Name: Bogus
});

```


- [API Reference](/docs/api/web-pixels-api/standard-api): Standard API
- [API Reference](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels): Custom Pixel Tutorial
## Customer Events Reference
After setting up your App Pixel or Custom Pixel, you can use these pixels to subscribe to additional customer events.
         We publish and maintain a list of commonly used standard events such as `page_viewed`, `product_viewed` and `checkout` progression events.
         If you would like additional events not covered by our list, you can create, publish and subscribe to your own custom event. To subscribe to
         multiple events at once you can use: `all_events`, `all_standard_events`, `all_custom_events`, `all_dom_events`. Please take note that
         the contents of these event subscriptions are subject to change as events are added or modified. Please view the following documentation for
         more details about customer events:
        


- [API Reference](/docs/api/web-pixels-api/standard-events): Standard Events
- [API Reference](/docs/api/web-pixels-api/emitting-data): Custom Events
- [API Reference](/docs/api/web-pixels-api/dom-events): DOM Events
- [API Reference](/docs/api/web-pixels-api/advanced-dom-events): Advanced DOM Events
- [API Reference](/docs/api/web-pixels-api/pixel-privacy): Pixel Privacy

## References
- [alert_displayed](https://shopify.dev/docs/api/web-pixels-api/standard-events/alert_displayed.txt): The `alert_displayed` event records instances when a user encounters an alert message, whether it's an inline validation message on an input field or a warning banner. This event is only available on checkout.
- [cart_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/cart_viewed.txt): The `cart_viewed` event logs an instance where a customer visited the cart page.
- [checkout_address_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_address_info_submitted.txt): The `checkout_address_info_submitted` event logs an instance of a customer submitting their mailing address. This event is only available in checkouts where Checkout Extensibility for customizations is enabled
- [checkout_completed](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed.txt): The `checkout_completed` event logs when a visitor completes a purchase. It's triggered once for each checkout, typically on the **Thank you** page. However, for upsells and post purchases, the `checkout_completed` event is triggered on the first upsell offer page instead. The event isn't triggered again on the **Thank you** page. If the page where the event is supposed to be triggered fails to load, then the `checkout_completed` event isn't triggered at all.
- [checkout_contact_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_contact_info_submitted.txt): The `checkout_contact_info_submitted` event logs an instance where a customer submits a checkout form. This event is only available in checkouts where Checkout Extensibility for customizations is enabled
- [checkout_shipping_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_shipping_info_submitted.txt): The `checkout_shipping_info_submitted` event logs an instance where the customer chooses a shipping rate. This event is only available in checkouts where Checkout Extensibility for customizations is enabled
- [checkout_started](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started.txt): The `checkout_started` event logs an instance of a customer starting the checkout process. This event is available on the checkout page. For Checkout Extensibility, this event is triggered every time a customer enters checkout. For non-checkout extensible shops, this event is only triggered the first time a customer enters checkout.
- [collection_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/collection_viewed.txt): 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.
- [page_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/page_viewed.txt): The `page_viewed` event logs an instance where a customer visited a page. This event is available on the online store, checkout, and **Order status** pages.
- [payment_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/payment_info_submitted.txt): The `payment_info_submitted` event logs an instance of a customer submitting their payment information. This event is available on the checkout page.
- [product_added_to_cart](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_added_to_cart.txt): The `product_added_to_cart` event logs an instance where a customer adds a product to their cart. This event is available on the online store page.
- [product_removed_from_cart](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_removed_from_cart.txt): The `product_removed_from_cart` event logs an instance where a customer removes a product from their cart. This event is available on the online store page.
- [product_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_viewed.txt): The `product_viewed` event logs an instance where a customer visited a product details page. This event is available on the product page.
- [search_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/search_submitted.txt): 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.
- [ui_extension_errored](https://shopify.dev/docs/api/web-pixels-api/standard-events/ui_extension_errored.txt): The `ui_extension_errored` event logs occurrences when an extension fails to render due to an uncaught exception in the extension code. This event is only available on checkout.
- [analytics](https://shopify.dev/docs/api/web-pixels-api/standard-api/analytics.txt): Provides access to Shopify's [customer event API](/docs/api/web-pixels-api/standard-events)
- [browser](https://shopify.dev/docs/api/web-pixels-api/standard-api/browser.txt): Provides access to specific browser methods that asynchronously execute in the top frame (`cookie`, `localStorage`, `sessionStorage`)
- [customerPrivacy](https://shopify.dev/docs/api/web-pixels-api/standard-api/customerprivacy.txt): Provides access to the [customerPrivacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not customers have given consent.
- [init](https://shopify.dev/docs/api/web-pixels-api/standard-api/init.txt): A JSON object containing a snapshot of the page at time of page render. It will always have the present `Context` of the page, as well as the `Data` field, which provides access to the `Cart` and `Customer` objects.
- [settings](https://shopify.dev/docs/api/web-pixels-api/standard-api/settings.txt): Provides access to the settings JSON object as set by the [GraphQL Admin API](https://shopify.dev/docs/apps/marketing/pixels/getting-started#step-5-create-a-web-pixel-setting-for-the-store) **(Web pixel app extensions only)**. The structure of this object is a string keyed hash map: `Record<string, any>`.
- [clicked](https://shopify.dev/docs/api/web-pixels-api/dom-events/clicked.txt): The `clicked` event logs an instance where a customer clicks on a page element.
- [form_submitted](https://shopify.dev/docs/api/web-pixels-api/dom-events/form_submitted.txt): The `form_submitted` event logs an instance where a form on a page is submitted.
- [input_blurred](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_blurred.txt): The `input_blurred` event logs an instance where an input on a page loses focus.
- [input_changed](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_changed.txt): The `input_changed` event logs an instance where an input value changes.
- [input_focused](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_focused.txt): The `input_focused` event logs an instance where an input on a page gains focus.
- [advanced_dom_available](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_available.txt): Event published when the DOM has been loaded and is available for interaction.
- [advanced_dom_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_changed.txt): Event published when the DOM has been changed in any way, such as an element being added, removed, or modified.
- [advanced_dom_clicked](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_clicked.txt): Event published when a customer clicks on a page element.
- [advanced_dom_clipboard](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_clipboard.txt): Event published when a customer has cut, copied or pasted text to or from the clipboard.
- [advanced_dom_form_submitted](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_form_submitted.txt): Event published when a form is submitted.
- [advanced_dom_input_blurred](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_blurred.txt): Event published when an input loses focus.
- [advanced_dom_input_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_changed.txt): Event published when an input value changes.
- [advanced_dom_input_focused](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_focused.txt): Event published when an input gains focus.
- [advanced_dom_mouse_moved](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_mouse_moved.txt): Event published when a customer moves their cursor over the page.
- [advanced_dom_scrolled](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_scrolled.txt): Event published when a customer scrolls on a page or a scrollable element.
- [advanced_dom_selection_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_selection_changed.txt): Event published when a customer uses text selection on a page.
- [advanced_dom_window_resized](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_window_resized.txt): Event published when a customer resizes their browser window.