SvelteKit doesn't work well with Google Tag Manager

[chientrm]

Describe the bug

GTM correctly loads at the beginning

However, it's not able to detect events of clicking on links and can only detect the first form event; any form submits after the first one is not recorded.

Reproduction

Github Repo
sk-gtm-bug.pages.dev

Summary code:

<script lang="ts">
  // @ts-nocheck
  import { PUBLIC_TAG_ID } from "$env/static/public";
  import { onMount } from "svelte";

  onMount(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "gtm.start": new Date().getTime(),
      event: "gtm.js",
    });
    const gtmScript = document.createElement("script");
    gtmScript.src =
      "https://www.googletagmanager.com/gtm.js?id=" + PUBLIC_TAG_ID;
    document.head.append(gtmScript);
  });
</script>

<a href="/">Home</a>

<slot />

Logs

No response

System Info

System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
    CPU: (4) x64 Intel(R) Core(TM) i3-4010U CPU @ 1.70GHz
    Memory: 449.75 MB / 3.51 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.12.1 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/kit: ^2.0.0 => 2.5.0 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^4.2.7 => 4.2.9 
    vite: ^5.0.3 => 5.0.12

Severity

blocking all usage of SvelteKit

Additional Information

You can create a new TAG account here: Google Tag Manager

[chientrm]

POV: Events triggered well when I click the links very fast (before it loads something that prevent it 🤔 ).
Also work when I click the Back button on browser.

[whalderman]

That GTM setup is non-standard and incorrect, this isn't a SvelteKit issue.

The easiest solution is to pull the tag from GTM and add it to your app.html file.

---

If you need to place it in +layout for some reason, try the following:

<script lang="ts">
    import { PUBLIC_TAG_ID } from "$env/static/public";
    import { onMount } from "svelte";

    onMount(() => {
        (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-${PUBLIC_TAG_ID}`);
    });
</script>

And add the dataLayer to your app.d.ts file:

declare global {
    ...
    interface Window {
        dataLayer: any[];
    }
}

[chientrm]

That GTM setup is non-standard and incorrect, this isn't a SvelteKit issue.

The easiest solution is to pull the tag from GTM and add it to your app.html file.

If you need to place it in +layout for some reason, try the following:

<script lang="ts">
    import { PUBLIC_TAG_ID } from "$env/static/public";
    import { onMount } from "svelte";

    onMount(() => {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            "gtm.start": new Date().getTime(),
            event: "gtm.js",
        });
        var f = document.getElementsByTagName("script")[0],
            j = document.createElement("script"),
            dl = "dataLayer" != "dataLayer" ? "&l=" + "dataLayer" : "";
        j.async = true;
        j.src =
            "https://www.googletagmanager.com/gtm.js?id=" +
            `GTM-${PUBLIC_TAG_ID}` +
            dl;
        f.parentNode?.insertBefore(j, f);
    });
</script>

And add the dataLayer to your app.d.ts file:

declare global {
    ...
    interface Window {
        dataLayer: any[];
    }
}

I have tried copy/paste from the tutorial to app.html and tried your solution already.

They all lead to the same result.

@whalderman can you test or suggest me a working repo?

I made the reproduction repo in the issue description.

[chientrm]

@benmccann can you reopen the issue please. It's not completed 😗

[benmccann]

It's not a SvelteKit bug. It's better to ask for help on Discord or StackOverflow

[chientrm]

It's not a SvelteKit bug. It's better to ask for help on Discord or StackOverflow

I have tried replace Google Tag Manager with Cloudflare Zaraz SPA compat, too.

Nothing can capture the history change event of SvelteKit 😞

[dummdidumm]

Did you update to the latest version of SvelteKit? There was a bug in early versions of 2.x

[chientrm]

Did you update to the latest version of SvelteKit? There was a bug in early versions of 2.x

It does! #11657

Now my app reports correctly! ❤️