Merchants with custom cart implementations can invoke an analytics method that tracks checkout funnel events.
Shopper Experience
This is a backend process. Shoppers should not experience any UI flow in this step.
Before You Start
This article assumes you have installed the Bolt script.
Installation
Step 1: Invoke Analytics Method
Invoke this method with a different stepName during each step of checkout. Some event types allow you to add context to captured events.
window.BoltAnalytics.checkoutStepComplete(stepName, args)
| Parameter | Format | Required? |
|---|---|---|
stepName |
String | Yes |
args |
Object | No |
Step 2: Add Parameters to Analytics Method
Implement each event in the appropriate checkout step using the table below. Dynamically select argument values based on responses from other components in the Ignite flow.
stepName |
When to invoke | args |
||||||
|---|---|---|---|---|---|---|---|---|
"Detail entry began" |
When the shopper enters the first character into the email or phone input field. If the shopper is automatically signed in, this event may be skipped. | None | ||||||
"Shipping details fully entered" |
When the delivery options successfully load, including default selection. |
|
||||||
"Shipping method step complete" |
When the shopper completes the shipping step, including default/pre-filled information, and moves to the next step. | None | ||||||
"Billing details entered" |
When the shopper completes the billing step, including default/pre-filled information, and moves to the next step. If billing info is the same as shipping info, invoke this with “Payment details fully entered”. | None | ||||||
"Payment method selected" |
When the shopper selects a payment method, and each time they change the selection. |
|
||||||
"Payment details fully entered" |
When the shopper completes their payment information. For logged-in shoppers, this may occur with "Payment method selected". |
None | ||||||
"Clicks pay button" |
When the shopper initiates payment. | None | ||||||
"Payment complete" |
When the payment authorization is successful. | None | ||||||
"Payment rejected" |
When the payment authorization is unsuccessful. | None |
Example Implementation
The following example adds a method to track behavior upon completion of the shipping step:
onShippingComplete: () => {
// this code runs after the shopper enters shipping details and continues to the next step of checkout
window.BoltAnalytics.checkoutStepComplete("shipping details fully entered", { loginStatus: "guest" });
}
Next Steps
After you’re done setting things up, you can use Bolt’s Test Card References to confirm all transaction scenarios are working as expected.