As Shopify has moved stores onto Checkout Extensibility (the 'new' checkout) it has become harder for stores to track the checkout steps and purchases.
One solution is to use Custom Web Pixels to insert tracking code from the checkout pages themselves, but this is messy to maintain and has technical limitations.
Littledata has a better solution, which works seamlessly for all types of checkout - automatically tracking the checkout updates from Shopify's servers, and inferring the customer behaviour.
Littledata supports checkout funnel event tracking for:
* This includes the same events for both the one-page checkout and the original three-step checkout.
Where the Shopify checkout includes checkout apps handling subscriptions or upsells. the checkout steps are the same for these customer journeys, but the resulting order is differentiated.
These are the advantages of using Littledata to track Checkout Extensibility versus custom web pixels (also known as customer events):
When the customer starts and progresses through the checkout on your Shopify site, Littledata triggers the following checkout step events:
Let's take a closer look at the structure of these events, what we call them when they're triggered, and how they work.
Step | GA4 Event Name | User action | Technical trigger |
---|---|---|---|
1 | begin_checkout | Contact info section viewed | Checkout created in Shopify for that cart |
2 | add_shipping_info | Shipping info section viewed | Customer property added to checkout |
3 | add_payment_info | Payment section viewed | Shipping lines property addded to checkout |
Purchase | purchase | Order completed | Order is created and marked as PAID |
You can see how this works for tracking the Google Analytics checkout funnel
Littledata works seamlessly with one-click checkouts (like Shop Pay), tracking the purchase and sending it over to the desired destination, as well as attributing it to the original source.
But these accelerated checkouts may lack Checkout Steps - because the nature of the one-click checkout is to bypass the Shopify checkout entirely.
For security reasons, third-party apps such as Littledata don’t have access to load third-party JavaScript libraries (e.g. gtag or Meta Pixel) onto Shopify's checkout. We depend on Shopify's webhooks to infer the checkout pages viewed by a particular user.
When a user zips through the checkout pages in quick succession (specifically under 10 seconds), Shopify only informs us of the last page viewed by the user, and passing through these raw updates would result in a nonsense checkout funnel:
So for every checkout step, Littledata checks back if it has sent events for all previous steps for the same user ID and checkout ID in the last 3 days.
In cases where previous step events were NOT sent in the last 3 days, Littledata retroactively adds checkout steps to make sure the user’s journey looks complete in the checkout funnel.
For example, let’s say a user is already logged in and gets through to the payment page within 10 seconds. For this user, even if Shopify only communicated the final end-state (i.e. payment page), Littledata will assume that they went through all steps of the funnel as expected and send 3 separate steps:
Although retroactively adding steps makes the funnel a lot more meaningful, there are a couple of trade-offs that should be kept in mind while analyzing the data:
We send the following checkout step events.
* Thank you Page Viewed is sent from the browser, and won't exactly match the situations where Order Completed. See why
Check out a detailed list of all events tracked by our Segment connection.