Change gtag to gtm and fix gtm

junekimdev · junekimdev · commit dc33c97eac27 · 2023-05-16T00:23:42.000+09:00
diff --git a/components/meta/gtag.tsx b/components/meta/gtag.tsx
diff --git a/components/meta/gtm.tsx b/components/meta/gtm.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useGTM = (w, d, s, l, i) => {
+  const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID ?? 'GTM-MXDVTH6';
+
+  useEffect(() => {
+    (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', GTM_ID);
+  }, []);
+};
diff --git a/components/meta/meta.tsx b/components/meta/meta.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-// import GTag from './gtag';
+import { useGTM } from './gtm';
 import { TMPropsMeta } from './metaType';
 
 const Meta = (props: TMPropsMeta) => {
@@ -11,6 +11,7 @@ const Meta = (props: TMPropsMeta) => {
     imageWidth = '1200',
     imageHeight = '627',
   } = props;
+  // useGTM();
 
   return (
     <Head>
diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,7 @@ module.exports = {
   env: {
     NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
     //NEXT_PUBLIC_CMS_URL: process.env.NEXT_PUBLIC_CMS_URL,
-    //NEXT_PUBLIC_GTAG_ID: process.env.NEXT_PUBLIC_GTAG_ID,
+    NEXT_PUBLIC_GTM_ID: process.env.NEXT_PUBLIC_GTM_ID,
     NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
   },
   eslint: { ignoreDuringBuilds: true },
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,11 +1,17 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID ?? 'GTM-MXDVTH6';
 
 class MyDocument extends Document {
   render() {
     return (
       <Html lang="en" className="no-js">
         <Head />
         <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+            }}
+          />
           <Main />
           <NextScript />
         </body>
