`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

[elkelk]

@RafaelAiminity we are experiencing something similar. Would you mind sharing which specific script you encountered that was overwriting the Shopify object?

[RafaelAiminity]

@elkelk We are using platform called videowise, and in their scripts for initializing (it was just HTML <script> element with some options that was supossed to be added into head) they had config object which was literally called shopify.
var Shopify = { cartType: 'Shopify', shop: 'shop.myshopify.com', currency:'USD', currencyRate:'1', pid: null };
Since they were declaring variable shopify which was already defined by Hydrogen, I got JS error that variable Shopify can not be redeclared. To fix that I just removed variable declaration, so now it override Shopify variable from Hydrogen and all methods and properties for analytics were overwritten, which caused all events to not fire (and really hard to debug)
Shopify = { cartType: 'Shopify', shop: 'shop.myshopify.com', currency:'USD', currencyRate:'1', pid: null };

Hope this helps, if you need some more help, feel free to DM me or respond here :D

[elkelk]

@RafaelAiminity Thanks a ton! I think we've found our culprit. For us it was consent + data layer scaffolding. We had to move our data layer definition higher up on the page to avoid a timing conflict which was blocking the standard Shopify page view. I appreciate you getting back to me!

[lluisgassovillarejo]

Hey! We are still observing this issue (for context, I work with @elkelk).

In our case, we had the component (which is the third party analytics that subscribes to the Analytics.Provider events) below the , and we though this was causing the issue. We updated it, but it didn't resolve it.

We think the issue is related to the native consent banner. On very fast pages, that don't load critial data, it seems like the banner doesn't load on time, and somehow the Analytics.Provider skips the page_view event. We tried moving the third party call to ready() inside an event listener for the "visitorConsentCollected", but that didn't work.

As a side note, it always works in our development environment with both yarn dev and yarn preview.

[RafaelAiminity]

@lluisgassovillarejo We do not need consent since website is US only. One idea that might help is that I have added ready and subscribe functions as dependency to useEffect. This is how all my custom analytics looks like, maybe it will help!

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

export default function CustomAnalytics() {
    const { subscribe, register } = useAnalytics();
    const { ready } = register('Custom Analytics Tracking');

    useEffect(() => {
        subscribe(AnalyticsEvent.PAGE_VIEWED, (event) => {
             // Your tracking logic goes here
        });

        ready();
    }, [ready, subscribe]);

    return null;
}

LMK if this makes sense, I have 5-6 3rd party integrations, that work just fine. They never subscribe to all events, just these few most often (add to cart, page view, product viewed).

[elkelk]

@lluisgassovillarejo We do not need consent since website is US only. One idea that might help is that I have added ready and subscribe functions as dependency to useEffect. This is how all my custom analytics looks like, maybe it will help!

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

export default function CustomAnalytics() {
    const { subscribe, register } = useAnalytics();
    const { ready } = register('Custom Analytics Tracking');

    useEffect(() => {
        subscribe(AnalyticsEvent.PAGE_VIEWED, (event) => {
             // Your tracking logic goes here
        });

        ready();
    }, [ready, subscribe]);

    return null;
}

LMK if this makes sense, I have 5-6 3rd party integrations, that work just fine. They never subscribe to all events, just these few most often (add to cart, page view, product viewed).

Yes we are doing this. Unfortunately, there are no examples on how to tie this into the consent banner in a way that works for the page viewed event that actually works on performant pages. They seem to get into a race condition. The page viewed event fires sporadically on initial load.