Google Tag Manager without hydration errors #8741

Mr-Ples · 2024-02-12T23:13:04Z

Mr-Ples
Feb 12, 2024

when using google tag manager I get hydration error warning spam and my hot reload breaks the css for every change so i have to refresh.

after many hours of searching: tried partytown, tried ClientOnly, tried delaying script fire (which works but unreliable for slower connections), tried using gtag and giving up on gtm (it works but its not worth it because gtm has many integrations), tried using ExternalScript from remix-utils, tried just living with the errors on production but not firing on dev, tried suppressHydrationError keyword in script tags.

in the end the cute trick that worked was Suspense:

here is a snippet of my root.tsx:

const Document = ({
  children,
  envScript,
}: {
  children: ReactNode;
  envScript?: ReactNode;
}) => {
  return (
    <html lang="en" className="bg-ai-base">
      <head>
        <Suspense>
          <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", "GTM-XXX");
                ;
            }`,
            }}
          />
        </Suspense>

works like a charm :D

dvnrsn · 2024-03-17T02:10:16Z

dvnrsn
Mar 17, 2024

Hmm, tried this in shopify Hydrogen without success

      <Suspense fallback={null}>
        <Script
          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;var n=d.querySelector('[nonce]');
            n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer',"${id}");

2 replies

zamson Mar 29, 2024

@dvnrsn Did you solve the issue? Trying to implement Google Tag Manager in Hydrogen myself

kiliman Mar 29, 2024
Maintainer

Pretty much all hydration issues are caused by React 18.2. You need to install React Canary (recently updated to v19).

dimileeh · 2024-04-01T22:43:51Z

dimileeh
Apr 1, 2024

I've turned to ChatGPT for advice.

I'm very new to Remix, and I use it inside Shopify's Hydrogen.

Given that Remix has to hydrate the client-side website, and that Google Tag Manager has to only run on the client side, we need to modify our entry.client.jsx.

Here's the code that works well for me: entry.client.jsx

import {RemixBrowser} from '@remix-run/react';
import {startTransition, StrictMode, useEffect} from 'react';
import {hydrateRoot} from 'react-dom/client';

const GTM_ID = 'GTM-XXXX'; // Replace 'GTM-XXXX' with your actual GTM ID.

let gtmScriptAdded = false;

function addGtmScript() {
  if (gtmScriptAdded) {
    return;
  }

// Dynamically execute the GTM script in the head
  (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', GTM_ID);

  // GTM noscript for the body as a fallback
  const noscript = document.createElement('noscript');
  const iframe = document.createElement('iframe');
  iframe.src = "https://www.googletagmanager.com/ns.html?id=GTM-XXXX";
  iframe.height = "0";
  iframe.width = "0";
  iframe.style.display = "none";
  iframe.style.visibility = "hidden";
  noscript.appendChild(iframe);
  document.body.insertBefore(noscript, document.body.firstChild);

  gtmScriptAdded = true; // Set the flag to true after adding GTM script and noscript
}

function App() {
  useEffect(() => {
    addGtmScript();
  }, []);

  return <RemixBrowser />;
}

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <App />
    </StrictMode>,
  );
});

After that, you'd need to modify your ContentSecurityPolicy if you still serve GTM script from googletagmanager.com

For example, in entry.server.jsx:

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    connectSrc: [
      'https://*.google-analytics.com:*',
      'https://*.facebook.com',
    ],
    defaultSrc: [
      'https://www.googletagmanager.com',
      'https://connect.facebook.net',
      'https://www.facebook.com',
    ],
  });

4 replies

Mr-Ples Apr 2, 2024
Author

you leaked your ID in the noscript

williamkhshea Apr 21, 2024

@dimileeh Tried your solution in Shopify Hydrogen and it didn't work. App() is not executing at all. Am I missing something?

dimileeh Apr 21, 2024

@williamkhshea did you modify the default script entry.client.jsx to include <App />?

Like:

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <App />
    </StrictMode>,
  );
});

williamkhshea Apr 22, 2024

@dimileeh That works but now got another error:

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

sparkida · 2024-05-21T02:01:31Z

sparkida
May 21, 2024

I'm new to Remix, but to get around this I just inject the scripts that change the document. Would like a better way, but if your script doesn't need to block loading then this is sufficient.

useEffect(() => {
  const script = document.createElement('script');
  script.innerHTML = `...some script that will change the DOM`;
  document.body.appendChild(script);
}, [])

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Google Tag Manager without hydration errors #8741

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Google Tag Manager without hydration errors #8741

Replies: 3 comments · 6 replies

kiliman Mar 29, 2024 Maintainer

Mr-Ples Apr 2, 2024 Author

Replies: 3 comments 6 replies

kiliman Mar 29, 2024
Maintainer

Mr-Ples Apr 2, 2024
Author