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

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

Step 1

Install the Littledata app, and on under the Manual route tick the Select for headless Shopify store set up box, then click NEXT

 

Step 2

Add the Google Analytics tag to the <head> of your custom front end. This is needed in step 4, to allow Littledata to track checkouts and orders for your headless setup.

Step 3

For Littledata to link server events with browser pageviews, you need to get the client ID from the browser. See how we get the client ID for Google before the user clicks 'Add to cart', or try the 'Buy Now' button here to see it in action. Using Nacelle? There is an NPM package to do this.

Step 4

Send that Client ID in checkout customAttributes - Shopify allows you to add a customAttributes array to the checkout (or attributes via the Cart API). In this NodeJS example see how we set the customAttributes as [ { key: "google-clientID", value: "1641620420.1623829132" } ] .*

* Alternatively you could set these attributes via the Cart API, which then gets passed into the checkout

Step 5

Your headless setup is complete! Our servers pick up the checkout and order events via webhooks - you don't need any scripts on the checkout or thank you pages. As a further improvement you could add event tracking for pre-checkout browsing behavior (e.g. Track clicks of the Buy button). Follow the Enhanced Ecommerce specs in Google.