Merge pull request #39 from dnd-side-project/hotfix/fix-gtag

Fix : Gtag Suspense로 설정
dnd-side-project · Aug 29, 2023 · 50e579a · 50e579a
2 parents 1d88002 + f8858d8
commit 50e579a
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 5 deletions.
diff --git a/public/workbox-e34f44db.js.map b/public/workbox-e34f44db.js.map
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,9 @@ import '../../styles/font.css';
 import '../../styles/typography.css';
 
 import Script from 'next/script';
+import { Suspense } from 'react';
 
+import { Analytics } from '@/components/Analytics';
 import { OverlayProvider } from '@/components/Overlay/OverlayProvider';
 import { BASE_SITE_URL, GA_ID } from '@/constants';
 import QueryProvider from '@/provider/QueryProvider';
@@ -46,14 +48,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="ko">
       <body className="flex min-h-[100dvh] w-screen touch-none justify-center bg-slate-100 py-px">
-        <RecoilContextProvider>
-          <div className="w-full max-w-440 overflow-hidden bg-white text-primary">
+        <div className="w-full max-w-440 overflow-hidden bg-white text-primary">
+          <Suspense>
+            <Analytics />
+          </Suspense>
+          <RecoilContextProvider>
             <QueryProvider>
               <OverlayProvider>{children}</OverlayProvider>
             </QueryProvider>
             <div id="portal" />
-          </div>
-        </RecoilContextProvider>
+          </RecoilContextProvider>
+        </div>
       </body>
       <Gtag />
     </html>

diff --git a/src/components/Analytics/Analytics.tsx b/src/components/Analytics/Analytics.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+import { GA_ID } from '@/constants';
+import { pageview } from '@/utils/gtm';
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      pageview(pathname);
+    }
+  }, [pathname, searchParams]);
+
+  if (process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production') {
+    return null;
+  }
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${GA_ID}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer', '${GA_ID}');
+  `,
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/components/Analytics/index.ts b/src/components/Analytics/index.ts
@@ -0,0 +1 @@
+export { default as Analytics } from './Analytics';
diff --git a/src/utils/gtm.ts b/src/utils/gtm.ts
@@ -0,0 +1,19 @@
+type WindowWithDataLayer = Window & {
+  dataLayer: Array<Record<string, any>>;
+};
+
+declare const window: WindowWithDataLayer;
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== 'undefined') {
+    window.dataLayer.push({
+      event: 'pageview',
+      page: url,
+    });
+  } else {
+    console.log({
+      event: 'pageview',
+      page: url,
+    });
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Analytics } from './Analytics';