Merge pull request #167 from UnsignedArduino/staging

Google Tag Manager

Author: UnsignedArduino

.env.sample

@@ -1,7 +1,6 @@
-// Google Analytics measurement ID - not required
-NEXT_PUBLIC_GA_MEASUREMENT_ID = "G-XXXXXXXXXX"
-// Google Adsense publisher ID - not required
-NEXT_PUBLIC_ADSENSE_PUBLISHER_ID = "pub-XXXXXXXXXXXXXXXX"
+// Google Tag Manager ID - not required
+// Used for Google Analytics and Adsense
+NEXT_PUBLIC_GTM_ID = "GTM-XXXXXXXX"
 // GitHub OAuth
 GITHUB_ID = XXXXXXXXXXXXXXXXXXXX
 GITHUB_SECRET = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

@@ -5,8 +5,6 @@ import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "katex/dist/katex.min.css";
 import "tippy.js/dist/tippy.css";
-import Adsense from "../components/Adsense";
-import Analytics from "../components/Analytics";
 import ErrorBoundary from "../components/ErrorBoundary";
 import { SessionProvider } from "next-auth/react";
 import { useRouter } from "next/router";
@@ -15,6 +13,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,8 +112,9 @@ export default function AwesomeArcadeExtensions({
               color={ACCENT_COLOR[nprogressTheme]}
               options={{ showSpinner: false }}
             />
-            <Analytics />
-            <Adsense />
+            <GoogleTagManager id={process.env.NEXT_PUBLIC_GTM_ID!} />
+            {/*<Analytics />*/}
+            {/*<Adsense />*/}
             <GrowthBookProvider growthbook={growthbook}>
               <SessionProvider session={session}>
                 <AnimatePresence

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"