Trustarc - added integration scripts to top of head (#2285)

* added trustarc scripts to top of head

* move to document head and format properly

* added all needed code to document instead of relying on gtm

* fixed reload script

* fixed how script string is loaded

* moved refresh scripts to body

* add cookie preferences for testing

* add correct anchor and styling

* duh

* add expect error

* added reload script

* no track youtube test

* add no-cookie to csp

* added -nocookie to all youtube embeds

* rolling back a few of the youtube urls as they are links not embeds

* removed async from auto block

* updated to have footer in changelog

* merge middleware

* moved all loom embeds to links

* removed all video in description titles, commented out page refresh scripts, added domain cookie persistence

* fixed spelling lint

---------

Co-authored-by: Gabriel Vigil <gabrielvigil@q95h042m26-gabrielvigil.corp.mixpanel.com>

Author: gabrielvigil-mixpanel

README.md

@@ -67,6 +67,13 @@ If you're making a diagram, please add it to this [Figjam](https://www.figma.com
 
 Images are hard to keep up-to-date, so please use them judiciously.
 
+# Adding Youtube Videos
+
+Youtube videos are added through an iframe that embeds the video to the page.
+You can get the source of the video by going to the youtube video, selecting share then the embed option.
+
+Ensure you add `-nocookie` to the url (eg: `https://www.youtube-nocookie.com/embed/sRQCfmvh3vg`) otherwise the video will not work when user blocks cookies. (youtube tracks user data by default)
+
 # Previewing Changes
 
 All pull requests will generate a staging link in Vercel. Here's an [example](https://github.com/mixpanel/docs/pull/33#issuecomment-1520474996). This lets you preview your changes without changing what's actually live.

components/ChangelogIndex.tsx

@@ -27,7 +27,7 @@ const getVideoEmbedURL = (videoURL) => {
     const host = parsedURL.host;
     if (host === "www.youtube.com" || host === "youtube.com" || host === "youtu.be") {
       const videoId = parsedURL.searchParams.get("v") || parsedURL.pathname.split("/").pop();
-      return `https://www.youtube.com/embed/${videoId}`;
+      return `https://www.youtube-nocookie.com/embed/${videoId}`;
     } else if (host === "www.loom.com" || host === "loom.com") {
       const videoId = parsedURL.pathname.split("/").pop();
       return `https://www.loom.com/embed/${videoId}?hideEmbedTopBar=true`;

components/TrustArcScripts/TrustArcScripts.tsx

@@ -0,0 +1,33 @@
+export function TrustArcHeadScripts() {
+    const trustArcAutoBlockCoreSrc = `https://consent.trustarc.com/v2/autoblockasset/core.min.js?cmId=9iv2en`;
+    const trustArcAutoBlockSrc = `https://consent.trustarc.com/v2/autoblock?cmId=9iv2en`;
+    const trustArcInitScriptSrc = `https://consent.trustarc.com/v2/notice/9iv2en?pcookie`;
+
+    return (
+        <>
+            <script src={trustArcAutoBlockCoreSrc} />
+            <script src={trustArcAutoBlockSrc} />
+            <script type="text/javascript" async src={trustArcInitScriptSrc} />
+        </>
+    );
+}
+
+export function TrustArcBodyScripts() {
+    const reloadOnPreferencesScript = `var _STATE={};function runOnce(){!_STATE.hasRunOnce&&window.truste&&truste.eu&&truste.eu.prefclose&&(_STATE.oldValue=truste.eu.bindMap.prefCookie&&truste.eu.bindMap.prefCookie.split(":")[0].replace(/[^\\d.]/g,"-"),_STATE.oldMethod=truste.eu.prefclose,truste.eu.prefclose=function(){_STATE.oldMethod(),truste.eu.bindMap.prefCookie&&truste.eu.bindMap.prefCookie.split(":")[0].replace(/[^\\d.]/g,"-")!==_STATE.oldValue&&setTimeout(function(){window.location.reload()},20)},_STATE.hasRunOnce=!0,_STATE.i&&clearInterval(_STATE.i))}_STATE.i=setInterval(runOnce,10);`;
+
+    const reloadOnBannerScript = `document.body.addEventListener("click",function(t){t&&t.target&&("truste-consent-button"===t.target.id||"truste-consent-required"===t.target.id)&&setTimeout(function(){window.location.reload()},1e3)});`;
+
+    return (
+        <>
+            <script
+                async
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                dangerouslySetInnerHTML={{ __html: reloadOnBannerScript }}
+            />
+            <script
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                dangerouslySetInnerHTML={{ __html: reloadOnPreferencesScript }}
+            />
+        </>
+    );
+}

components/VideoButtonWithModal/VideoButtonWithModal.tsx

@@ -15,6 +15,14 @@ type VideoButtonModalProps = {
 const PLAY_BUTTON_BASE_CLASS =
   "nx-flex nx-items-center nx-px-2 nx-py-1 nx-text-xs nx-font-semibold nx-text-purple140 nx-shadow-sm focus-visible:nx-outline focus-visible:nx-outline-2 focus-visible:nx-outline-offset-2 focus-visible:nx-outline-purple140";
 
+function getLoomShareURL(embedURL: string): string | null {
+  if (!embedURL.includes("loom.com")) {
+    return null;
+  }
+  // Convert loom.com/embed/VIDEO_ID to loom.com/share/VIDEO_ID
+  return embedURL.replace("/embed/", "/share/");
+}
+
 export default function VideoButtonWithModal({
   title = "Video about this feature",
   showThumbnail = true,
@@ -23,6 +31,23 @@ export default function VideoButtonWithModal({
   const embedURL = getVideoEmbedURL(props.src);
   let [isOpen, setIsOpen] = useState(false);
 
+  // If it's a Loom URL, return a simple link instead of the modal
+  const loomShareURL = getLoomShareURL(embedURL);
+  if (loomShareURL) {
+    return (
+      <p style={{ marginTop: "1.5rem" }}>
+        <a 
+          href={loomShareURL} 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]"
+        >
+          Link to Demo
+        </a>
+      </p>
+    );
+  }
+
   // TODO: update this style and abstract it as time allows to a single button component
   // https://www.figma.com/design/8kiticjQNChvsP9y7s9SRf/Product-Releases-(Copy)?node-id=982-75355&node-type=frame&t=O7vwnwoAoOx42stw-0
   const playButtonClass = showThumbnail

components/VideoButtonWithModal/util.ts

@@ -7,7 +7,7 @@ const getYoutubeEmbedURL = (url: string) => {
   const videoId = url.split("v=")[1]
     ? url.split("v=")[1].split("&")[0]
     : url.split("/").pop();
-  return `https://www.youtube.com/embed/${videoId}`;
+  return `https://www.youtube-nocookie.com/embed/${videoId}`;
 };
 
 const getLoomEmbedURL = (url: string) => {

pages/_document.js

@@ -1,10 +1,12 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
+import { TrustArcHeadScripts, TrustArcBodyScripts } from "../components/TrustArcScripts/TrustArcScripts";
 
 export default function Document() {
   return (
     <Html>
-      <Head />
+      <Head>
+        <TrustArcHeadScripts />
+      </Head>
       <body>
         <Main />
         <NextScript />
@@ -52,6 +54,10 @@ export default function Document() {
         </script>
         {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
         <script> </script>
+        {/* Trustarc - body scripts are to refresh page when user changes preferences. Removed at request of legal. Could be necessary for GDPR*/}
+        {/* <TrustArcBodyScripts /> */}
+        <div id="consent-banner"></div>
+        {/* end Trustarc */}
       </body>
     </Html>
   );

pages/changelogs/2023-03-29-custom-alerts.mdx

@@ -9,7 +9,9 @@ date: "2023-03-29"
 
 We’ve revamped Custom Alerts to make it easier for you to notify your team when a metric significantly changes.
 
-<div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}><iframe src="https://www.loom.com/embed/2feb00896e90458e8d085495a2e62f14" frameBorder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}></iframe></div>
+[Link to Demo](https://www.loom.com/share/2feb00896e90458e8d085495a2e62f14)
+
+{/* <div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}><iframe src="https://www.loom.com/embed/2feb00896e90458e8d085495a2e62f14" frameBorder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}></iframe></div> */}
 
 With just one click, you can set up Slack or email alerts for:
 

pages/changelogs/2023-04-06-tables.mdx

@@ -6,7 +6,9 @@ date: "2023-04-06"
 
 With Mixpanel’s revamped Tables report, you can compare your key metrics side-by-side to understand how your segments are performing.
 
-<div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}><iframe src="https://www.loom.com/embed/f3e4791604fb48f9bfad4bee2021decf" frameBorder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}></iframe></div>
+[Link to Demo](https://www.loom.com/share/f3e4791604fb48f9bfad4bee2021decf)
+
+{/* <div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}><iframe src="https://www.loom.com/embed/f3e4791604fb48f9bfad4bee2021decf" frameBorder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}></iframe></div> */}
 
 Tables are often the best visualization to process a lot of data at once — so, we made sure to include controls that can quickly get you to the most readable layout, fast:
 

pages/changelogs/2023-04-14-discover.mdx

@@ -6,13 +6,14 @@ date: "2023-04-14"
 
 Our new Discover feature makes it easier to explore popular analyses to springboard your own work. The Discover page automatically surfaces top analyses and creators and provides more search controls to filter reports & Boards.
 
-<div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
+[Link to Demo](https://www.loom.com/share/5353fc9abb624e2685d787f43b003dc2)
+{/* <div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
     <iframe src="https://www.loom.com/embed/5353fc9abb624e2685d787f43b003dc2"
         frameBorder="0"
         webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen
         style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}>
     </iframe>
-</div>
+</div> */}
 
 Here are a few ways to use Discover:
 

pages/changelogs/2023-05-05-anomaly-detection-and-root-cause-analysis.mdx

@@ -7,21 +7,25 @@ updatedAt: "2023-05-05T17:39:02.165Z"
 date: "2023-05-05"
 ---
 
-<div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
+[Anomaly Detection Demo](https://www.loom.com/share/572a0f59d22e43069ba0c3bc1b4210f4)
+
+{/* <div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
     <iframe src="https://www.loom.com/embed/572a0f59d22e43069ba0c3bc1b4210f4"
         frameBorder="0"
         webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen
         style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}>
     </iframe>
-</div>
+</div> */}
+
+[Root Cause Analysis Demo](https://www.loom.com/share/53fd92c89b394e0c92324a4515e88443)
 
-<div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
+{/* <div style={{position: 'relative', paddingBottom: '64.90384615384616%', height: 0}}>
     <iframe src="https://www.loom.com/embed/53fd92c89b394e0c92324a4515e88443"
         frameBorder="0"
         webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen
         style={{position: 'absolute', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%'}}>
     </iframe>
-</div>
+</div> */}
 
 Introducing Anomaly Detection and Root Cause Analysis, two new features to help you save time staying on top of metrics and getting ahead of potential issues in your product, data, or company.