🛠 v1.0.2 - GTM Support

- Added google tag manager for hotjar
bettersg · Dec 31, 2023 · 8779ad7 · 8779ad7
1 parent fed78de
commit 8779ad7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -34,9 +34,10 @@
 		"next": "12.1.6",
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
+		"react-gtm-module": "^2.0.11",
+		"react-icons": "^4.10.1",
 		"react-leaflet": "^4.2.1",
 		"react-resize-detector": "^9.1.0",
-		"react-icons": "^4.10.1",
 		"react-responsive-carousel": "^3.2.23",
 		"react-select": "^5.3.2",
 		"styled-components": "^5.3.5"
@@ -50,6 +51,7 @@
 		"@types/node": "17.0.36",
 		"@types/react": "18.0.9",
 		"@types/react-dom": "18.0.5",
+		"@types/react-gtm-module": "^2.0.3",
 		"@types/styled-components": "^5.1.25",
 		"@typescript-eslint/eslint-plugin": "^5.29.0",
 		"@typescript-eslint/parser": "^5.29.0",

diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
@@ -1,6 +1,8 @@
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { AppContextProvider } from "app-context";
 import type { AppProps } from "next/app";
+import React, { useEffect } from "react";
+import TagManager from "react-gtm-module";
 import "leaflet/dist/leaflet.css";
 import "public/Marker.css";
 const theme = extendTheme({
@@ -11,7 +13,14 @@ const theme = extendTheme({
 	},
 });
 
+const tagManagerArgs = {
+	gtmId: "GTM-TWC8D9H",
+};
+
 function MyApp({ Component, pageProps }: AppProps) {
+	useEffect(() => {
+		TagManager.initialize(tagManagerArgs);
+	}, []);
 	return (
 		<ChakraProvider theme={theme}>
 			<AppContextProvider>