From b41c421140043c34f25d2dd525146ec1f2d6e116 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Mon, 6 Nov 2023 14:15:31 +0100
Subject: [PATCH 1/3] gtm config test

---
 .env.default                             |  2 +-
 src/containers/third-party/component.tsx | 22 +++++++++++++++++++++-
 src/lib/analytics/ga.ts                  |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/.env.default b/.env.default
index 487f6d47..ca74e309 100644
--- a/.env.default
+++ b/.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
diff --git a/src/containers/third-party/component.tsx b/src/containers/third-party/component.tsx
index 939609e2..65f0a214 100644
--- a/src/containers/third-party/component.tsx
+++ b/src/containers/third-party/component.tsx
@@ -7,7 +7,7 @@ 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);
@@ -50,6 +50,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
diff --git a/src/lib/analytics/ga.ts b/src/lib/analytics/ga.ts
index eb04cd02..722dfed4 100644
--- a/src/lib/analytics/ga.ts
+++ b/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 => {

From d0fe0e8fb1e92c67568b53a697320b53bc966506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Mon, 6 Nov 2023 14:38:44 +0100
Subject: [PATCH 2/3] Fix issue with rehydration

---
 src/containers/third-party/component.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/containers/third-party/component.tsx b/src/containers/third-party/component.tsx
index 65f0a214..a12ddba9 100644
--- a/src/containers/third-party/component.tsx
+++ b/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';
 
@@ -11,6 +11,7 @@ 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,6 +27,8 @@ const ThirdParty: React.FC = () => {
   };
 
   useEffect(() => {
+    setMounted(true);
+
     if (!consentCookie) {
       openCookies();
     }
@@ -33,7 +36,7 @@ const ThirdParty: React.FC = () => {
 
   return (
     <>
-      {consent && (
+      {mounted && consent && (
         <>
           {/* Third Party Script needing cookies */}
           {/* Global site tag (gtag.js) - Google Analytics */}

From 97bf9282a32a400b5dd48398093387442e5392b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Mon, 6 Nov 2023 14:43:10 +0100
Subject: [PATCH 3/3] Fix crash due to undefined variable

---
 src/containers/third-party/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/third-party/component.tsx b/src/containers/third-party/component.tsx
index a12ddba9..5dcb745f 100644
--- a/src/containers/third-party/component.tsx
+++ b/src/containers/third-party/component.tsx
@@ -63,7 +63,7 @@ const ThirdParty: React.FC = () => {
         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});`,
+        })(window,document,'script','dataLayer','${GTM_TRACKING_ID}');`,
             }}
           ></Script>
           <noscript