Getting Started: Headless Shopify to Segment connection

This guide highlights the install steps for Littledata's Shopify to Segment connection on a headless Shopify store.

tip:

Step 2 onwards are also covered in more detail in our Headless Demo site

Step 1

On the Add snippet step, selectthe headless set up box then click NEXT.

Step 2

Add the Segment Tracking Tag to the < head > of your custom front-end.

Step 3

Add pre-checkout event tracking (e.g. track clicks of the Add to Cart button, Collection or Product page views). Follow the Enhanced Ecommerce specs for Segment.

Step 4

Get the anonymous ID from the browser for Littledata to link server events with browser pageviews. See how we get the anonymous ID for Segment before the user clicks 'Add to cart', or try the 'Buy Now' button above to see it in action.

Step 5

Sent that anonymous ID in the checkout customAttributes. Shopify allows you to update the checkout customAttributes array only after a checkout ID is created. In this NodeJS example see how we set the checkout customAttributes* as [ { key: "_segment-clientID, value: "4e03ea34-7080-4fc9-8fed-7fd1c6313d29" } ].

Step 6

You have successfully connected Shopify to Segment.