📍 Bolt Help / Products / Ignite 🔥 / API Implementation / Endpoints / Implement Data Event Tracking (Optional)
Implement Data Event Tracking (Optional)
Collect analytics data on checkout funnel events.

Page Contents

Click to expand.

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.
NameValuesDynamic selection
loginStatus
  • guest
  • logged-in
Upon undefined response from Login Modal, set to "guest"
"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.
NameValuesDynamic selection
paymentOptionstringSend the selected payment method’s name upon each click, and when the page loads the default 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.

# ignite

‹

 Use Webhook Events (Optional)
Styling

›