Some more questions about Hydrogen | Persistence and Analytics

[JOKeRiino]

Hi, I've been playing around with Hydrogen for some time now and was wondering about a few things I wasn't able to find resources/answers to yet.

So I've build react based e-com apps in the past and usually used redux-persist to locally store the cart data for convenience/UX. I noticed that Hydrogen saves the cart as well but I wasn't able to find anything about it in the docs? Where can I see (in the code), where and how the data is stored? Is there documentation for this?

Also two questions about GDPR/Analytics. So first of all, I can see in my Shopify Dashboard (Analytics) that Hydrogen automatically generates and sends usage data to Shopify. How would I go about implementing a cookie banner with cookie control on the page. Can I do this through the Shopify app store (and if yes, how?), or can it only be done with libraries such as "react-cookie-consent"?
tyia

[wizardlyhel]

For now, all Shopify specific analytic instrumentation is on an opted-in bias. You, as a developer, can lazy include the <ShopifyAnalytics /> (working PR #1325) and the <PerformanceMetrics /> behind a cookie consent interaction.

At the moment, Hydrogen cannot integrate with Shopify app store's apps unless those vendors have their own api to make it happen.

I have not use a react-cookie-consent package before but from the looks of it, it would need to be a client component. Once the user accepts the consent, a refresh would need to be triggered so that the analytics are setup. Let me know what kind of feature you would need to make this happen. I think we might need a way to hold event publish until a consent is given.

This is a doc that i have written about how analytics is being gathered on the server side and made available on the client side for consumption.

https://shopify.dev/custom-storefronts/hydrogen/framework/analytics

The main key files you want to look at are:

• Analytics.server.tsx - where we wait for all React concurrent renders to complete so that we can collect all the analytics we want from server side renders (Note: A fix is in progress Shopify analytics 2 #1325)
• Analytics.client.tsx - where we make all server-side collected analytics available on the client side into the ClientAnalytics object and fire a page view event.
• ClientAnalytics.client.tsx - where you can subscribe and publish analytics events

As for cart data, we simply made the return data you specify in graphQL available through the ClientAnalytics object where you can subscribe to the analytics event.

• CartProvider.client.tsx