Analytics is now stable

[scottdixon]

Implementing analytics with Hydrogen is simpler, more reliable, and more extensible.

Rolled out as unstable in our April release, the new analytics DX is now stable. The new Analytics components are now included by default in new Hydrogen projects, and works out of the box with the Customer Privacy API and Shopify’s built-in cookie consent banner.

[jamalsoueidan]

Do we need to make any changes to unstable code we implemented before? Is there any breaking changes? @scottdixon

[scottdixon]

Hey @jamalsoueidan! I don't believe there were any breaking changes. You should be able to switch <UNSTABLE_Analytics> to <Analytics> and unstable_useAnalytics to useAnalytics. Docs have been updated with the new analytics: https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/tracking

[iska31]

What is your recommendation to track a customer from Hydrogen app through the whole Checkout until the the Thank you page in a seamless way? It is easy on Shopify vanilla with webpixel, but there is no documentation for headless about that for Hydrogen.

[coryyeakelacdc]

What if you just do this?

This did the trick! Removing storefrontRootDomain was the solution here. Thank you so much for the help and the quick responses, @wizardlyhel!

While we're on the subject, I do have one quick follow up question if you don't mind?

I'm developing this project for agency use, so I expect we'll have clients who will want to customize the look of the banner beyond what the Shopify Admin settings allow. Do you think it's viable long-term to target the IDs and classes of the banner with our own CSS? Or perhaps better, if possible, is there a way to get the banner settings through some method of this API, so that we can construct our own banner component entirely? (by banner settings, I mean things like the text that the user enters for cookie banner and cookie preferences, so that we can still allow our clients to edit the text for the banner rather than hard coding it in our own component)

Also, just to confirm your follow up messages - yes I'm loading the storefront-banner.js script which contains the banner code, and I will be sure the override setTrackingConsent as well!

[wizardlyhel]

I'm developing this project for agency use, so I expect we'll have clients who will want to customize the look of the banner beyond what the Shopify Admin settings allow. Do you think it's viable long-term to target the IDs and classes of the banner with our own CSS? Or perhaps better, if possible, is there a way to get the banner settings through some method of this API, so that we can construct our own banner component entirely? (by banner settings, I mean things like the text that the user enters for cookie banner and cookie preferences, so that we can still allow our clients to edit the text for the banner rather than hard coding it in our own component)

While not recommended but I also don't see this will get updated that often. Targeting css classes should be fine. The only thing that I would be wary of text modification is when you have banner text in different languages

[coryyeakelacdc]

@wizardlyhel Got it, thanks! I assume then that there's no way to receive the text the user enters through the API? (if we wanted to try to create a custom banner component to render it)

[wizardlyhel]

No that's not possible

[coryyeakelacdc]

@wizardlyhel Noted. Thank you again for all the help on this!

[coryyeakelacdc]

@wizardlyhel I'm following up on our chain of comments above with a few observations now that I've had a chance to implement the the Customer Privacy API and Shopify’s built-in cookie consent banner. Can you help me clarify whether my experience has been expected, or whether there are issues to be addressed?

For context, I'm working on a non-Hydrogen headless site using Next.js.

Here's what I'm doing:

• Load the script for the Customer Privacy API bundled with the Shopify Cookie Banner
• On load of script, load the cookie banner using loadBanner() as instructed here
• On load of script, override setTrackingConsent() as instructed here
• Add an event listener for the visitorConsentCollected event as documented here

Here's the actual implementation to show that I've followed everything as instructed:

<Script 
  src={SHOPIFY_CUSTOMER_PRIVACY_API_WITH_BANNER} 
  onLoad={() => {
    // Load banner.
    if (!window.privacyBanner) {
      return
    }
    window.privacyBanner.loadBanner({
      checkoutRootDomain: 'my-subdomain.myshopify.com',
      storefrontAccessToken: 'MY_PUBLIC_ACCESS_TOKEN'
    })

    // Override tracking consent function.
    if (!window.Shopify?.customerPrivacy?.setTrackingConsent) {
      return
    }
    const originalSetTrackingConsent = window.Shopify.customerPrivacy.setTrackingConsent
    const handleTrackingConsent = (consent, callback) => {
      console.log('This never gets logged.')
      const args = {
        ...consent,
        headlessStorefront: true,
        checkoutRootDomain: 'my-subdomain.myshopify.com',
        storefrontAccessToken: 'MY_PUBLIC_ACCESS_TOKEN'
      }
      originalSetTrackingConsent(args, callback)
    }
    window.Shopify.customerPrivacy.setTrackingConsent = handleTrackingConsent
  }} 
