Merge pull request #73 from Vizzuality/gtm-config

Gtm config

.env.default

@@ -1,7 +1,7 @@
 # Google Analytics tracking ID. If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID.
 NEXT_PUBLIC_GA_TRACKING_ID=G-K1N8N2NXDC
 
-Google Tag Manager tracking ID
+#Google Tag Manager tracking ID
 NEXT_PUBLIC_GTM_TRACKING_ID=GTM-NGR3WTR
 
 # Sendgrid newsletter service

src/containers/third-party/component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import useCookie from 'react-use-cookie';
 
@@ -7,10 +7,11 @@ import Script from 'next/script';
 import { useModal } from 'hooks/modals';
 
 import Cookies from 'components/cookies';
-import { GA_TRACKING_ID } from 'lib/analytics/ga';
+import { GA_TRACKING_ID, GTM_TRACKING_ID } from 'lib/analytics/ga';
 
 const ThirdParty: React.FC = () => {
   const [consentCookie, setConsentCookie] = useCookie('consent', undefined);
+  const [mounted, setMounted] = useState(false);
 
   const consent = useMemo(() => {
     if (consentCookie === 'true') return true;
@@ -26,14 +27,16 @@ const ThirdParty: React.FC = () => {
   };
 
   useEffect(() => {
+    setMounted(true);
+
     if (!consentCookie) {
       openCookies();
     }
   }, [consentCookie, openCookies]);
 
   return (
     <>
-      {consent && (
+      {mounted && consent && (
         <>
           {/* Third Party Script needing cookies */}
           {/* Global site tag (gtag.js) - Google Analytics */}
@@ -50,6 +53,26 @@ const ThirdParty: React.FC = () => {
               gtag('config', '${GA_TRACKING_ID}');
             `}
           </Script>
+
+          {/* <!-- Google Tag Manager --> */}
+          <Script
+            id="gtmanager-sript"
+            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_TRACKING_ID}');`,
+            }}
+          ></Script>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_TRACKING_ID}"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+            }}
+          ></noscript>
+          {/* <!-- End Google Tag Manager --> */}
         </>
       )}
       <Cookies

src/lib/analytics/ga.ts

@@ -1,4 +1,5 @@
 export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+export const GTM_TRACKING_ID = process.env.NEXT_PUBLIC_GTM_TRACKING_ID;
 
 // log the pageview with their URL
 export const GAPage = (url: string): void => {