remix hydration error when using gtag #9231

pullmann4rent · 2024-04-15T01:06:19Z

Reproduction

Root

import * as gtag from "~/utils/gtag";

export default function App() {
  const { showBanner, gaTrackingId } = useLoaderData<typeof loader>();

  const location = useLocation();

  useEffect(() => {
    if (gaTrackingId?.length) {
      gtag.pageview(location.pathname, gaTrackingId);
    }
  }, [location, gaTrackingId]);


  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}></script>
     
        <script async dangerouslySetInnerHTML={{ __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${gaTrackingId}');
              `
          }} />

      <Suspense fallback={null}>
        <script async dangerouslySetInnerHTML={{ __html: `
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','xxxx');
                      `
                  }} />
        </Suspense>


        <Meta />
        <Links />
        <ExternalScripts />
 
     
      </head>
      <body>
      <>
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=XXXX"
height="0" width="0" style={{display: 'none',visibility:'hidden'}}></iframe></noscript>

        <Whatsapp />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export async function loader({ request }: LoaderArgs) {
  const cookieHeader = request.headers.get("Cookie");
  const cookie = await userPrefs.parse(cookieHeader);
  return json({ showBanner: cookie ?? null, gaTrackingId: 'xxx' });
}

gtag util

declare global {
  interface Window {
    gtag: (
      option: string,
      gaTrackingId: string,
      options: Record<string, unknown>,
    ) => void;
  }
}

/**
 * @example
 * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 */
export const pageview = (url: string, trackingId: string) => {
  if (!window.gtag) {
    console.warn(
      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
    );
    return;
  }
  window.gtag("config", trackingId, {
    page_path: url,
  });
};

/**
 * @example
 * https://developers.google.com/analytics/devguides/collection/gtagjs/events
 */
export const event = ({
  action,
  category,
  label,
  value,
}: Record<string, string>) => {
  if (!window.gtag) {
    console.warn(
      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
    );
    return;
  }
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 AMD FX(tm)-4170 Quad-Core Processor
    Memory: 1.75 GB / 7.98 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @remix-run/css-bundle: ^2.0.1 => 2.7.1
    @remix-run/dev: ^1.15.0 => 1.19.3
    @remix-run/eslint-config: ^1.15.0 => 1.19.3
    @remix-run/express: ^1.15.0 => 1.19.3
    @remix-run/node: ^1.15.0 => 1.19.3
    @remix-run/react: ^1.15.0 => 1.19.3
    @remix-run/serve: ^1.15.0 => 1.19.3
    @remix-run/vercel: ^1.15.0 => 1.19.3

Used Package Manager

npm

Expected Behavior

That I got no hydration err

Actual Behavior

Google analatiycs works but not google tag manager. I got hydration error when I use this code:

      <Suspense fallback={null}>
        <script async dangerouslySetInnerHTML={{ __html: `
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','xxxx');
                      `
                  }} />
        </Suspense>

The text was updated successfully, but these errors were encountered:

suhaotian · 2024-04-26T11:58:56Z

To fix this, we recommend the using the ClientOnly component in the remix-utils community package. An example of its usage can be found in the examples repository.

pullmann4rent added the bug:unverified label Apr 15, 2024

brophdawg11 added the hydration label Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remix hydration error when using gtag #9231

remix hydration error when using gtag #9231

pullmann4rent commented Apr 15, 2024 •

edited

suhaotian commented Apr 26, 2024 •

edited

remix hydration error when using gtag #9231

remix hydration error when using gtag #9231

Comments

pullmann4rent commented Apr 15, 2024 • edited

Reproduction

System Info

Used Package Manager

Expected Behavior

Actual Behavior

suhaotian commented Apr 26, 2024 • edited

pullmann4rent commented Apr 15, 2024 •

edited

suhaotian commented Apr 26, 2024 •

edited