feat: add LinkedIn Insight and GTM scripts (#2098)

wilsonrivera · web-flow · commit 826a265f61f9 · 2025-08-06T12:04:56.000-04:00
diff --git a/studio/.env.local.example b/studio/.env.local.example
@@ -17,6 +17,10 @@ NEXT_PUBLIC_SENTRY_CLIENT_REPLAYS_SESSION_SAMPLE_RATE=
 # edge config
 NEXT_PUBLIC_SENTRY_EDGE_SAMPLE_RATE=
 
+# analytics config
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
+NEXT_PUBLIC_LINKEDIN_INSIGHT_ID=
+
 # used by https://docs.sentry.io/platforms/javascript/guides/nextjs/
 # enable this during build to enable sentry support for custom images
 # when using debug, ensure the image was build with SENTRY_DEBUG="true"
diff --git a/studio/next.config.mjs b/studio/next.config.mjs
@@ -57,16 +57,16 @@ const lightweightCspHeader = `
   frame-src 'self' https://js.stripe.com https://hooks.stripe.com ${
     isPreview ? "https://vercel.live/ https://vercel.com" : ""
   };
-  img-src 'self' ${
+  img-src 'self'${
     isPreview
-      ? "https://vercel.live/ https://vercel.com *.pusher.com/ data: blob:"
+      ? " https://vercel.live/ https://vercel.com *.pusher.com/ data: blob:"
       : ""
-  };
+  } *.ads.linkedin.com;
    script-src 'report-sample' 'self' 'unsafe-inline' ${
      allowUnsafeEval ? "'unsafe-eval'" : ""
-   } https://*.wundergraph.com https://js.stripe.com https://maps.googleapis.com https://plausible.io https://wundergraph.com https://static.reo.dev ${
-     isPreview ? "https://vercel.live https://vercel.com" : ""
-   };
+   } https://*.wundergraph.com https://js.stripe.com https://maps.googleapis.com https://plausible.io https://wundergraph.com https://static.reo.dev${
+     isPreview ? " https://vercel.live https://vercel.com" : ""
+   } https://www.googletagmanager.com https://snap.licdn.com;
   manifest-src 'self';
   media-src 'self';
   worker-src 'self' ${isSentryFeatureReplayEnabled ? "blob:" : ""};
diff --git a/studio/src/pages/_document.tsx b/studio/src/pages/_document.tsx
@@ -15,10 +15,27 @@ const getCustomScripts = ():
 
 export default function Document() {
   const scripts = getCustomScripts();
+  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
+  const linkedInInsightId = process.env.NEXT_PUBLIC_LINKEDIN_INSIGHT_ID;
 
   return (
     <Html className="antialiased [font-feature-settings:'ss01']" lang="en">
       <Head>
+        {gtmId && (
+          <script
+            id="gtm"
+            type="text/javascript"
+            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',${JSON.stringify(gtmId)});`,
+            }}
+          />
+        )}
+
         <link
           rel="apple-touch-icon"
           sizes="57x57"
@@ -97,6 +114,17 @@ export default function Document() {
         <meta name="theme-color" content="#ffffff" />
       </Head>
       <body>
+        {gtmId && (
+          <noscript>
+            <iframe
+              src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+              height="0"
+              width="0"
+              style={{ display: "none", visibility: "hidden" }}
+            />
+          </noscript>
+        )}
+
         <Main />
         <NextScript />
 
@@ -114,6 +142,44 @@ export default function Document() {
             />
           ),
         )}
+
+        {linkedInInsightId && (
+          <>
+            <script
+              id="li-insight"
+              type="text/javascript"
+              dangerouslySetInnerHTML={{
+                __html: `
+_linkedin_partner_id = ${JSON.stringify(linkedInInsightId)};
+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);`
+              }}
+            />
+
+            <noscript>
+              <img
+                height="1"
+                width="1"
+                style={{ display: "none" }}
+                alt=""
+                src={`https://px.ads.linkedin.com/collect/?pid=${linkedInInsightId}&fmt=gif`}
+              />
+            </noscript>
+          </>
+        )}
       </body>
     </Html>
   );
