Skip to content

feat: Analytics scroll depth #12079

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jan 9, 2025
Merged

feat: Analytics scroll depth #12079

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0f81d80
use Next.js integration for Plausible
a-hariti Dec 9, 2024
c12c0ca
feat: report scroll depth to Plausible
a-hariti Dec 10, 2024
c26bb44
[getsentry/action-github-commit] Auto commit
getsantry[bot] Dec 10, 2024
125bf64
use the more supported 'scroll' event instead of 'scrollend'
a-hariti Dec 10, 2024
6abf7e5
don't track scroll depth on short (non scrollable) pages
a-hariti Dec 10, 2024
0f32831
remove Plausible local dev setup
a-hariti Dec 10, 2024
6ccc03c
adjust debounce logic
a-hariti Dec 13, 2024
ca0eecb
.
a-hariti Dec 13, 2024
4b82d07
delete console.log
a-hariti Dec 13, 2024
e2cb24b
Merge branch 'master' into analytics-scroll-depth
a-hariti Jan 7, 2025
5eeb288
[getsentry/action-github-commit] Auto commit
getsantry[bot] Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

@chargome chargome Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the advantage of having this instead of the script?

Copy link
Collaborator Author

@a-hariti a-hariti Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

send events dynamically through a hook, nice TS and local DX experience


import {ThemeProvider} from 'sentry-docs/components/theme-provider';

Expand Down Expand Up @@ -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" />
Copy link
Member

@chargome chargome Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need dev docs as well?

Copy link
Collaborator Author

@a-hariti a-hariti Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably, we should ask @lizokm

Copy link
Contributor

@elijames-codecov elijames-codecov Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look like we have Plausible installed on dev docs (if it is, it's not hooked up to the company account).

</head>
<body className={rubik.variable} suppressHydrationWarning>
<ThemeProvider
attribute="class"
Expand All @@ -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>
);
}
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -137,4 +138,4 @@
"node": "20.11.0",
"yarn": "1.22.22"
}
}
}
2 changes: 2 additions & 0 deletions src/components/docPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -114,6 +115,7 @@ export function DocPage({
</main>
</section>
<Mermaid />
<ReaderDepthTracker />
</div>
);
}
65 changes: 65 additions & 0 deletions src/components/track-reader-depth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Check warning on line 22 in src/components/track-reader-depth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected console statement
Copy link
Contributor

@elijames-codecov elijames-codecov Dec 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably want to remove this.

Copy link
Collaborator Author

@a-hariti a-hariti Dec 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, the last thing before merging

};

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, 50);

window.addEventListener('scroll', debouncedTrackProgress);
return () => {
window.removeEventListener('scroll', debouncedTrackProgress);
};
});
// do not render anything
return null;
}
14 changes: 14 additions & 0 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,17 @@ 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.
* @returns A debounced function that only calls the original function after the wait time has passed.
*/
export function debounce<T extends unknown[]>(func: (...args: T) => void, delay: number) {
let timer: ReturnType<typeof setTimeout>;
return function (...args: T) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading