[Hydrogen Partytown] - GTM No tags found

[tylerscave]

I've implemented everything in the Partytown Hydrogen example in our codebase which is based off of the Hydrogen demo store...

Everything appears to be working correctly as far as the webworker running, but when using the Google Tag Assistant to debug locally, it seems that our tags are not found.

If we remove the type type="text/partytown" from the scripts, it works as expected.

Console logs:

With type="text/partytown"

Without type="text/partytown"

Thanks in advance for any ideas on how to solve this 🙏... Currently our third party scripts are significantly affecting our performance scores on PageSpeed Insights 😬

[tylerscave]

Hi @juanpprieto, I noticed you did most of the work for this example... Any ideas on this?

[zamson]

@tylerscave Did you ever find a solution?

[tylerscave]

Sadly I did not 😔. I've sidelined the task to focus on some other things, but I would love to get this working...

[Zn4rK]

I think I managed to solve this. In my attempts to get this working, I kinda forgot what eventually made it work. But here are my changes from the example. I'll clean up my own versions later, but here it is as it stands now.

// partytownGoogleTagManager.tsx

// This snippet is the one from GTM, instead of the cleaned up version in the original component. It's missing the "dataLayerKey" for now.
gtmScript.innerHTML = `
  (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.type="text/partytown"j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','${gtmContainerId}');
`;

// root.tsx
<Script
  type="text/partytown"
  // Added nonce. Maybe not necessary.
  nonce={nonce}
  dangerouslySetInnerHTML={{
    __html: `
        dataLayer = window.dataLayer || [];
    
        window.gtag = function () {
          dataLayer.push(arguments);
        };
    
        window.gtag('js', new Date());
        window.gtag('config', "${data.gtmContainerId}");
      `,
  }}
/>

// app/utils/partytown/maybeProxyRequest.ts
export function maybeProxyRequest(url: URL, location: Location, type: string) {
  // We proxy everything (for now).
  const nonProxyDomains: string[] = [];

I also added '*.googletagmanager.com' to the scriptSrc and the connectSrc, but again, I'm going to clean it up when I understand what caused it to start working.

I also learned that you'll need to use the Debug-url in your Google Tag Environments to actually debug anything.

[Zn4rK]

Nevermind. It is not working anymore. I based my code on https://github.com/superside-oss/partytown-gtm-plugin, which doesn't work on MiniOxygen out of the box. But during this, I also followed this thread (and this comment in particular): QwikDev/partytown#72 (comment), and I've come to the conclusion that I should just use regular old GTM.