Google Tag Manager

Author: UnsignedArduino

.env.sample

@@ -1,5 +1,7 @@
 // Google Analytics measurement ID - not required
 NEXT_PUBLIC_GA_MEASUREMENT_ID = "G-XXXXXXXXXX"
+// Google Tag Manager ID - not required
+NEXT_PUBLIC_GTM_ID = "GTM-XXXXXXXX"
 // Google Adsense publisher ID - not required
 NEXT_PUBLIC_ADSENSE_PUBLISHER_ID = "pub-XXXXXXXXXXXXXXXX"
 // GitHub OAuth

package.json

@@ -50,7 +50,9 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@codemirror/language": "6.0.0",
     "@growthbook/growthbook-react": "^1.1.0",
+    "@magicul/next-google-tag-manager": "^2.0.0",
     "@popperjs/core": "2.11.8",
     "@tippyjs/react": "^4.2.6",
     "@types/bootstrap": "^5.2.10",
@@ -87,11 +89,10 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "sass": "^1.77.7",
+    "scheduler": "^0.19.0",
     "tinacms": "^1.6.5",
     "tippy.js": "^6.3.7",
-    "unified": "^11.0.5",
-    "scheduler": "^0.19.0",
-    "@codemirror/language": "6.0.0"
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@tinacms/cli": "^1.5.47",

src/pages/_app.tsx

@@ -15,6 +15,7 @@ import growthbook from "@/components/FeatureFlags";
 import { AnimatePresence } from "framer-motion";
 import { Theme } from "@/components/Navbar/ThemePicker/themePicker";
 import { ACCENT_COLOR } from "@/themes/colors";
+import GoogleTagManager from "@magicul/next-google-tag-manager";
 
 export type BootstrapLibContextType = typeof import("bootstrap") | null;
 export const BootstrapLibContext =
@@ -113,6 +114,7 @@ export default function AwesomeArcadeExtensions({
               color={ACCENT_COLOR[nprogressTheme]}
               options={{ showSpinner: false }}
             />
+            <GoogleTagManager id={process.env.NEXT_PUBLIC_GTM_ID!} />
             <Analytics />
             <Adsense />
             <GrowthBookProvider growthbook={growthbook}>

yarn.lock

@@ -1113,6 +1113,11 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@magicul/next-google-tag-manager@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@magicul/next-google-tag-manager/-/next-google-tag-manager-2.0.0.tgz#04a77b506a4385f84cf637267984bd6f334f5ce0"
+  integrity sha512-NXp0iGxdcAZL9IkkWwh2GS3dE1qSn4hGxXADnvt1li4gAXyxJ9AEDTrgqMVXIDzkGTD7Q0n37BJoCZdmwIXE+g==
+
 "@monaco-editor/loader@^1.3.2":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"