Tracking du site pour la campagne ADEME

package.json

@@ -23,6 +23,7 @@
     "@nestjs/platform-express": "^10.4.4",
     "@nestjs/swagger": "^7.4.2",
     "@next/mdx": "^13.5.6",
+    "@next/third-parties": "^14.2.13",
     "@nivo/axes": "^0.81.0",
     "@nivo/bar": "^0.81.0",
     "@nivo/core": "^0.81.0",

packages/site/app/layout.tsx

@@ -1,6 +1,8 @@
 import './global.css';
 import AppHeader from './AppHeader';
 import { Metadata, Viewport } from 'next';
+import Script from 'next/script';
+import { GoogleTagManager } from '@next/third-parties/google';
 import { getMetaData } from './utils';
 import Footer from '@tet/site/components/layout/Footer';
 import { PHProvider } from '@tet/site/providers/posthog';
@@ -80,7 +82,61 @@ export default function RootLayout({ children }: { children: JSX.Element }) {
           </div>
           <Footer />
           <TrackPage />
+
+          <noscript>
+            <img
+              height="1"
+              width="1"
+              style={{ display: 'none' }}
+              alt=""
+              src="https://px.ads.linkedin.com/collect/?pid=1701996&fmt=gif"
+            />
+          </noscript>
+
+          <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>
         </body>
+
+        <GoogleTagManager gtmId="DC-2967404" />
+
+        <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);
+            </script><script type="text/javascript">
+            (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>
+
+        <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>
       </html>
     </PHProvider>
   );

packages/site/components/carte/CarteContainer.tsx

@@ -13,7 +13,6 @@ import './style.css';
  */
 function Debugger() {
   const map = useMap();
-  // @ts-expect-error erreur non gérée
   window['map'] = map;
   return null;
 }

packages/site/middleware.ts

@@ -1,4 +1,4 @@
-import {NextRequest, NextResponse} from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 
 /**
  * Middleware pour ajouter à chaque requête les en-têtes CSP
@@ -25,11 +25,11 @@ export function middleware(request: NextRequest) {
   // options de la politique de sécurité
   const cspHeader = `
     default-src 'self';
-    script-src ${scriptSrc} *.axept.io *.posthog.com;  
+    script-src ${scriptSrc} *.axept.io *.posthog.com *.googletagmanager.com *.adform.net;  
     style-src ${styleSrc};
-    img-src 'self' blob: data: ytimg.com ${process.env.NEXT_PUBLIC_STRAPI_URL?.replace(
+    img-src 'self' blob: data: ytimg.com px.ads.linkedin.com server.adform.net ${process.env.NEXT_PUBLIC_STRAPI_URL?.replace(
       'strapiapp',
-      'media.strapiapp',
+      'media.strapiapp'
     )};
     font-src 'self';
     object-src 'none';
@@ -42,7 +42,7 @@ export function middleware(request: NextRequest) {
     base-uri 'self';
     form-action 'self';
     frame-ancestors 'none';
-    frame-src youtube.com www.youtube.com dailymotion.com www.dailymotion.com;
+    frame-src youtube.com www.youtube.com dailymotion.com www.dailymotion.com *.adform.net;
     block-all-mixed-content;
     upgrade-insecure-requests;
 `;
@@ -57,14 +57,14 @@ export function middleware(request: NextRequest) {
   requestHeaders.set('x-nonce', nonce);
   requestHeaders.set(
     'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue,
+    contentSecurityPolicyHeaderValue
   );
 
   // ajoute les en-têtes à la réponse
-  const response = NextResponse.next({request: {headers: requestHeaders}});
+  const response = NextResponse.next({ request: { headers: requestHeaders } });
   response.headers.set(
     'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue,
+    contentSecurityPolicyHeaderValue
   );
 
   return response;
@@ -85,8 +85,8 @@ export const config = {
     {
       source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
       missing: [
-        {type: 'header', key: 'next-router-prefetch'},
-        {type: 'header', key: 'purpose', value: 'prefetch'},
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
       ],
     },
   ],

packages/ui/src/components/tracking/Consent.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+declare global {
+  interface Window {
+    axeptioSettings: { clientId: string };
+    _axcb: { push: (callback: (sdk: unknown) => void) => void };
+  }
+}
 
 /**
  * Une partie des props du composant Script de Next.
@@ -45,18 +50,16 @@ export function Consent({
   consentId: string;
 }) {
   if (typeof window !== 'undefined') {
-    // @ts-expect-error typage dynamique
     window.axeptioSettings = { clientId: consentId };
   }
 
   return (
     <>
       {script({
-        src: 'https://static.axept.io/sdk.js',
+        src: 'https://static.axept.io/sdk-slim.js',
         onLoad: () => {
-          // @ts-expect-error typage dynamique
-          window._axcb.push(function (sdk: unknown) {
-            // @ts-expect-error typage dynamique
+          window._axcb.push((sdk) => {
+            // @ts-expect-error type unknown
             sdk.on('consent:saved', function () {
               onConsentSave();
             });