Search code examples
htmlgoogle-tag-managerastrojs

Google Tag Manager not appearing in page source

I am using Astro framework for building static pages. I got a task to add a google tag right under the opening head tag and the second one immediately after opening the body tag, which I have done (can be seen in code snippet below):

---
import Footer from "../components/SharedComponents/Footer.astro";
import Hero, { TypeOfHeroContent } from "../components/SharedComponents/Hero.astro";
import Navbar from "../components/SharedComponents/Navbar.astro";
import { networksAndHero } from "../components/SharedComponents/NetworksAndHeroPreload.astro";

export interface Props {
  title?: string;
  description?: string;
  keywords?: string;
  heroContentType?: TypeOfHeroContent;
  navbarColor?: string;
  pageName?: string;
}

const { title, description, keywords, heroContentType, navbarColor, pageName } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google Tag Manager -->
    <script>
      (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-PCP4MNJ");
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link rel="preload" href="/fonts/Inter.var.woff2" as="font" type="font/woff2" crossorigin />
    {
      networksAndHero.map((images) => (
        <link rel="preload" as="image" href={images.img} type="image/webp" />
      ))
    }
    <meta
      name="robots"
      content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
    />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <meta name="keywords" content={keywords} />
    <title>{title}</title>
    <style>
      img {
        aspect-ratio: attr(width) / attr(height);
        height: auto;
        max-width: 100%;
      }
      @font-face {
        font-family: "inter";
        src: url("/fonts/Inter.var.woff2") format("woff2");
        font-display: block;
      }
    </style>
  </head>

  <body class="bg-fieldblack font-sans">
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-PCP4MNJ"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      >
      </iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <Navbar navbarColor={navbarColor} />
    {heroContentType && <Hero heroContentType={heroContentType} />}
    <slot />
    <Footer pageName={pageName} />
  </body>
</html>

Though for some reason my Google Tag that should be at the top of head section is literally not shown in Inspect Element or Page Source, only the comments around the script tag meanwhile the noscript tag at the top of body section appears to be perfectly fine. Has anyone came across the same thing and know how can I fix it?

Invisible Google Tag

Solution

  • You should use is:inline directive so Astro will not process and try to optimise the code which downloads Google Tag Manager. You can read more about directives in the Astro Docs - https://docs.astro.build/en/reference/directives-reference/#script--style-directives

    Example:

    <script is:inline>
              (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-PCP4MNJ");
</script>