Analytics: product_added_to_cart event not recorded for some storefronts

[tylerscave]

What is the location of your example repository?

We have implemented the latest Shopify Analytics similar to what was done here: https://github.com/Shopify/hydrogen

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.2

What version of Remix are you using?

"@remix-run/react": "^2.9.2",

Steps to Reproduce

Our implementation of Hydrogen uses different Shopify stores for various markets that we operate in. Our main US store is where our site is deployed (through the Hydrogen Sales Channel) and all of our other stores use the Headless Sales Channel to get Storefront API access.

We create and use the Storefront Client conditionally in server.ts based on the locale path variable. A generic implementation of this looks like the following:

       /**
       * Create Hydrogen's Storefront clients.
       */
      const storeLocale = getStoreLocale(i18n);
      let storefront: Storefront;
      if (storeLocale === StoreLocale.CA) {
        // The CA Store using the Headless Sales Channel
        storefront = createStorefrontClient({
          cache,
          waitUntil,
          i18n,
          publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN_CA,
          privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN_CA,
          storeDomain: `https://${env.PUBLIC_STORE_DOMAIN_CA}`,
          storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION,
          storefrontHeaders: getStorefrontHeaders(request),
          storefrontId: env.PUBLIC_STOREFRONT_ID,
        }).storefront;
      } else {
        // The main US Store using Hydrogen's Storefront API
        storefront = createStorefrontClient({
          cache,
          waitUntil,
          i18n,
          publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN_US,
          privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN_US,
          storeDomain: `https://${env.PUBLIC_STORE_DOMAIN_US}`,
          storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION,
          storefrontHeaders: getStorefrontHeaders(request),
          storefrontId: env.PUBLIC_STOREFRONT_ID,
        }).storefront;
      }

Notice that many of the ENV variables change based on locale, but only one instance of PUBLIC_STOREFRONT_ID exists (generated by the Hydrogen Sales Channel, so it is currently used for ALL of our stores...

When adding products to the cart, the product_added_to_cart event consistently fires for ALL of our Shopify stores, but those events are not being recorded in Shopify stores using the Headless Sales Channel for Storefront API access.

Main US store using the Hydrogen Sales Channel:

CA store using the Headless Sales Channel:

Expected Behavior

We expect to see Add to Cart sessions in ALL of our Shopify Admin Analytics dashboards (ie for ALL of our stores)

Actual Behavior

We are only seeing Add to Cart sessions for our main US store. This Storefront is where our Oxygen/Hydrogen deployment happens and is using credentials from the Hydrogen Sales Channel.

All other stores using the Headless Sales Channel for Storefront API access fire the product_added_to_cart event, but there are zero Add to Cart sessions recorded for those stores (other analytics seem to be coming through normally)

[wizardlyhel]

The add to cart session count doesn't work with access tokens created by headless channel.

If you are just changing the env variables across different market, why not have 2 Hydrogen storefronts?

• US domain -> Hydrogen storefront 1
• CA domain -> Hydrogen storefront 2

[tylerscave]

Interesting... I didn't realize that was an option...

We do not need most of the things that the Hydrogen Sales Channel offers since we would only have a single deployment out of our main US Storefront, and for the other markets we really just need Storefront API credentials.

That said, it feels like overkill, but I suppose I could still use a Hydrogen Sales Channel in the other markets to create the Storefront API credentials I need and just have no deployments.

I will try to test this out this week, and will close the ticket if that turns out to be successful. Thanks for the quick reply!

[wizardlyhel]

You can have single code base and deploy to multiple storefronts. Our own mono repo deploys to multiple storefronts in this ci deploy workflow. We just need to supply a mapping of deploy tokens. https://github.com/Shopify/hydrogen/blob/main/.github/workflows/deploy-examples.yml#L57-L65

[tylerscave]

Hmm.. I might be misunderstanding, but your example seems to be showing how to deploy multiple apps out of a single deployment workflow (and I'm assuming to multiple domains), and we want to do sort of the opposite.

We have a single app deployed to a single domain (www.pax.com). We have multiple Shopify stores that have different products based on the region. When a user changes their locale, we just need to change the store that is being used, but it will use the same app and should be deployed to the same site (ie www.pax.com/en-ca/).

We started this project at the bleeding edge of Shopify Hydrogen, and there wasn't really any documentation on setting up a multi-region storefront using multiple stores, so we cobbled things together on our own. Our solution with a single Hydrogen instance in our main store and multiple Headless instances in our other stores for API access works great with the exception of Shopify Analytics...

If the way we have our project setup is incorrect, is there any documentation on the correct way to do this?

Any clarity on this whole situation is definitely appreciated. Thanks 🙏

[wizardlyhel]

okay . so what you have is

Shopify store	Url	Channel
PAX US	pax.com	Hydrogen
PAX CAN	pax.com/en-ca	Headless

Code is hosted by Hydrogen and the env gets swapped out when url path starts with /en-ca/.

If you want a quick workaround, you can create a Hydrogen channel in PAX CAN and copy over the env vars back to PAX US and continue with what you have for swapping out the env vars. This would allow the add to cart analytics to work in your multi-region stores.

There isn't really an official path to handle mutli-storefront .. but more like there is multiple way to do the exact same thing:

Option 1: Deploy same code base to both stores under Hydrogen channel. This would only work if you can assign different root level domain urls to your other stores (ie. pax.ca or ca.pax.com for PAX CAN) and simply do a url redirect when user chooses their region.

Option 2: Turn on Shopify markets and merge 2 Shopify stores into 1 Shopfiy store. Shopify markets handles may aspects of internationalization for you. However, this might not be possible for your particular case. The benefit of this path is that you can switch market by simply passing country in the inContext in the graphql to Storefront API to change market.

[tylerscave]

Thanks for the info!

Options 1 and 2 both don't really work for our use cases, so I am planning on trying the other option you mentioned:

create a Hydrogen channel in PAX CAN and copy over the env vars back to PAX US and continue with what you have for swapping out the env vars. This would allow the add to cart analytics to work in your multi-region stores.

🤞

[tylerscave]

We moved from Headless to Hydrogen for all of our store instances and updated our env variables accordingly... This seems to have solved the issue!

Thanks for the help @wizardlyhel 🙏