Open mt-analyzify opened 1 year ago
What's the use case? The problem with exposing the current step is it breaks for one page checkout & Shop pay where there are no concrete steps.
FWIW, you can retrieve the step on multi-page checkout within the web-pixel via url parsing:
// Step 1. Add and initialize your third-party JavaScript pixel (make sure to exclude HTML)
const steps = {
information: "information",
shipping: "shipping",
payment: "payment"
};
// Step 2. Subscribe to customer events using the analytics.subscribe() API
analytics.subscribe("page_viewed", event => {
const pathnameComponents = event?.context?.document?.location?.pathname?.split("/");
const step = pathnameComponents?.length >= 4 ? pathnameComponents[4] : null;
console.log(step);
// pixel("track", "event_name", event.data);
});
@gil-- Thank you for your response. The use case is to publish the steps data to web pixel to track the steps. Unfortunately, we pixel does not provide any data regarding the checkout steps. I can get the step name with URL in the web pixel however, it will only contain page data like URL. It will not contain any cart line or customer data.
The activeStep
is now available on 2024-04 https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/buyer-journey#useBuyerJourneyActiveStep - it currently only returns steps for the pre-purchase part of checkout (does not include post-purchase, order summary)
I'll keep this ticket open for now, but do let us know if there is a pressing need for extending this functionality to the steps after checkout
Please list the related package(s)
checkout-ui-extensions
If this related to specific APIs or components, please list them here
api.buyerJourney
Is your feature request related to a problem? Please describe.
I wanted to track the visitor's journey through the checkout steps, I thought the buyerJourney would include them but it only returns true when the journey is completed. In other cases, it returns undefined.
Describe the changes you are looking for
api.buyerJourney.current should return the current step. For example, when the visitor is on information step, api.buyerJourney.current should return "information", on shipping "shipping", on payment "payment", on post-purchase "post-purchase" and on order status page "completed" or "order-status".
Describe alternatives you’ve considered
I couldn't find a way to get the current step. Please let me know if there is any.
Additional context