Add Gtag component and script

giovamuge · Mar 21, 2024 · 9dea2c6 · 9dea2c6
1 parent 49e813e
commit 9dea2c6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/app/components/Gtag.tsx b/app/components/Gtag.tsx
@@ -0,0 +1,5 @@
+import Script from "next/script"
+
+export default function Gtag() {
+	return <Script src="/gtag.js" />
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,9 @@ import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
 import { ThemeContextProvider } from "@/context/ThemeContext"
+import Head from "next/head"
+import Gtag from "./components/Gtag"
+import Script from "next/script"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -43,8 +46,25 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="en">
+			<Head>
+				<Gtag />
+			</Head>
 			<ThemeContextProvider>
-				<body className={inter.className}>{children}</body>
+				<body className={inter.className}>
+					<noscript>
+						<iframe
+							src="https://www.googletagmanager.com/ns.html?id=GTM-MQMVBV4W"
+							height="0"
+							width="0"
+							style={{
+								display: "none",
+								visibility: "hidden",
+							}}
+						></iframe>
+					</noscript>
+
+					{children}
+				</body>
 			</ThemeContextProvider>
 		</html>
 	)

diff --git a/public/gtag.js b/public/gtag.js
@@ -0,0 +1,10 @@
+;(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-MQMVBV4W")