Merge pull request #60 from Nexters/feat/hotjar

feat: Hotjar 설치

package.json

@@ -29,6 +29,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hotjar": "^6.3.1",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.0",
     "vaul": "^0.8.0",

src/app/ga-provider.tsx

@@ -0,0 +1,24 @@
+import Script from "next/script";
+
+const GAProvider = () => (
+  <>
+    <Script
+      async
+      src={`https://www.googletagmanager.com/gtag/js?
+      id=G-K20DRKXNTC`}
+    />
+    <Script
+      id="google-analytics"
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'G-K20DRKXNTC');
+        `,
+      }}
+    />
+  </>
+);
+export default GAProvider;

src/app/global-provider.tsx

@@ -2,8 +2,10 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { hotjar } from 'react-hotjar';
 import axios, { AxiosError, AxiosResponse } from "axios";
 import React from "react";
+import GAProvider from "./ga-provider";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -25,12 +27,25 @@ axios.interceptors.response.use(
   }
 );
 
+const HJID = 4939296;
+const HJSV = 6;
+
 export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
   const [client] = React.useState(() => new QueryClient());
 
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'development') {
+      hotjar.initialize({
+        id: HJID,
+        sv: HJSV
+      });
+    }
+  }, []);
+
   return (
     <QueryClientProvider client={client}>
       {children}
+      <GAProvider/>
       <ReactQueryDevtools />
     </QueryClientProvider>
   );