Tracking Shopify Checkout Extensibility

Updated on 2024-07-04

Server-side checkout tracking

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:

  • Shopify checkout (including Checkout Extensibility) *
  • Accelerated checkouts (Shop Pay, Amazon etc)

* 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.

Littledata advantages

These are the advantages of using Littledata to track Checkout Extensibility versus custom web pixels (also known as customer events):

  1. No code setup - automatically installed
  2. No maintanance required as Shopify, Google, Meta etc change their APIs
  3. Tracks users with adblockers or network limitations
  4. Works for headless site with a Shopify checkout - please follow the headless setup guide first.

Default checkout steps

When the customer starts and progresses through the checkout on your Shopify site, Littledata triggers the following checkout step events:

  • Step 1: Contact information
  • Step 2: Shipping information
  • Step 3: Payment method
  • Purchase (Order complete)

Checkout step triggers

Let's take a closer look at the structure of these events, what we call them when they're triggered, and how they work.

StepGA4 Event NameUser actionTechnical trigger
1begin_checkoutContact info section viewedCheckout created in Shopify for that cart
2add_shipping_infoShipping info section viewedCustomer property added to checkout
3add_payment_infoPayment section viewedShipping lines property addded to checkout
PurchasepurchaseOrder completedOrder is created and marked as PAID

You can see how this works for tracking the Google Analytics checkout funnel

Accelerated checkouts

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.

How sever-side tracking works

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:

  1. Contact Information (retroactively added)
  2. Shipping Information (retroactively added)
  3. Payment Method (webhook end-state)

Trade-offs

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:

  1. This method could misrepresent the cases where the users actually started the session in the middle of the funnel by retroactively sending step hits to GA.
  2. Events on the same user checkout beyond the 3-days cut-off will be resent, which could lead to duplicate events sent to GA. However, we believe a 3-days will cover the vast majority of cases for most e-commerce stores.

Segment destination

We send the following checkout step events.

Step 1Step 2Step 3Step 4Complete
User journeyContact info page viewedShipping info page viewedPayment page viewedBank / payment verificationTransaction completed
Actual triggerCheckout created in Shopify's database for that cartcustomer property added to the checkout objectshipping_lines property added to the checkout objectgateway property is added to the checkout objectOrder is created and marked as Paid in Shopify
Segment - Event name 1Checkout Step ViewedCheckout Step Viewed (step 2)Checkout Step Viewed (step 3)Payment Info EnteredOrder Completed
Segment - Event name 2Checkout StartedCheckout Step Completed (step 1)Checkout Step Completed (step 2)Checkout Step Completed (step 3)Thank you Page Viewed*

* The Thank you Page Viewed event was deprecated due to Shopify's new checkout as scriptTags can't be loaded anymore on the checkout.

tip:

Check out a detailed list of all events tracked by our Segment connection.