add GTM snippets via starlight skiplink override

Author: mkaput

astro.config.ts

@@ -63,6 +63,7 @@ export default defineConfig({
       components: {
         Head: "./src/components/Head.astro",
         Footer: "./src/components/Footer.astro",
+        SkipLink: "./src/components/SkipLink.astro",
       },
       editLink: {
         baseUrl: `${repo}edit/main/`,

src/components/Head.astro

@@ -4,4 +4,20 @@ import JsonLD from "./JsonLD.astro";
 ---
 
 <Default />
+
+<!-- Google Tag Manager -->
+<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-PR4QP6KH");
+</script>
+<!-- End Google Tag Manager -->
+
 <JsonLD />

src/components/SkipLink.astro

@@ -0,0 +1,15 @@
+---
+import Default from "@astrojs/starlight/components/SkipLink.astro";
+---
+
+<!-- Google Tag Manager (noscript) -->
+<noscript>
+  <iframe
+    src="https://www.googletagmanager.com/ns.html?id=GTM-PR4QP6KH"
+    height="0"
+    width="0"
+    style="display:none;visibility:hidden"></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->
+
+<Default />