feat: analytics tools 추가 (#34)

* feat: google analytics 설정 추가 * feat: hotjar 설정 추가
effective-tech-interview · Mar 21, 2023 · b0e2896 · b0e2896
1 parent 854b04c
commit b0e2896
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 17 deletions.
diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+import * as gtag from '~/utils/gtag';
+
+export const useAnalytics = () => {
+  const router = useRouter();
+  useEffect(() => {
+    const handleRouteChange = (url: URL) => {
+      gtag.gaPageview(url);
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    router.events.on('hashChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+      router.events.off('hashChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import { ThemeProvider } from '@emotion/react';
 import { OverlayProvider } from '@toss/use-overlay';
 import type { ComponentProps } from 'react';
@@ -12,29 +13,63 @@ import QueryErrorBoundary from '~/components/common/QueryErrorBoundary';
 import RecoilDebugObserver from '~/components/common/RecoilDebugObserver';
 import GlobalStyle from '~/styles/GlobalStyle';
 import { theme } from '~/styles/Theme';
+import * as gtag from '~/utils/gtag';
 
 interface PageProps {
   dehydratedState: ComponentProps<typeof QueryClientProvider>['dehydratedState'];
 }
 
 export default function App({ Component, pageProps }: AppProps<PageProps>) {
   return (
-    <RecoilRoot>
-      <QueryClientProvider dehydratedState={pageProps.dehydratedState}>
-        <OverlayProvider>
-          <QueryErrorBoundary ErrorFallback={GlobalErrorFallback}>
-            <RecoilDebugObserver />
-            <ClientSuspense fallback={<></>}>
-              <ThemeProvider theme={theme}>
-                <GlobalStyle />
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
-              </ThemeProvider>
-            </ClientSuspense>
-          </QueryErrorBoundary>
-        </OverlayProvider>
-      </QueryClientProvider>
-    </RecoilRoot>
+    <>
+      <Head>
+        <script async src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`} />
+        {/* GA설정 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${gtag.GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+          }}
+        />
+        {/* hotjar 설정 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+  (function(h,o,t,j,a,r){
+      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+      h._hjSettings={hjid:${process.env.NEXT_PUBLIC_HJID},hjsv:${process.env.NEXT_PUBLIC_HJSV}};
+      a=o.getElementsByTagName('head')[0];
+      r=o.createElement('script');r.async=1;
+      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+      a.appendChild(r);
+  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+`,
+          }}
+        />
+      </Head>
+      <RecoilRoot>
+        <QueryClientProvider dehydratedState={pageProps.dehydratedState}>
+          <OverlayProvider>
+            <QueryErrorBoundary ErrorFallback={GlobalErrorFallback}>
+              <RecoilDebugObserver />
+              <ClientSuspense fallback={<></>}>
+                <ThemeProvider theme={theme}>
+                  <GlobalStyle />
+                  <Layout>
+                    <Component {...pageProps} />
+                  </Layout>
+                </ThemeProvider>
+              </ClientSuspense>
+            </QueryErrorBoundary>
+          </OverlayProvider>
+        </QueryClientProvider>
+      </RecoilRoot>
+    </>
   );
 }
diff --git a/src/utils/gtag.ts b/src/utils/gtag.ts
@@ -0,0 +1,14 @@
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: any;
+  }
+}
+
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const gaPageview = (url: URL) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};