mixpanel · gabrielvigil-mixpanel · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 19, 2025
@@ -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.

@@ -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`;

@@ -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`;
+
+    return (
+        <>
+            <script src={trustArcAutoBlockCoreSrc} async />
+            <script src={trustArcAutoBlockSrc} async />
+            <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 }}
+            />
+        </>
+    );
+}
@@ -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) => {

@@ -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 />
@@ -47,6 +49,8 @@ export default function Document() {
         </script>
         {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
         <script> </script>
+        <TrustArcBodyScripts />
+        <div id="consent-banner"></div>
       </body>
     </Html>
   );

@@ -17,7 +17,7 @@ The source code for this extension lives [here](https://github.com/mixpanel/shee
 >
   <p>
     <iframe
-      src="https://www.youtube.com/embed/45ZBaJg-oe4"
+      src="https://www.youtube-nocookie.com/embed/45ZBaJg-oe4"
       frameBorder="0"
       webkitallowfullscreen="true"
       mozallowfullscreen="true"

@@ -18,7 +18,7 @@ Mixpanel is built on three key concepts: [**Events**](#events), [**Users**](#use
 >
   <p>
     <iframe
-      src="https://www.youtube.com/embed/sRQCfmvh3vg"
+      src="https://www.youtube-nocookie.com/embed/sRQCfmvh3vg"
       frameBorder="0"
       webkitallowfullscreen="true"
       mozallowfullscreen="true"

@@ -3,7 +3,7 @@ Use our [Funnels](/docs/reports/funnels/funnels-overview) report to analyze wher
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/pyDmLtb9zaU?si=FheBz8dbNC3b8A8s" title="Funnels Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/pyDmLtb9zaU?si=FheBz8dbNC3b8A8s" title="Funnels Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 To follow along the tutorials in this section, we've created [this board](https://mixpanel.com/project/3018488/view/3536632/app/boards/#id=6350527) in our demo project that you can copy into your own project. As you open the linked board, you will see instructions to click on "Use this board" to transfer it over to your project and to edit the default date range.
@@ -17,7 +17,7 @@ To utilize funnels correctly, it's important to understand how the [conversion c
 Go beyond looking at overall conversion, view conversion trend over time, distribution of the time it takes users to convert through the funnel or the number of times users complete any step before converting or dropping off. Add more specificity to your conversion criteria by holding a [property constant](/docs/reports/funnels/funnels-advanced#hold-property-constant) over steps or [exclude users who did a particular step](/docs/reports/funnels/funnels-advanced#exclusion-steps-exclude-users-who-did).
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/M66XGPcCOgU?si=aCQPEw3F_eqmg3tI" title="Funnels - Advanced Features" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/M66XGPcCOgU?si=aCQPEw3F_eqmg3tI" title="Funnels - Advanced Features" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Viewing as a Flow

@@ -3,7 +3,7 @@ Use [Flows](/docs/reports/flows) to help you identify the most frequent paths ta
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/0eLiOGmeo0A?rel=0" title="Flows Overview and Top Paths" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/0eLiOGmeo0A?rel=0" title="Flows Overview and Top Paths" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 To follow along this tutorial, create a copy of [this board](https://mixpanel.com/project/3018488/view/3536632/app/boards/#id=6350517) from our demo project into the your own project. As you open the linked board, you will see instructions to click on "Use this board" to transfer it over to your project and to edit the default date range.

@@ -11,7 +11,7 @@ Think of [Boards](/docs/boards) as your homepage for keeping track of your most
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/zbbMNJOvxMk?rel=0" title="Create Boards and Templates" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/zbbMNJOvxMk?rel=0" title="Create Boards and Templates" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Discovering Useful Boards

@@ -4,7 +4,7 @@
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/iM2XaDUKdiI?rel=0" title="Users and Cohorts" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/iM2XaDUKdiI?rel=0" title="Users and Cohorts" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Recommended Boards

@@ -4,7 +4,7 @@
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/scBPtq7B81Y?rel=0" title="Insights Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/scBPtq7B81Y?rel=0" title="Insights Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 To follow along the tutorials in this section, we've created [this board](https://mixpanel.com/project/3018488/view/3536632/app/boards/#id=6350535) in our demo project that you can copy into your own project. As you open the linked board, you will see instructions to click on "Use this board" to transfer it over to your project and to edit the default date range.
@@ -17,14 +17,14 @@ You can use Insights to see what events users are doing on your site, and visual
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/Q0fmB14Iwfw?rel=0" title="Insights Trends and Counting Users" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/Q0fmB14Iwfw?rel=0" title="Insights Trends and Counting Users" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 The following video looks at how you can leverage filters and breakdowns to hone in on specific data subsets that you care about or to dive deeper and segment your users by their different event or user attributes.
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/DRHOI4YNg14?rel=0" title="Insights Filters and Breakdown" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/DRHOI4YNg14?rel=0" title="Insights Filters and Breakdown" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Formula, Custom Events and Properties and Custom Buckets
@@ -41,21 +41,21 @@ The following video looks at how you can leverage formulas, custom events and pr
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/jQ2gJsb83E8?rel=0" title="Insights Formulas, Custom Events and Properties" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/jQ2gJsb83E8?rel=0" title="Insights Formulas, Custom Events and Properties" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Behavioral Breakdowns
 Other more advanced questions that Insights can help answer include: how you can segment your users not just by who they are (i.e. user attributes), but what they do. This is a common ask from product managers - to be able to understand for example the number of times users typically view a product before purchasing. Or more simply, you might be interested in looking at what the distribution of your cart value per user is, or the distinct number of days a month that a user might come to your site to make a purchase. The following video walks through some of these examples:
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/v_SKV3080yg?rel=0" title="Insights Behavioral Segmentation" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/v_SKV3080yg?rel=0" title="Insights Behavioral Segmentation" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Creating Alerts
 Once you've created a report for a key metric you want to track for instance, you can create an [alert](/docs/features/alerts) to monitor how they perform, either by setting explicit thresholds, or setting up automatic anomaly detections. This video walks through how you can set up such alerts to your email or Slack.
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/tqrqIkCjoWw?rel=0" title="Creating Alerts" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/tqrqIkCjoWw?rel=0" title="Creating Alerts" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
@@ -4,7 +4,7 @@ Our [Retention](/docs/reports/retention) report in Mixpanel is designed to help
 
 <br />
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/9AM6fOH91Z4?rel=0" title="Retention Reports Overview and Retention Criteria" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/9AM6fOH91Z4?rel=0" title="Retention Reports Overview and Retention Criteria" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 
@@ -18,7 +18,7 @@ Define retention analysis to calculate users who come back on a specific time un
 ## Understanding Frequency Criteria
 
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/6VOSoHhRUo0?rel=0" title="Retention Advanced Features and Frequency Analysis" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/6VOSoHhRUo0?rel=0" title="Retention Advanced Features and Frequency Analysis" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 Define retention analysis to calculate users who did the event in at least X unique intervals or in exactly X unique intervals.
@@ -36,7 +36,7 @@ Heatmaps and Session Replay combine the “what” and the “why” of user beh
       >
         <iframe
           title="Mixpanel Heatmaps"
-          src="https://www.youtube.com/embed/af7D3exv610"
+          src="https://www.youtube-nocookie.com/embed/af7D3exv610"
           frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen
@@ -86,7 +86,7 @@ Heatmaps and Session Replay combine the “what” and the “why” of user beh
       >
         <iframe
           title="Mixpanel Session Replay"
-          src="https://www.youtube.com/embed/eig_Ta-0yZc"
+          src="https://www.youtube-nocookie.com/embed/eig_Ta-0yZc"
           frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen

@@ -46,7 +46,7 @@ Before you dive into best practices, take a quick look at how experimentation wo
       >
         <iframe
           title="Mixpanel Experiments"
-          src="https://www.youtube.com/embed/LZfIPCXcIPE"
+          src="https://www.youtube-nocookie.com/embed/LZfIPCXcIPE"
           frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen

@@ -36,7 +36,7 @@ Mixpanel is a **digital analytics platform** that helps teams continuously impro
       >
         <iframe
           title="Mixpanel Overview"
-          src="https://www.youtube.com/embed/sRQCfmvh3vg"
+          src="https://www.youtube-nocookie.com/embed/sRQCfmvh3vg"
           frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen

@@ -1,7 +1,7 @@
 # Onboarding Playbook
 
 <p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
-  <iframe src="https://www.youtube.com/embed/b_cIqQ5vgSI?rel=0" title="Onboarding Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
+  <iframe src="https://www.youtube-nocookie.com/embed/b_cIqQ5vgSI?rel=0" title="Onboarding Overview" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}></iframe>
 </p>
 
 ## Methodology