Getting Started: Headless Shopify to Google Analytics connection
Updated on 2023-09-08This guide highlights the install steps for Littledata's Shopify to Google Analytics connection on a headless Shopify store. First, please read how headless tracking works.
Step 2 onwards are also covered in more detail in our Headless Demo site
Step 1
Install the Littledata app, choose the Manual headless route then click NEXT.
Step 2
Add the Google Analytics tag to the <head> of your custom front end. This is needed for 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 and session IDs from the browser. To accomplish that easily, you can use Littledata Headless Shopify SDK. You need to call the fetchClientIds method after you load the Google Analytics 4 tracking tag. This method returns customAttributes array prepared for sending to Shopify Checkout. See how we get the client and session IDs for Google Analytics 4 before the user clicks 'Add to cart', or try the 'Buy Now' button above to see it in action. Also, please read the Littledata SDK documentation for the additional instructions and details about the setup.
Using Nacelle? There is an NPM package to do this.
Step 4
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: "_ga4session-clientID, value: "1694187758" },{ key: "_google-clientID, value: "1024235804.1689252425" } ]. For added precision and tracking reliability, you should also send the received checkout ID to the Littledata server. In this example you can see how we are doing that by using sendCheckoutToLittledata method from the Littledata SDK.
Step 5
Your headless setup is complete! Our servers pick up the checkout steps 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.