/>

I am able to load the cookie banner, and when using the banner, I can see that a GraphQL call goes out to the Customer Privacy API with my preferences, and my _tracking_consent cookie is correctly updated.

However, I noticed the following two potential issues:

• My override of setTrackingConsent doesn't seem to do anything. I added a console.log inside the function to observe it being called, but it never gets logged. However, I can see the function is set if I inspect window. Is there some other way I can verify my override is working? For what it's worth, when I remove my override, I get the same result. The API call is still made, I still receive a visitorConsentCollected event, etc.
• The doc on the visitorConsentCollected event states Updates are published only when consent changes, not when the listener is added. However, I do receive an event on initial render. Is this a bug?

[wizardlyhel]

What you are observing sounds correct.

The override of window.Shopify.customerPrivacy.setTrackingConsent is purely for connivence if you ever need to execute window.Shopify.customerPrivacy.setTrackingConsent({ ...consent}) in other useEffect or within the javascript console log when testing around. Otherwise, it would try to make a fetch an unstable endpoint graphql call to your shop domain (not the checkout one). This is for the case when you need to handle integration of other 3p consent cookie banner integrating with Shopify's customer privacy api. https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p

When using Shopify's privacy banner, you will get a visitorConsentCollected event on privacy banner load. This is not a bug.

How to validate the consent is working?

When consent is loaded, _cmp_a cookie will be applied to the domain:

This should reflect whatever the setting the Shopify privacy banner defaulted to or if you ever run window.Shopify.customerPrivacy.setTrackingConsent({...consent}), it would be the consent setting you set.

This cookie value should stay the same when navigated to checkout. If it is not matching or consent setting is being reverted back to default, check the cookie domain. (I got a PR coming to auto detect cookie domain (that sets the storefrontRootDomain properly).

[jamalsoueidan]

@wizardlyhel How do we set the language of the consent banner? Right now its always in english, and my shop if in 3 language :) Can we manually set the language somewhere?

[wizardlyhel]

I just double checked this. At this moment, we can't get the translated cookie banner when using it in headless mode. It's a product gap. Don't know the timeline for getting this fixed since it is part of another team.

[jamalsoueidan]

@michenly, can you forward this to the other team? We need to be able to change the consent banner. It looks bad for Danish visitors when the whole shop is in Danish, but the cookie banner is in a different language.

[dvnrsn]

Edit: ignore everything else. I'm simply wondering at this point where in shopify analytics I should be seeing search_submitted and others (see reply below)

---

Should using UNSTABLE_Analytics.Provider and UNSTABLE_Analytics.SearchView work with ^2024.4.2 because after introducing both I am not seeing any desired network requests 🤔

I followed the guide and my consent and shop values are true. I also did see the default Hydrogen consent box and agreed to it.

I also confirmed the component is getting the desired data props

Finally, where would I see these in shopify analytics? I'm guessing Top online store searches

Edit: after upgrading to "@shopify/hydrogen": "^2024.4.3", I still don't see data or requests that I would expect..

[dvnrsn]

Now that I'm looking at it a little more I'm noticing what I believe is the correct network request to monorail-edige.shopifysvc.com/unstable/produce_batch

Should this be informing Top online store searches in shopify analytics and also should the results exist in the request?

[arshmalikrs]

Currently this

hydrogen/packages/hydrogen-react/src/analytics-schema-custom-storefront-customer-tracking.ts

Line 224 in e432533

hydrogenSubchannelId: payload.storefrontId || '0',

will always set hydrogenSubchannelId to "0", shouldn't this be updated to hydrogenSubchannelId: payload.hydrogenSubchannelId || '0' since that is what will be set when the Analytics Provided is initialised?

[dvnrsn]

Apparently I'm missing some relevant headers in my use of

<Analytics.SearchView
  data={{searchTerm: q, searchResults: page.results}}
/>

I'm curious. Do I need to be invoking this hook? useShopifyCookies

I am using the provider

  <Analytics.Provider
    cart={data.cart}
    shop={data.shop}
    consent={data.consent}
    cookieDomain="mydomain.com"
  >