Working with a headless Shopify setup

Littledata's server-side tracking is fully compatible with a headless storefront. If you are using Shopify as a core ecommerce platform but are not using Liquid templates then Littledata's app can still track the checkout steps and purchases out the box.

What headless frameworks are supported?

We have customers using Littledata with the following frameworks:

• Shopify Hydrogen
• Shogun Frontend
• Nacelle
• NextJS
• GatsbyJS

How it works

Our tracking works with a headless store because our app gets webhooks for checkout updates, orders, refunds and more that trigger events in Google Analytics (or Segment), even if the tracking script is not on the checkout or thank you page.

The part of our storefront tracking script that you need to implement yourself is to get the client ID (the cookie identifier) from the pre-checkout page and send it as a checkout attribute to Shopify. This enables our app to link the pre-checkout user session with the webhooks from Shopify.

Any pre-checkout events will need to be tracked manually by your developers using gtag or analyticsJS libraries.

We've built a Demo Headless Store to show you how that works.

Using the Shopify checkout as a cart

If you are using the using the Shopify checkout as a way to persist the cart contents then you'll need to contact us, as add to cart actions may appear as Checkout Started in the analytics destination. This is a side-effect of how we track checkouts.

Next steps

1. See our headless tracking demo
2. Follow installation steps for a headless store