Add Google Tag Manager, GA4 and the Search Console verification tag

src/components/analytics.tsx

@@ -0,0 +1,33 @@
+import Script from "next/script";
+
+// Google Tag Manager and Google Analytics 4. Both share window.dataLayer.
+const GTM_ID = "GTM-TP5FCVMQ";
+const GA_ID = "G-H7CB0B2RRS";
+
+export default function Analytics() {
+  return (
+    <>
+      <Script id="gtm" strategy="afterInteractive">
+        {`(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}');`}
+      </Script>
+      <Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" />
+      <Script id="ga4" strategy="afterInteractive">
+        {`window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${GA_ID}');`}
+      </Script>
+    </>
+  );
+}
+
+/** GTM's fallback for visitors with JavaScript turned off; goes right after <body> opens. */
+export function AnalyticsNoScript() {
+  return (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+        height="0"
+        width="0"
+        style={{ display: "none", visibility: "hidden" }}
+      />
+    </noscript>
+  );
+}