When migrating to Hydrogen, there are a number of small issues to consider, which Fueled has seen brands forget about until after they go live. Here’s a list of gotchas that brands should plan for when migrating to Hydrogen.
Client-Side URL Redirects
For Shopify Liquid Storefronts, you can set up server-side redirects. If a shopper hits an old URL, Shopify automatically renders the new URL as part of the response.
With Hydrogen, these redirects are typically handled client-side. For example, if someone clicks a link to shop.example.com/product/xyz, that URL will load, and then redirect to www.example.com/product/xyz.
These redirects can break attribution. For example, Google Analytics (and even Shopify Analytics) will see the referring URL as shop.example.com/product/xyz, not the URL of the advertisement or external link that sent the traffic to your website. This will lead to a high level of traffic being attributed as “Direct.”
Where Do Client-Side Redirects Impact Hydrogen Sites?
This issue can surface in a number of places:
-
Google Merchant Center and Other Catalog Feeds For some reason, when you migrate to Hydrogen, Shopify uses the checkout URL for the product URL in its built-in integrations with Google Merchant Center, Facebook Catalog, TikTok Catalog, and so forth.
There is no solution for this out of the box. Brands really need to leverage a dedicated Product Feed Management tool like Feedonomics, GoDataFeed, or DataFeedWatch.
- Klaviyo’s Product Catalog The same issue impacts Klaviyo’s built-in Shopify product catalog. However, you can email Klaviyo support, and they can resolve the issue on their end.
-
New Product URL Paths A lot of merchants are excited to launch SEO-friendly product URLs that include human-friendly variant names as URL paths and search strings, as opposed to the standard Shopify Liquid URL pattern of
/product-name?variant=1234567.However, you need to make sure that the old URL paths are still routed to the new product URLs to avoid 404 errors. Again, be mindful of client-side redirects that can break attribution.
- Site Map URLs Note: You will also need to consider these URL pattern changes in your Hydrogen site map.
Shopify Analytics Cookies Are Set Client-Side
When leveraging Shopify Liquid Storefront, Shopify’s _shopify_y cookie is set with a header request when a page loads. As such, it’s an ITP compliant cookie (i.e., persists for up to 12 months on iOS 17 devices).
But for Hydrogen sites, this cookie is set client-side, in the browser. As such:
- It’s not compliant with iOS 17 and will be deleted after 7 days of inactivity.
- It cannot be used as a persistent identifier by ID graphs, like Klaviyo’s new ID Graph.
Solution: Fueled has worked with Pack to set our own iOS 17 compliant cookie. We use this cookie for our ID Graph to extend attribution windows. Brands can generate and set server-side cookies too, with a little bit of Node.js code.
Cookie Domains
For Shopify Liquid Storefronts, the website experience and checkout are managed on the same subdomain. This isn’t the case with Hydrogen sites, as described above.
As a result:
- Developers need to ensure that cookies are set on the root domain, not the subdomain for the site.
- This can affect the
_shopify_ycookie as well, breaking Shopify Analytics’ tracking between the content site and checkout.
localStorage Variables
localStorage variables are set per subdomain. They do not support cross-subdomain use cases. This needs to be considered for JavaScript libraries that use localStorage variables.
Solution: Extra steps need to be taken to pass data server-side to support localStorage variable data being passed between www.* and shop.*.
Attribution
This article was written by Fueled, Pack's partner and a leading agency specializing in collecting and organizing 1st-party eCommerce customer data. For more information, visit their homepage.