checkout_ completedinterface
interface
The 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
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
event isn't triggered at all.
Anchor to propertiesProperties
Anchor to clientId
clientId
string
The client-side ID of the customer, provided by Shopify
Anchor to context
context
Anchor to data
data
string
The ID of the customer event
Anchor to name
name
string
The name of the customer event
number
The sequence index number of the event.
Anchor to timestamp
timestamp
string
The timestamp of when the customer event occurred, in ISO 8601 format
Anchor to type
type
.Standard
Was this section helpful?
Accessing Standard Events
import {register} from '@shopify/web-pixels-extension';
register(({analytics}) => {
analytics.subscribe('checkout_completed', (event) => {
// Example for accessing event data
const checkout = event.data.checkout;
const checkoutTotalPrice = checkout.totalPrice?.amount;
const allDiscountCodes = checkout.discountApplications.map((discount) => {
if (discount.type === 'DISCOUNT_CODE') {
return discount.title;
}
});
const firstItem = checkout.lineItems[0];
const firstItemDiscountedValue = firstItem.discountAllocations[0]?.amount;
const customItemPayload = {
quantity: firstItem.quantity,
title: firstItem.title,
discount: firstItemDiscountedValue,
};
const paymentTransactions = event.data.checkout.transactions.map((transaction) => {
return {
paymentGateway: transaction.gateway,
amount: transaction.amount,
};
});
const payload = {
event_name: event.name,
event_data: {
totalPrice: checkoutTotalPrice,
discountCodesUsed: allDiscountCodes,
firstItem: customItemPayload,
paymentTransactions: paymentTransactions,
},
};
// Example for sending event data to third party servers
fetch('https://example.com/pixel', {
method: 'POST',
body: JSON.stringify(payload),
keepalive: true,
});
});
});