Third-party analytics in Hydrogen not firing on page navigation

[stevenbister]

What is the location of your example repository?

https://github.com/stevenbister/hydrogen-gtm-example

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.3

What version of Remix are you using?

2.9.2

Steps to Reproduce

When the repo above is running, open the console
Navigate to any product page

Expected Behavior

I would expect to see the subscription data to be logged to the console and the event pushed to the datalayer

Actual Behavior

Nothing happens unless I forcibly refresh the page

Screen.Recording.2024-06-07.at.16.22.48.mov

Not sure if I'm missing something but seems like this should fire whenever the page location changes?

[wizardlyhel]

I can't reproduce the issue you are showing me.

I ran npm create @shopify/hydrogen@latest -- --template gtm and updated the example with the same updates you modified in the repo you shared.

Did you run h2 env pull after you linked to your storefront? Is there a PUBLIC_CHECKOUT_DOMAIN env var defined?

[stevenbister]

Ahh I don't think I ran h2 env pull but yeah I have the checkout domain set, so maybe that's wrong. I'm on holiday at the moment but will double check when I'm back in about a week

[stevenbister]

Hello @wizardlyhel thanks for your patience. So I ran npx shopify hydrogen env pull after linking my store (I couldn't get h2 env pull to run, unless I've missed some step?) The checkout domain wasn't generated though

PUBLIC_STOREFRONT_ID=
PUBLIC_STOREFRONT_API_TOKEN=
PUBLIC_STORE_DOMAIN=
PRIVATE_STOREFRONT_API_TOKEN=
PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=
PUBLIC_CUSTOMER_ACCOUNT_API_URL=
SESSION_SECRET=

I've manually added the checkout domain, which I believe is the same as the PUBLIC_STORE_DOMAIN?

But still getting the same issue :/

[wizardlyhel]

Follow this doc to setup consent in Shopify admin - https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent

PUBLIC_CHECKOUT_DOMAIN is most likely not the same as public store domain. Navigate to your checkout page and that domain url is your PUBLIC_CHECKOUT_DOMAIN. Upgrade your project to 2024.4.6, there are a couple fixes included that may help you

I couldn't get h2 env pull to run

Are you linked to a Shopify storefront? You can run npx shopify hydrogen link to link to your storefront, only then, hydrogen env pull can work

[stevenbister]

Ahh okay managed to get this working, it was user error 😅

So I had the canTrack prop set in the Analytics.Provider set like this

<Analytics.Provider
    cart={data.cart}
    shop={data.shop}
    consent={data.consent}
    canTrack={() => {
         return true;
    )}
>

Where it needs to be

<Analytics.Provider
    cart={data.cart}
    shop={data.shop}
    consent={data.consent}
    canTrack={() => {
       try {
           return true;
       } catch (e) {}
       
      return false
    )}
>

I missed the comment in the docs that says this needs to only run on the client