A lightweight JavaScript utility for reporting user touchpoints, similar to the Polar Analytics Pixel.
npm install @polar-analytics/pixel-sdkimport {
generatePayloadBase,
sendPixelEvent,
eventFactory,
} from "@polar-analytics/pixel-sdk";
const payloadBase = await generatePayloadBase({
customer: {
// Optional, include if available
id: "some-id",
email: "some-email",
},
});
// An anonymous ID to identify the device + browser
// Please refer to https://community.shopify.com/c/shopify-apps/web-pixel-clientid/m-p/2664271/highlight/true#M80886
const shopifyClientId =
// <the url of the shopify store> i.e. something.myshopify.com
const shopifyShopURL =
// Use the corresponding eventFactory for the desired event type.
const data = eventFactory.cart_viewed({
shopifyEventId: crypto.randomUUID(),
shopifyClientId,
shopifyShopURL,
})
/* If you want to send a custom event not supported by the event factory,
you can use this helper instead.
Please only use this method if the event is not supported natively by
the eventFactory. Using the custom event handler to send a non-custom
supported event might result in sending incomplete data.
const data = eventFactory.custom({
shopifyEventName: "<the-name-of-the-custom-event>",
shopifyEventId: crypto.randomUUID(),
shopifyClientId,
shopifyShopURL,
})
*/
sendPixelEvent(
pixelEndpoint /* obtained from polar analytics */,
payloadBase,
{ data },
);- eventFactory.page_viewed
- eventFactory.product_viewed
- eventFactory.collection_viewed
- eventFactory.search_submitted
- eventFactory.cart_viewed
- eventFactory.product_added_to_cart
- eventFactory.product_removed_from_cart
- eventFactory.checkout_started
- eventFactory.checkout_address_info_submitted
- eventFactory.checkout_contact_info_submitted
- eventFactory.checkout_shipping_info_submitted
- eventFactory.payment_info_submitted
- eventFactory.checkout_completed
- eventFactory.custom
The
page_viewedevent logs an instance where a customer visited a page. This event is available on the online store, checkout, and Order status pages.
Payload Specification
type PageViewedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyPageType?: string;
shopifyEventData?: {};
};The
product_viewedevent logs an instance where a customer visited a product details page. This event is available on the product page.
Payload Specification
type ProductViewedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyPageDetail: string;
shopifyPageProductId: string | null;
shopifyPageType: string;
shopifyEventData: { // More digestible as the data property in the Shopify docs linked above.
productVariant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
};
};
};The
collection_viewedevent logs an instance where a customer visited a product collection index page. This event is available on the online store page.
Payload Specification
type CollectionViewedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyPageDetail: string;
shopifyPageType: string;
shopifyPageCollectionId?: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
collection: {
id: string;
productVariants: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
}[];
title: string;
};
};
};The
search_submittedevent 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.
Payload Specification
type SearchSubmittedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
searchResult: {
productVariants: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
}[];
query: string;
};
};
};The
cart_viewedevent logs an instance where a customer visited the cart page.
Payload Specification
type CartViewedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
cart: {
attributes: {
key: string;
value: string;
}[];
cost: {
totalAmount: {
amount: number;
currencyCode: string;
};
};
id: string | null;
lines: {
cost: {
totalAmount: {
amount: number;
currencyCode: string;
};
};
merchandise: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
};
quantity: number;
}[];
totalQuantity: number;
} | null;
};
};The
product_added_to_cartevent logs an instance where a customer adds a product to their cart. This event is available on the online store page.
Payload Specification
type ProductAddedToCartEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
cartLine: {
cost: {
totalAmount: {
amount: number;
currencyCode: string;
};
};
merchandise: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
};
quantity: number;
} | null;
};
};The
product_removed_from_cartevent logs an instance where a customer removes a product from their cart. This event is available on the online store page.
Payload Specification
type ProductRemovedFromCartEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
cartLine: {
cost: {
totalAmount: {
amount: number;
currencyCode: string;
};
};
merchandise: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
};
quantity: number;
} | null;
};
};The
checkout_startedevent 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.
Payload Specification
type CheckoutStartedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};The
checkout_address_info_submittedevent logs an instance of a customer submitting their mailing address. This event is only available in checkouts where Checkout Extensibility for customizations is enabled.
Payload Specification
type CheckoutAdressInfoSubmittedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};The
checkout_contact_info_submittedevent logs an instance where a customer submits a checkout form. This event is only available in checkouts where Checkout Extensibility for customizations is enabled.
Payload Specification
type CheckoutAddressInfoSubmittedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};The
checkout_shipping_info_submittedevent logs an instance where the customer chooses a shipping rate. This event is only available in checkouts where Checkout Extensibility for customizations is enabled.
Payload Specification
type CheckoutShippingInfoSubmittedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};The
payment_info_submittedevent logs an instance of a customer submitting their payment information. This event is available on the checkout page.
Payload Specification
type PaymentInfoSubmittedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};The
checkout_completedevent 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.
Payload Specification
type CheckoutCompletedEventPayload = {
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // More digestible as the data property in the Shopify docs linked above.
checkout: {
attributes: {
key: string;
value: string;
}[];
billingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
buyerAcceptsEmailMarketing: boolean;
buyerAcceptsSmsMarketing: boolean;
currencyCode: string | null;
totalTax: {
amount: number;
currencyCode: string;
};
totalPrice: {
amount: number;
currencyCode: string;
} | null;
transactions: {
amount: {
amount: number;
currencyCode: string;
};
gateway: string;
paymentMethod: {
name: string;
type: string;
};
}[];
delivery: {
selectedDeliveryOptions: {
cost: {
amount: number;
currencyCode: string;
} | null;
costAfterDiscounts: {
amount: number;
currencyCode: string;
} | null;
description: string | null;
handle: string;
title: string | null;
type: string;
}[];
} | null;
discountApplications: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
}[];
discountsAmount: {
amount: number;
currencyCode: string;
} | null;
email: string | null;
token: string | null;
lineItems: {
finalLinePrice: {
amount: number;
currencyCode: string;
};
id: string | null;
properties: {
key: string;
value: string;
}[];
quantity: number;
sellingPlanAllocation: {
sellingPlan: {
id: string;
name: string;
};
} | null;
title: string | null;
discountAllocations: {
amount: {
amount: number;
currencyCode: string;
};
variant: {
id: string | null;
image: {
src: string | null;
} | null;
price: {
amount: number;
currencyCode: string;
};
product: {
id: string | null;
title: string;
type: string | null;
untranslatedTitle: string | null;
url: string | null;
vendor: string;
};
sku: string | null;
title: string | null;
untranslatedTitle: string | null;
} | null;
discountApplication: {
allocationMethod: string;
targetSelection: string;
targetType: string;
title: string;
type: string;
value:
| {
amount: number;
currencyCode: string;
}
| {
percentage: number;
};
};
}[];
}[];
localization: {
country: {
isoCode: string | null;
};
language: {
isoCode: string;
};
market: {
handle: string | null;
id: string | null;
};
};
order: {
customer: {
id: string | null;
isFirstOrder: boolean | null;
} | null;
id: string | null;
} | null;
phone: string | null;
shippingAddress: {
address1: string | null;
address2: string | null;
city: string | null;
country: string | null;
countryCode: string | null;
firstName: string | null;
lastName: string | null;
phone: string | null;
province: string | null;
provinceCode: string | null;
zip: string | null;
} | null;
shippingLine: {
price: {
amount: number;
currencyCode: string;
};
} | null;
smsMarketingPhone: string | null;
subtotalPrice: {
amount: number;
currencyCode: string;
} | null;
};
};
};Use if you want to track something not covered by the standard events listed above.
Payload Specification
type CustomEventPayload = {
shopifyEventName: string; // Important! This will be the key of your event.
shopifyEventId: string;
shopifyClientId: string;
shopifyShopURL: string;
shopifyEventData?: { // You can include any data you feel is relevant.
[x: string]: unknown;
} | undefined;
}- Make the changes you want to make, try to be backwards compatible when possible
- Create a CHANGELOG.md entry using
npx changeset - Deploy to NPM using
yarn deploy(You need access to the NPM 2FA) - Commit and merge the changes.
- Update the Polar Shopify Extension to use the latest version of the SDK
- (If relevant) inform third-parties using the SDK that there is value in updating.