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

src/app/[lang]/layout.tsx

@@ -4,6 +4,7 @@ import { Inter, Noto_Sans_Arabic } from "next/font/google";
 import "../globals.css";
 import SiteHeader from "@/components/site-header";
 import SiteFooter from "@/components/site-footer";
+import Analytics, { AnalyticsNoScript } from "@/components/analytics";
 import { dirOf, locales, localize, ogLocale } from "@/i18n/config";
 import { mainNav } from "@/i18n/nav";
 import { getUI } from "@/i18n/server";
@@ -35,6 +36,8 @@ export async function generateMetadata(): Promise<Metadata> {
     title: { default: t.meta.title, template: "%s" },
     description: t.meta.description,
     alternates: localeAlternates("/", locale),
+    // Google Search Console ownership.
+    verification: { google: "LnRawiMDpDtTVBC2X34We70f8OHBLMVC6e9IWoHCZLs" },
     openGraph: {
       type: "website",
       url: localize("/", locale),
@@ -70,6 +73,7 @@ export default async function RootLayout({ children }: LayoutProps<"/[lang]">) {
       data-scroll-behavior="smooth"
     >
       <body>
+        <AnalyticsNoScript />
         <a href="#main" className="skip-link">
           {t.skip}
         </a>
@@ -79,6 +83,7 @@ export default async function RootLayout({ children }: LayoutProps<"/[lang]">) {
         </Suspense>
         <main id="main">{children}</main>
         <SiteFooter />
+        <Analytics />
       </body>
     </html>
   );

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>
+  );
+}