getsentry · a-hariti · Jan 9, 2025 · Dec 9, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,7 @@ import './globals.css';
 import {Theme} from '@radix-ui/themes';
 import type {Metadata} from 'next';
 import {Rubik} from 'next/font/google';
-import Script from 'next/script';
+import PlausibleProvider from 'next-plausible';
 
 import {ThemeProvider} from 'sentry-docs/components/theme-provider';
 
@@ -31,6 +31,9 @@ export const metadata: Metadata = {
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <PlausibleProvider domain="docs.sentry.io,rollup.sentry.io" />
+      </head>
       <body className={rubik.variable} suppressHydrationWarning>
         <ThemeProvider
           attribute="class"
@@ -43,12 +46,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
           </Theme>
         </ThemeProvider>
       </body>
-      <Script
-        defer
-        data-domain="docs.sentry.io,rollup.sentry.io"
-        data-api="https://plausible.io/api/event"
-        src="https://plausible.io/js/script.tagged-events.js"
-      />
     </html>
   );
 }
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "micromark": "^4.0.0",
     "next": "15.0.3",
     "next-mdx-remote": "^4.4.1",
+    "next-plausible": "^3.12.4",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.6",
     "parse-numeric-range": "^1.3.0",
@@ -137,4 +138,4 @@
     "node": "20.11.0",
     "yarn": "1.22.22"
   }
-}
+}
diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
@@ -19,6 +19,7 @@ import {PaginationNav} from '../paginationNav';
 import {PlatformSdkDetail} from '../platformSdkDetail';
 import {Sidebar} from '../sidebar';
 import {TableOfContents} from '../tableOfContents';
+import {ReaderDepthTracker} from '../track-reader-depth';
 
 type Props = {
   children: ReactNode;
@@ -114,6 +115,7 @@ export function DocPage({
         </main>
       </section>
       <Mermaid />
+      <ReaderDepthTracker />
     </div>
   );
 }
diff --git a/src/components/track-reader-depth.tsx b/src/components/track-reader-depth.tsx
@@ -0,0 +1,65 @@
+'use client';
+import {useEffect} from 'react';
+import {usePlausible} from 'next-plausible';
+
+import {debounce} from 'sentry-docs/utils';
+
+const EVENT = 'Read Progress';
+const milestones = [25, 50, 75, 100] as const;
+type Milestone = (typeof milestones)[number];
+type EVENT_PROPS = {page: string; readProgress: Milestone};
+
+export function ReaderDepthTracker() {
+  const plausible = usePlausible<{[EVENT]: EVENT_PROPS}>();
+
+  const sendProgressToPlausible = (progress: Milestone) => {
+    // TODO: remove this after PR review
+    const args = [
+      EVENT,
+      {props: {readProgress: progress, page: document.title}},
+    ] as const;
+    plausible(...args);
+    console.log('plausible event', ...args);
+  };
+
+  useEffect(() => {
+    const reachedMilestones = new Set<Milestone>();
+
+    const trackProgress = () => {
+      // calculate the progress based on the scroll position
+      const scrollPosition = window.scrollY;
+      const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+      let progress = Math.floor((scrollPosition / totalHeight) * 100);
+      // it's hard to trigger the 100% milestone, so we'll just assume beyond 95%
+      if (progress > 95) {
+        progress = 100;
+      }
+
+      // find the biggest milestone that has not been reached yet
+      const milestone = milestones.findLast(
+        m =>
+          progress >= m &&
+          !reachedMilestones.has(m) &&
+          // we shouldn't report smaller milestones once a bigger one has been reached
+          Array.from(reachedMilestones).every(r => m > r)
+      );
+      if (milestone) {
+        reachedMilestones.add(milestone);
+        sendProgressToPlausible(milestone);
+      }
+    };
+
+    // if the page is not scrollable, we don't need to track anything
+    if (document.documentElement.scrollHeight - window.innerHeight === 0) {
+      return () => {};
+    }
+    const debouncedTrackProgress = debounce(trackProgress, 20);
+
+    window.addEventListener('scroll', debouncedTrackProgress);
+    return () => {
+      window.removeEventListener('scroll', debouncedTrackProgress);
+    };
+  });
+  // do not render anything
+  return null;
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -106,3 +106,27 @@ export const isLocalStorageAvailable = () => typeof localStorage !== 'undefined'
 export const stripTrailingSlash = (url: string) => {
   return url.replace(/\/$/, '');
 };
+
+/**
+ * Debounce function to limit the number of times a function is called.
+ * @param func The function to be debounced.
+ * @param wait The time to wait before calling the function.
+ * @param immediate Whether to call the function immediately.
+ * @returns A debounced function.
+ * @see https://davidwalsh.name/javascript-debounce-function
+ */
+export function debounce(func: Function, wait = 20, immediate = true) {
+  let timeout: ReturnType<typeof setTimeout> | null;
+  return function () {
+    const context = this;
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9897,6 +9897,11 @@ next-mdx-remote@^4.4.1:
     vfile "^5.3.0"
     vfile-matter "^3.0.1"
 
+next-plausible@^3.12.4:
+  version "3.12.4"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.12.4.tgz#d0ac1d7dcbe9836b6c93e37d42b80e3661fdaa34"
+  integrity sha512-cD3+ixJxf8yBYvsideTxqli3fvrB7R4BXcvsNJz8Sm2X1QN039WfiXjCyNWkub4h5++rRs6fHhchUMnOuJokcg==
+
 next-themes@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"