Fix/site: cookie loading (#3374)

* fix(site): load 3rd-party scripts only after user consent * fix(site): Authorize tracking pixel "Azerion"
incubateur-ademe · Oct 21, 2024 · a0584f5 · a0584f5
1 parent 141e64a
commit a0584f5
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 103 deletions.
diff --git a/packages/site/app/contact/ContactForm.tsx b/packages/site/app/contact/ContactForm.tsx
@@ -59,7 +59,7 @@ const ContactForm = () => {
     });
   };
 
-  const handleChangeSelect = (value: OptionValue) => {
+  const handleChangeSelect = (value?: OptionValue) => {
     const categorie = options.find((opt) =>
       opt.options.some((o) => o.value === value)
     );

diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx
@@ -1,7 +1,7 @@
 import { GoogleTagManager } from '@next/third-parties/google';
 import AppHeader from '@tet/site/components/layout/AppHeader';
 import Footer from '@tet/site/components/layout/Footer';
-import { PHProvider } from '@tet/site/providers/posthog';
+import { Trackers } from '@tet/site/providers/posthog';
 import { Metadata, Viewport } from 'next';
 import Script from 'next/script';
 import './global.css';
@@ -72,95 +72,16 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function RootLayout({ children }: { children: JSX.Element }) {
   return (
-    <PHProvider>
+    <Trackers>
       <html>
         <body className="min-h-screen flex flex-col justify-between">
           <div className="grow flex flex-col">
             <AppHeader />
             <div className="grow flex flex-col">{children}</div>
           </div>
           <Footer />
-
-          {/* tag linkedin */}
-          <noscript>
-            <img
-              height="1"
-              width="1"
-              style={{ display: 'none' }}
-              alt=""
-              src="https://px.ads.linkedin.com/collect/?pid=1701996&fmt=gif"
-            />
-          </noscript>
-
-          {/* tag adform */}
-          <noscript>
-            <p style={{ margin: '0', padding: '0', border: '0' }}>
-              <img
-                src="https://server.adform.net/Serving/TrackPoint/?pm=2867378&ADFPageName=2024-09-territoiresentransitions.fr-PageArrivee-LP&ADFdivider=|"
-                width="1"
-                height="1"
-                alt=""
-              />
-            </p>
-          </noscript>
-
-          {/* tag azerion */}
-          <noscript>
-            <img
-              src="https://secure.adnxs.com/px?id=1827352&t=2"
-              width="1"
-              height="1"
-            />
-          </noscript>
         </body>
-
-        {/* google tag manager */}
-        <GoogleTagManager gtmId="DC-2967404" />
-
-        {/* linkedin */}
-        <Script id="linkedin" type="text/javascript">
-          {`
-            _linkedin_partner_id = "1701996";
-            window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
-            window._linkedin_data_partner_ids.push(_linkedin_partner_id);
-
-            (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]}
-              var s = document.getElementsByTagName("script")[0];
-              var b = document.createElement("script");
-              b.type = "text/javascript";b.async = true;
-              b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
-              s.parentNode.insertBefore(b, s);})(window.lintrk);
-          `}
-        </Script>
-
-        {/* adform */}
-        <Script id="adform" type="text/javascript">
-          {`
-            window._adftrack = Array.isArray(window._adftrack) ? window._adftrack : (window._adftrack ? [window._adftrack] : []);
-            window._adftrack.push({
-              HttpHost: 'server.adform.net',
-              pm: 2867378,
-              divider: encodeURIComponent('|'),
-              pagename: encodeURIComponent('2024-09-territoiresentransitions.fr-PageArrivee-LP')
-            });
-            (function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://s2.adform.net/banners/scripts/st/trackpoint-async.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
-          `}
-        </Script>
-
-        {/* crisp widget */}
-        <Script id="crisp" type="text/javascript">{`
-          window.$crisp = [];
-          $crisp.push(["set", "session:segments", [["site public"]]])
-          window.CRISP_WEBSITE_ID = '${process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID}';
-          (function () {
-            d = document;
-            s = d.createElement('script');
-            s.src = 'https://client.crisp.chat/l.js';
-            s.async = 1;
-            d.getElementsByTagName('head')[0].appendChild(s);
-          })();
-        `}</Script>
       </html>
-    </PHProvider>
+    </Trackers>
   );
 }
diff --git a/packages/site/middleware.ts b/packages/site/middleware.ts
@@ -25,23 +25,24 @@ export function middleware(request: NextRequest) {
   // options de la politique de sécurité
   const cspHeader = `
     default-src 'self';
-    script-src ${scriptSrc} 
-      *.axept.io 
-      *.posthog.com 
-      client.crisp.chat 
-      *.googletagmanager.com 
-      *.adform.net 
+    script-src ${scriptSrc}
+      *.axept.io
+      *.posthog.com
+      client.crisp.chat
+      *.googletagmanager.com
+      *.adform.net
       https://snap.licdn.com;
     style-src ${styleSrc} client.crisp.chat;
-    img-src 'self' blob: data: 
-      ytimg.com 
-      px.ads.linkedin.com 
-      server.adform.net 
-      https://axeptio.imgix.net 
+    img-src 'self' blob: data:
+      ytimg.com
+      px.ads.linkedin.com
+      server.adform.net
+      https://axeptio.imgix.net
       https://favicons.axept.io
-      https://image.crisp.chat 
-      https://client.crisp.chat 
-      https://px4.ads.linkedin.com 
+      https://image.crisp.chat
+      https://client.crisp.chat
+      https://px4.ads.linkedin.com
+      https://secure.adnxs.com
       ${process.env.NEXT_PUBLIC_STRAPI_URL?.replace(
         'strapiapp',
         'media.strapiapp'

diff --git a/packages/site/providers/posthog.tsx b/packages/site/providers/posthog.tsx
@@ -14,18 +14,137 @@ import Script from 'next/script';
 const client = createTrackingClient(getNextTrackingEnv());
 
 const onConsentSave = () => {
-  client.set_config({persistence: getConsent() ? 'cookie' : 'memory'});
+  client.set_config({ persistence: getConsent() ? 'cookie' : 'memory' });
 };
 
-export const PHProvider = ({children}: {children: React.ReactNode}) => {
+export const Trackers = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <TrackingProvider client={client}>{children}</TrackingProvider>
+
       <Consent
         onConsentSave={onConsentSave}
+        onCookiesComplete={loadScripts}
         consentId={getNextConsentEnvId()}
         script={(props: ScriptLikeProps) => <Script {...props} />}
       />
     </>
   );
 };
+
+function loadScripts(choices: Record<string, boolean | undefined>) {
+  if (choices.crisp) {
+    loadCrispWidget();
+  }
+
+  if (choices.adform) {
+    loadAdform();
+  }
+
+  if (choices.google) {
+    loadGoogleTagManager();
+  }
+
+  if (choices.linkedin) {
+    loadLinkedIn();
+  }
+
+  if (choices.azerion) {
+    loadAzerion();
+  }
+}
+
+function loadCrispWidget() {
+  if (typeof window !== 'undefined') {
+    window.$crisp = [];
+    window.$crisp.push(['set', 'session:segments', [['site public']]]);
+    window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+
+    const d = document;
+    const s = d.createElement('script');
+
+    s.src = 'https://client.crisp.chat/l.js';
+    s.async = true;
+
+    d.getElementsByTagName('head')[0].appendChild(s);
+  }
+}
+
+function loadGoogleTagManager() {
+  if (typeof window !== 'undefined') {
+    window.dataLayer = window.dataLayer || [];
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const gtag = (...args: any[]) => {
+      window.dataLayer?.push(args);
+    };
+
+    gtag('js', new Date());
+    gtag('config', 'DC-2967404');
+
+    const script = document.createElement('script');
+    script.src = 'https://www.googletagmanager.com/gtag/js?id=DC-2967404';
+    script.async = true;
+
+    document.head.appendChild(script);
+  }
+}
+
+function loadAdform() {
+  if (typeof window !== 'undefined') {
+    window._adftrack = Array.isArray(window._adftrack)
+      ? window._adftrack
+      : window._adftrack
+      ? [window._adftrack]
+      : [];
+    window._adftrack.push({
+      HttpHost: 'server.adform.net',
+      pm: 2867378,
+      divider: encodeURIComponent('|'),
+      pagename: encodeURIComponent(
+        '2024-09-territoiresentransitions.fr-PageArrivee-LP'
+      ),
+    });
+    (function () {
+      const s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.async = true;
+      s.src = 'https://s2.adform.net/banners/scripts/st/trackpoint-async.js';
+      const x = document.getElementsByTagName('script')[0];
+      x.parentNode?.insertBefore(s, x);
+    })();
+  }
+}
+
+function loadLinkedIn() {
+  if (typeof window !== 'undefined') {
+    window._linkedin_partner_id = '1701996';
+    window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+    window._linkedin_data_partner_ids.push(window._linkedin_partner_id);
+
+    (function (l) {
+      if (!l) {
+        // @ts-expect-error type unknown
+        window.lintrk = function (a, b) {
+          window.lintrk.q.push([a, b]);
+        };
+        window.lintrk.q = [];
+      }
+      const s = document.getElementsByTagName('script')[0];
+      const b = document.createElement('script');
+      b.type = 'text/javascript';
+      b.async = true;
+      b.src = 'https://snap.licdn.com/li.lms-analytics/insight.min.js';
+      s.parentNode?.insertBefore(b, s);
+    })(window.lintrk);
+  }
+}
+
+function loadAzerion() {
+  if (typeof window !== 'undefined') {
+    const img = new Image();
+    img.src = 'https://secure.adnxs.com/px?id=1827352&t=2';
+    img.width = 1;
+    img.height = 1;
+  }
+}
diff --git a/packages/ui/src/components/tracking/Consent.tsx b/packages/ui/src/components/tracking/Consent.tsx
@@ -1,6 +1,6 @@
 declare global {
   interface Window {
-    axeptioSettings: { clientId: string };
+    axeptioSettings: { clientId: string; userCookiesDomain: string };
     _axcb: { push: (callback: (sdk: unknown) => void) => void };
   }
 }
@@ -42,15 +42,20 @@ export const getNextConsentEnvId = (): string => {
  */
 export function Consent({
   onConsentSave,
+  onCookiesComplete,
   script,
   consentId,
 }: {
-  onConsentSave: () => void;
+  onConsentSave?: () => void;
+  onCookiesComplete?: (choices: Record<string, boolean | undefined>) => void;
   script: (props: ScriptLikeProps) => JSX.Element;
   consentId: string;
 }) {
   if (typeof window !== 'undefined') {
-    window.axeptioSettings = { clientId: consentId };
+    window.axeptioSettings = {
+      clientId: consentId,
+      userCookiesDomain: 'territoiresentransitions.fr',
+    };
   }
 
   return (
@@ -59,9 +64,17 @@ export function Consent({
         src: 'https://static.axept.io/sdk-slim.js',
         onLoad: () => {
           window._axcb.push((sdk) => {
+            // @ts-expect-error type unknown
+            sdk.on(
+              'cookies:complete',
+              (choices: Record<string, boolean | undefined>) => {
+                onCookiesComplete?.(choices);
+              }
+            );
+
             // @ts-expect-error type unknown
             sdk.on('consent:saved', function () {
-              onConsentSave();
+              onConsentSave?.();
             });
           });
         },