refactor: add Google Tag Manager

mrholek · mrholek · commit d96983bff110 · 2023-06-29T13:11:35.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -30,9 +30,22 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Google Tag Manager -->
+    <script>(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-KX4JH47');</script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
     <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-KX4JH47"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
@@ -1,7 +1,20 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
 import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
 const DefaultLayout = () => {
+  const location = useLocation()
+
+  useEffect(() => {
+    // Google Tag Manager
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push({
+      event: 'pageview',
+      page_location: window.location.href,
+    })
+  }, [location])
+
   return (
     <div>
       <AppSidebar />
