init

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.

Anchor to propertiesProperties

Anchor to context context
Anchor to customerPrivacy customerPrivacy
Anchor to data data

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

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

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

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

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

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

CustomerPrivacyData

analyticsProcessingAllowed
This flag indicates whether the customer has allowed the processing of their data for analytics purposes on the initial page load. If a customer submits consent, you can use the [customer privacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not the privacy permissions have changed.
```
boolean
```
marketingAllowed
This flag indicates whether the customer has allowed the processing of their data for marketing purposes on the initial page load. If a customer submits consent, you can use the [customer privacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not the privacy permissions have changed.
```
boolean
```
preferencesProcessingAllowed
This flag indicates whether the customer has allowed the processing of their data for preferences purposes on the initial page load. If a customer submits consent, you can use the [customer privacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not the privacy permissions have changed.
```
boolean
```
saleOfDataAllowed
This flag indicates whether the customer has allowed the sale of their data on the initial page load. If a customer submits consent, you can use the [customer privacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not the privacy permissions have changed.
```
boolean
```

RegisterInitData

cart
A cart represents the merchandise that a customer intends to purchase, and the estimated cost associated with the cart.
```
Cart | null
```
customer
A customer represents a customer account with the shop. Customer accounts store contact information for the customer, saving logged-in customers the trouble of having to provide it at every checkout.
```
Customer | null
```
purchasingCompany
Provides details of the company and the company location that the business customer is purchasing on behalf of. This includes information that can be used to identify the company and the company location that the business customer belongs to.
```
PurchasingCompany | null
```
shop
The shop represents information about the store, such as the store name and currency.
```
Shop
```

Cart

A cart represents the merchandise that a customer intends to purchase, and the estimated cost associated with the cart.

attributes
The attributes associated with the cart. This property is only available if the shop has [upgraded to Checkout Extensibility](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade).
```
Attribute[]
```
cost
The estimated costs that the customer will pay at checkout.
```
CartCost
```
id
A globally unique identifier.
```
string | null
```
lines
A list of lines containing information about the items the customer intends to purchase.
```
CartLine[]
```
totalQuantity
The total number of items in the cart.
```
number
```

Attribute

Custom attributes associated with the cart or checkout.

key
The key for the attribute.
```
string
```
value
The value for the attribute.
```
string
```

CartCost

The costs that the customer will pay at checkout. It uses [`CartBuyerIdentity`](https://shopify.dev/api/storefront/reference/cart/cartbuyeridentity) to determine [international pricing](https://shopify.dev/custom-storefronts/internationalization/international-pricing#create-a-cart).

totalAmount
The total amount for the customer to pay.
```
MoneyV2
```

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

CartLine

Information about the merchandise in the cart.

cost
The cost of the merchandise that the customer will pay for at checkout. The costs are subject to change and changes will be reflected at checkout.
```
CartLineCost
```
merchandise
The merchandise that the buyer intends to purchase.
```
ProductVariant
```
quantity
The quantity of the merchandise that the customer intends to purchase.
```
number
```

CartLineCost

The cost of the merchandise line that the customer will pay at checkout.

totalAmount
The total cost of the merchandise line.
```
MoneyV2
```

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

Image

An image resource.

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

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

Customer

A customer represents a customer account with the shop. Customer accounts store contact information for the customer, saving logged-in customers the trouble of having to provide it at every checkout.

email
The customer’s email address. Requires the `read_customer_email` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
string | null
```
firstName
The customer’s first name. Requires the `read_customer_name` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
string | null
```
id
The ID of the customer. Requires the `read_customer_personal_data` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
string
```
lastName
The customer’s last name. Requires the `read_customer_name` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
string | null
```
ordersCount
The total number of orders that the customer has placed. Requires the `read_customer_personal_data` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
number | null
```
phone
The customer’s phone number. Requires the `read_customer_phone` access scope. See [Protected customer data](https://shopify.dev/docs/apps/launch/protected-customer-data).
```
string | null
```

PurchasingCompany

Provides details of the company and the company location that the business customer is purchasing on behalf of.

company
Includes information of the company that the business customer is purchasing on behalf of.
```
PurchasingCompanyCompany
```
location
Includes information of the company location that the business customer is purchasing on behalf of.
```
PurchasingCompanyLocation
```

PurchasingCompanyCompany

Includes information of the company that the business customer is purchasing on behalf of.

externalId
The external ID of the company that can be set by the merchant.
```
string | null
```
id
The company ID.
```
string
```
name
The name of the company.
```
string
```

PurchasingCompanyLocation

Includes information of the company location that the business customer is purchasing on behalf of.

externalId
The external ID of the company location that can be set by the merchant.
```
string | null
```
id
The company location ID.
```
string
```
name
The name of the company location.
```
string
```

Shop

The shop represents information about the store, such as the store name and currency.

countryCode
The shop’s country code.
```
string
```
myshopifyDomain
The shop’s myshopify.com domain.
```
string
```
name
The shop’s name.
```
string
```
paymentSettings
Settings related to payments.
```
ShopPaymentSettings
```
storefrontUrl
The shop’s primary storefront URL.
```
string | null
```

ShopPaymentSettings

Settings related to payments.

currencyCode
The three-letter code for the shop’s primary currency.
```
string
```

Examples

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

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

// On every page view, get the current state of the cart

const customer = init.data.customer;

const cart = init.data.cart;

const shop = init.data.shop;

const purchasingCompany = init.data.purchasingCompany;

console.log(`Customer Name: ${customer.firstName}`);

// Customer Name: Bogus

console.log(`Total Number of Items in Cart: ${cart.totalQuantity}`);

// Total Number of Items in Cart: 3

console.log(`Total Cost of Cart: ${cart.cost.totalAmount.amount}`);

// Total Cost of Cart: 50.82

console.log(`Shop name: ${shop.name}`);

// Shop name: Shop 123

console.log(`Shop currency code: ${shop.paymentSettings.currencyCode}`);

// Shop currency code: CAD

console.log(`Purchasing company name: ${purchasingCompany.company.name}`);

// Purchasing company name: Acme Corporation

console.log(

`Purchasing company location name: ${purchasingCompany.location.name}`,

);

// Purchasing company location name: Toronto fulfillment center

});

Examples

Accessing Standard Api

App Pixel

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

register(({analytics, init}) => {
  analytics.subscribe('page_viewed', (event) => {
    // On every page view, get the current state of the cart

    const customer = init.data.customer;
    const cart = init.data.cart;
    const shop = init.data.shop;
    const purchasingCompany = init.data.purchasingCompany;

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

    console.log(`Total Number of Items in Cart: ${cart.totalQuantity}`);
    // Total Number of Items in Cart: 3

    console.log(`Total Cost of Cart: ${cart.cost.totalAmount.amount}`);
    // Total Cost of Cart: 50.82

    console.log(`Shop name: ${shop.name}`);
    // Shop name: Shop 123

    console.log(`Shop currency code: ${shop.paymentSettings.currencyCode}`);
    // Shop currency code: CAD

    console.log(`Purchasing company name: ${purchasingCompany.company.name}`);
    // Purchasing company name: Acme Corporation

    console.log(
      `Purchasing company location name: ${purchasingCompany.location.name}`,
    );
    // Purchasing company location name: Toronto fulfillment center
  });
});

Custom Pixel

analytics.subscribe('page_viewed', (event) => {
  // On every page view, get the current state of the cart

  const customer = init.data.customer;
  const cart = init.data.cart;
  const shop = init.data.shop;
  const purchasingCompany = init.data.purchasingCompany;

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

  console.log(`Total Number of Items in Cart: ${cart.totalQuantity}`);
  // Total Number of Items in Cart: 3

  console.log(`Total Cost of Cart: ${cart.cost.totalAmount.amount}`);
  // Total Cost of Cart: 50.82

  console.log(`Shop name: ${shop.name}`);
  // Shop name: Shop 123

  console.log(`Shop currency code: ${shop.paymentSettings.currencyCode}`);
  // Shop currency code: CAD

  console.log(`Purchasing company name: ${purchasingCompany.company.name}`);
  // Purchasing company name: Acme Corporation

  console.log(
    `Purchasing company location name: ${purchasingCompany.location.name}`,
  );
  // Purchasing company location name: Toronto fulfillment center
});

Was this page helpful?