Google Analytics for Shopify Hydrogen
by Edward
Littledata just launched a no-code setup for Google Analytics for Shopify Hydrogen and other headless stores.
I believe Hydrogen is at an inflection point: I see the larger brands migrating to Shopify from other enterprise platforms (e.g., Salesforce Commerce Cloud, Adobe Commerce) adopting Shopify Hydrogen, and this gold standard is starting to trickle down to other Shopify builds.
In this article, I’ll explain why Hydrogen is gaining traction for larger stores, and why that presents a problem with tracking into Google Analytics and other marketing platforms.
What is Shopify Hydrogen?
Shopify Hydrogen allows developers to create custom online store experiences while still leveraging Shopify’s backend infrastructure. It decouples the storefront from the Shopify checkout, offering complete control over the user interface and experience, while still using Shopify’s product, order, and customer management tools.
Shopify Hydrogen combines best-practice frontend technologies – React, Remix, Tailwind – to allow developers maximum productivity when building a custom storefront. This makes for less boilerplate code, and more time building great customer experiences.
Why are brands launching on Hydrogen?
Brands like Mejuri, Lady Gaga, and Chubbies are choosing Hydrogen for three reasons:
- Maximum flexibility to build a branded shopping experience
- Uses out-of-the-box, Shopify-built components rather than redesigning common storefront elements
- Future-proofs their Shopify investment using the latest development frameworks
It’s not that all larger brands are using Hydrogen – far from it – but it is a very solid choice where you can use senior frontend developers (who want to use React), want to make full use of Shopify, but need to differentiate the shopping experience.
Many people think moving headless with Hydrogen will make the storefront faster, but as this excellent blog from Shopify explains, there are many speed optimisations that Shopify makes to accelerate the native storefront. Shopify Hydrogen is faster than other headless frameworks, but probably neutral on real-world page load speeds compared with a well-optimized Shopify theme.
And what about Hydrogen + Oxygen?
Shopify now provides free Oxygen hosting for one Hydrogen storefront with every paid plan. This removes the headache of having to maintain your own deployment pipeline and hosting, and makes it nearly as easy to maintain as a Shopify theme, except for …
What’s the disadvantages of Hydrogen over a Liquid theme?
While Shopify Hydrogen brings lots of flexibility, there are some major drawbacks when stepping away from a standard Shopify theme, built using Liquid templates:
- No WYSIWYG editor – although Pack is doing a great job building one
- Much less app compatibility. Many apps integrate seamlessly with a Shopify theme, but they can’t work with Hydrogen. This is important for tracking – read below.
- Nascent developer ecosystem. There are few Shopify devs using Hydrogen, and it generally requires a higher level of experience to get started vs editing a theme.
- Less agency experience. Most Shopify dev agencies have an efficient process for building with Liquid, and many elements and themes can be recycled, so choosing Hydrogen will initially be more expensive.
However, I think over the next year, points 3 & 4 will reverse. In the wider web development world, there are many more experienced React and Tailwind developers than there are Shopify Liquid specialists, and a huge ecosystem of React libraries and support.
Why Hydrogen stores need reliable marketing data
Ambitious brands that invest in a Shopify Hydrogen store also want to push their customer acquisition and conversion rate optimisation. That involves tracking the whole customer journey in Google Analytics, along with feeding accurate, attributable conversions into major marketing channels.
To track the whole journey, brands need to combine custom tagging on the Hydrogen-built storefront with reliable tracking across the Shopify checkout.
Why is tracking customers across a Hydrogen storefront hard?
Firstly, none of the standard Shopify marketing channel apps – e.g., Google & YouTube, Facebook & Instagram, or TikTok – will work across the Shopify Hydrogen storefront.
These free apps work by injecting a tracking script into the Shopify theme, and there is no Shopify theme with a headless Hydrogen build.
You could use Google Tag Manager, plus Shopify custom web pixels to track the checkout, but aside from being complex to set up correctly, web pixels have reliability issues, as I’ve written about previously.
How Littledata makes Hydrogen tracking easier
Littledata has built a plug-and-play solution for ambitious brands wanting the flexibility and design of a Hydrogen storefront, combined with uncompromisingly good data for marketing.
Instead of needing to run a tedious tagging project to launch your brands on Shopify Hydrogen, Littledata sets up server-side tracking in all your major marketing channels without you lifting a finger.
Our Advanced Tracking Script is loaded via a custom web pixel onto the Shopify checkout, and this works seamlessly with our proven server-side tracking for Shopify storefronts.
Currently, you would still need custom code to track pre-checkout events, but later this year, Littledata will also provide a Hydrogen SDK to make this easier.
Which marketing channels does Littledata support for Hydrogen?
Currently, Littledata supports:
What about other headless store setups?
Alongside Shopify Hydrogen, Littledata’s tracking will also work for other custom setups such as:
- Headless channel using Storefront API and Next.js, Remix, Gatsby, etc
- Landing pages with a Buy Now button
- Native mobile app using Shopify checkout
- Any pages using Shopify Buy SDK
Any store that is using the Shopify checkout on the same domain as a custom storefront can take advantage of Littledata for no-code server-side tracking.
What’s the future for Shopify Hydrogen?
I’m confident Hydrogen will continue to get momentum as developers experienced in React and associated technologies join the Shopify ecosystem.
That said, Hydrogen is highly opinionated and won’t be to all Shopify developers’ taste. I know a few big Shopify Plus agencies who prefer Next.js for its extensibility and ecosystem.
But if you have the budget and need a differentiated storefront experience, I think Hydrogen presents the quickest way to launch a headless Shopify store.
And Littledata is then the fastest way to set up accurate tracking of the whole Shopify customer journey into your major marketing channels.