feat: add analytic scripts

studio/.env.local.example

@@ -18,8 +18,9 @@ NEXT_PUBLIC_SENTRY_CLIENT_REPLAYS_SESSION_SAMPLE_RATE=
 NEXT_PUBLIC_SENTRY_EDGE_SAMPLE_RATE=
 
 # analytics config
+NEXT_PUBLIC_OSANO_SCRIPT_ID=
 NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
-NEXT_PUBLIC_LINKEDIN_INSIGHT_ID=
+NEXT_PUBLIC_ACTIVE_CAMPAIGN_ACCOUNT=
 
 # used by https://docs.sentry.io/platforms/javascript/guides/nextjs/
 # enable this during build to enable sentry support for custom images

studio/src/components/layout/analytics/active-campaign-script.tsx

@@ -0,0 +1,60 @@
+import Script from "next/script";
+
+const ACTIVE_CAMPAIGN_SCRIPT_SRC = 'https://diffuser-cdn.app-us1.com/diffuser/diffuser.js';
+
+export function ActiveCampaignScript() {
+  const acAccount = process.env.NEXT_PUBLIC_ACTIVE_CAMPAIGN_ACCOUNT;
+  if (!acAccount || process.env.NODE_ENV !== 'production') {
+    return null;
+  }
+
+  return (
+    <Script id="active-campaign" strategy="afterInteractive">{`
+(function () {
+  let loaded = false;
+  function loadActiveCampaign() {
+    if (loaded) {
+      return;
+    }
+
+    loaded = true;
+    (function(e,t,o,n,p,r,i){
+      e.visitorGlobalObjectAlias=n;
+      e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){
+        (e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)
+      };
+      e[e.visitorGlobalObjectAlias].l=(new Date).getTime();
+      r=t.createElement("script"); r.src=o; r.async=true;
+      i=t.getElementsByTagName("script")[0]; i.parentNode.insertBefore(r,i);
+    })(window,document,${JSON.stringify(ACTIVE_CAMPAIGN_SCRIPT_SRC)},"vgo");
+
+    vgo('setAccount', ${JSON.stringify(acAccount)});
+    vgo('setTrackByDefault', false);
+    vgo('process', 'allowTracking');
+  }
+
+  function updateConsentFromOsano() {
+    const consent = window.Osano && Osano.cm && Osano.cm.getConsent ? Osano.cm.getConsent() : null;
+    const marketing = (consent && consent.MARKETING === 'ACCEPT' || !!(window.Osano && Osano.cm && Osano.cm.marketing));
+    const analytics = (consent && consent.ANALYTICS === 'ACCEPT' || !!(window.Osano && Osano.cm && Osano.cm.analytics));
+
+    if (marketing || analytics) {
+      loadActiveCampaign();
+    }
+  }
+
+  function onOsanoReady() {
+    updateConsentFromOsano();
+    Osano.cm.addEventListener('osano-cm-marketing', loadActiveCampaign);
+    Osano.cm.addEventListener('osano-cm-analytics', loadActiveCampaign);
+    Osano.cm.addEventListener('osano-cm-consent-changed', updateConsentFromOsano);
+  }
+  if (window.Osano && Osano.cm) {
+    onOsanoReady();
+  } else {
+    window.addEventListener('osano-cm-initialized', onOsanoReady, { once: true });
+  }
+})();
+`}</Script>
+  );
+}

studio/src/components/layout/analytics/gtm-script.tsx

@@ -0,0 +1,72 @@
+import Script from "next/script";
+
+export function GtmScript() {
+  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
+  if (!gtmId || process.env.NODE_ENV !== 'production') {
+    // return null;
+  }
+
+  return (
+    <>
+      <Script id="gtm" strategy="afterInteractive">{`
+        (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)});
+      `}</Script>
+
+      <Script id="gtm-consent" strategy="afterInteractive">{`
+(function(){
+  function updateConsentFromOsano() {
+    const consent = window.Osano && Osano.cm && Osano.cm.getConsent ? Osano.cm.getConsent() : null;
+    const marketing = (consent && consent.MARKETING === 'ACCEPT' || !!(window.Osano && Osano.cm && Osano.cm.marketing));
+    const analytics = (consent && consent.ANALYTICS === 'ACCEPT' || !!(window.Osano && Osano.cm && Osano.cm.analytics));
+
+    if (typeof gtag === 'function') {
+      gtag('consent', 'update', {
+        ad_storage: marketing ? 'granted' : 'denied',
+        ad_user_data: marketing ? 'granted' : 'denied',
+        ad_personalization: marketing ? 'granted' : 'denied',
+        analytics_storage: analytics ? 'granted' : 'denied',
+        functionality_storage: 'granted',
+        security_storage: 'granted'
+      });
+    }
+  }
+
+  function onOsanoReady() {
+    updateConsentFromOsano();
+    Osano.cm.addEventListener('osano-cm-consent-changed', updateConsentFromOsano);
+  }
+  if (window.Osano && Osano.cm) {
+    onOsanoReady();
+  } else {
+    window.addEventListener('osano-cm-initialized', onOsanoReady, { once: true });
+  }
+})();
+      `}</Script>
+    </>
+  );
+}
+
+export function GtmNoScript() {
+  const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
+  if (!gtmId || process.env.NODE_ENV !== 'production') {
+    return null;
+  }
+
+  return (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+        height="0"
+        width="0"
+        style={{ display: "none", visibility: "hidden" }}
+      />
+    </noscript>
+  );
+}

studio/src/pages/_document.tsx

@@ -1,5 +1,7 @@
 import { Head, Html, Main, NextScript } from "next/document";
 import Script from "next/script";
+import { GtmNoScript, GtmScript } from "@/components/layout/analytics/gtm-script";
+import { ActiveCampaignScript } from "@/components/layout/analytics/active-campaign-script";
 
 const getCustomScripts = ():
   | { src: string; id: string; inline?: boolean }[]
@@ -14,27 +16,39 @@ const getCustomScripts = ():
 };
 
 export default function Document() {
-  const scripts = getCustomScripts();
+  const osanoScriptId = process.env.NEXT_PUBLIC_OSANO_SCRIPT_ID;
   const gtmId = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
-  const linkedInInsightId = process.env.NEXT_PUBLIC_LINKEDIN_INSIGHT_ID;
+  const isProduction = process.env.NODE_ENV !== 'production';
+  const scripts = getCustomScripts();
 
   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)});`,
-            }}
-          />
+        {isProduction && (
+          <>
+            {osanoScriptId && (
+              <Script
+                id="osano-cmp"
+                src={`https://cmp.osano.com/${osanoScriptId}/osano.js`}
+                strategy="beforeInteractive"
+              />
+            )}
+
+            {gtmId && (
+              <Script id="gtm-default" strategy="beforeInteractive">{`window.dataLayer = window.dataLayer || [];
+function gtag(){ dataLayer.push(arguments); }
+gtag('consent', 'default', {
+  ad_storage: 'denied',
+  ad_user_data: 'denied',
+  ad_personalization: 'denied',
+  analytics_storage: 'denied',
+  functionality_storage: 'granted', // essentials
+  security_storage: 'granted'
+});`}</Script>
+            )}
+          </>
         )}
+        <GtmScript />
 
         <link
           rel="apple-touch-icon"
@@ -114,17 +128,7 @@ 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>
-        )}
-
+        <GtmNoScript />
         <Main />
         <NextScript />
 
@@ -143,43 +147,7 @@ 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>
-          </>
-        )}
+        <ActiveCampaignScript />
       </body>
     </Html>
   );