refactor(gtm): refactor to new gtm with ga4

asyncapi · Jun 18, 2024 · 87f771c · 87f771c
1 parent 8fd6b77
commit 87f771c
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 34 deletions.
diff --git a/components/Analytics.tsx b/components/Analytics.tsx
@@ -0,0 +1,43 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+import { pageview } from '../utils/gtm';
+
+/**
+ * @description The Analytics is the for Google Analytics 4 with GTM.
+ */
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (window.location.hostname === 'asyncapi.com') {
+      pageview(pathname + searchParams);
+    }
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T58BTVQ"
+height="0" width="0" style="display:none;visibility:hidden"></iframe>`
+        }}
+      ></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', "GTM-T58BTVQ");
+                `
+        }}
+      />
+    </>
+  );
+}
diff --git a/components/Head.tsx b/components/Head.tsx
@@ -1,9 +1,8 @@
 import Head from 'next/head';
 import { useContext } from 'react';
-import ReactGA from 'react-ga';
-import TagManager from 'react-gtm-module';
 
 import AppContext from '../context/AppContext';
+import Analytics from './Analytics';
 
 interface IHeadProps {
   title: string;
@@ -50,13 +49,6 @@ export default function HeadComponent({
 
   const currTitle = title ? `${title} | ${permTitle}` : permTitle;
 
-  // enable google analytics
-  if (typeof window !== 'undefined' && window.location.hostname.includes('asyncapi.com')) {
-    TagManager.initialize({ gtmId: 'GTM-T58BTVQ' });
-    ReactGA.initialize('UA-109278936-1');
-    ReactGA.pageview(window.location.pathname + window.location.search);
-  }
-
   return (
     <Head>
       <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
@@ -83,6 +75,9 @@ export default function HeadComponent({
       <meta property='og:image' content={currImage} />
       <meta property='og:description' content={description} />
 
+      {/* GTM + GA4 */}
+      <Analytics />
+
       <title>{currTitle}</title>
     </Head>
   );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,6 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/react-gtm-module": "^2.0.3",
     "@types/react-scrollspy": "^3.3.9",
     "@types/react-typing-animation": "^1.6.6",
     "ajv": "^8.12.0",
@@ -83,8 +82,6 @@
     "prettier": "^3.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-ga": "^3.3.1",
-    "react-gtm-module": "^2.0.11",
     "react-i18next": "^14.0.5",
     "react-scrollspy": "^3.4.3",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/utils/gtm.ts b/utils/gtm.ts
@@ -0,0 +1,14 @@
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== 'undefined') {
+    window.dataLayer.push({
+      event: 'pageview',
+      page: url
+    });
+  }
+};