page_viewed Analytics events not firing when expected

[danhemerlein]

What is the location of your example repository?

You can create a new Hydrogen project and it will have this issue. Please see the Steps to Reproduce.

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.4

What version of Remix are you using?

2.10.1

Steps to Reproduce

1. npm create @shopify/hydrogen@latest -- --quickstart
2. cd hydrogen-quickstart && npm run dev
3. add the following code to a new file:app/components/ThirdPartyAnalyticsIntegration.tsx

import {useAnalytics} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function ThirdPartyAnalyticsIntegration() {
  const {subscribe, register} = useAnalytics();
  const {ready} = register('Third Party Analytics Integration');

  useEffect(() => {
    subscribe('page_viewed', (data) => {
      console.log('ThirdPartyAnalyticsIntegration - Page viewed:', data);
    });

    ready();
  }, []);

  return null;
}

4. Invoke ThirdPartyAnalyticsIntegration in app/root.tsx like so:

<Analytics.Provider
     cart={data.cart}
     shop={data.shop}
     consent={data.consent}
>
     <PageLayout {...data}>
          {children}
          <ThirdPartyAnalyticsIntegration />
     </PageLayout>
</Analytics.Provider>

4. View the site in a new window or tab.

I want to note that I followed these docs to link a Shopify store. So I'm not using mock.shop

notes on my environment:
Node - v21.7.3
npm - 10.5.0

Expected Behavior

The page_viewed event should fire and call its callback when the page is viewed for the first time in a new tab or window.

Actual Behavior

Open browser console, the trace statement from the page_viewed callback does not appear on hard refresh, but does appear on soft refresh and normal page navigation. The page_viewed does not fire when the site is viewed from a new tab or window. However, the initial page view event will fire when you navigate to another page. This behavior is demonstrated in this video:

https://share.zight.com/QwuJYpGR

Additional Context:

Based on our experience with when this surfaced on our Hydrogen project, and in testing it on different versions of Hydrogen, we believe it might have come from the 2024.4.4 release. Looking at those release notes, we're wondering if it might have been unintentionally introduced in PR #2224. That said, while we see analytics-related changes, we aren't seeing any obvious changes to the page_viewed event. We could definitely be wrong, but just thought we'd share that in case it helps you track it down!

Happy to answer any questions. Thank you for any and all help when looking into this!

[scottdixon]

Thanks for reporting this @danhemerlein. The screen recording was super helpful.

Can you confirm env.PUBLIC_CHECKOUT_DOMAIN is set?

I'm able to replicate inconsistencies when env.PUBLIC_CHECKOUT_DOMAIN isn't set. Feels like a race condition (can only consistently replicate when throttling a hard refresh). Always fires when navigating regardless of env var.

cc) @wizardlyhel

[danhemerlein]

hey @scottdixon, thanks very much for looking into this. I did not have env.PUBLIC_CHECKOUT_DOMAIN set and, you're right, setting that variable does alleviate the bug in most scenarios.

However, even with the env var now set, it still seems like the callback or event are not running on the very first time the site is loaded in a new tab or window. The site exhibits the same behavior from the screen recording where there's no console.log on initial page load but both page view events do run once the site is navigated once or refreshed. I agree that it feels like a race condition.

Here's a screen recording of the behavior I'm seeing now that I've set the variable
https://s.chord.co/X6ujDd71

[ihome-wangfanyu]

Is there any effective progress on this issue? I am also encountering the same situation now.

[grygielj]

Any progress on that? We're facing the same issue

[RafaelAiminity]

This issue still persists for me as well, any updates/solutions?

[RafaelAiminity]

I found what it was causing this issue in my app. I was adding some script for 3rd party integrations (they were set as dangerouslySetInnerHTML) and one of the scripts was overidding variable Shopify which holds the function for cookies consents. Even though my app doesn't need consent because we are selling only to US, there were no errors but events were not firing.
I discovered this by playing around with Analytics.provider component and trying to hardcode true as return to canTrack prop - see docs here