feat: Analytics scroll depth #12079
feat: Analytics scroll depth #12079
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Bundle ReportChanges will increase total bundle size by 6.02kB (0.03%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
assume 100% progress beyound 95%
| @@ -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" /> | |||
There was a problem hiding this comment.
Probably, we should ask @lizokm
There was a problem hiding this comment.
It doesn't look like we have Plausible installed on dev docs (if it is, it's not hooked up to the company account).
| @@ -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'; | |||
There was a problem hiding this comment.
What is the advantage of having this instead of the script?
There was a problem hiding this comment.
send events dynamically through a hook, nice TS and local DX experience
| if (document.documentElement.scrollHeight - window.innerHeight === 0) { | ||
| return () => {}; | ||
| } | ||
| const debouncedTrackProgress = debounce(trackProgress, 20); |
There was a problem hiding this comment.
As discussed offline: this prevents events from being sent when a user very quickly scrolls to the bottom and then leaves the page - which might not count as a read anyway
There was a problem hiding this comment.
yes, it doesn't happen if you scroll at any reasonable reading speed
There was a problem hiding this comment.
Have you considered using the IntersectionObserver API for this?
There was a problem hiding this comment.
I think the current approach is more precise
the marketing site / blog use the intersection observer and report 100% when the last heading is reached
a useful heuristic, but not very precise
There was a problem hiding this comment.
The IntersectionObserver is more performant and since it's already being used by the marketing site, we should be keeping the measurement methods the same for better comparison.
There was a problem hiding this comment.
please keep in mind the measurement on the marketing sites is very rough (based on headers instead of the actual page scroll)
But I can do it @elijames-codecov
There was a problem hiding this comment.
turns out I had bug in my debounce logic, now it works as intended
it's simple, precise and performant
maybe we should port it to the marketing site @elijames-codecov once we make sure it works well?
There was a problem hiding this comment.
@a-hariti - Glad you got the debounce working! Since we're looking for insights as to which sections the users scroll into (to inform if there's seeing certain content and make content and some layout decisions), each section having a header, IntersectionObserver actually works well for our needs without added complexity and expensive operations...which is why we will continue to use it.
| {props: {readProgress: progress, page: document.title}}, | ||
| ] as const; | ||
| plausible(...args); | ||
| console.log('plausible event', ...args); |
There was a problem hiding this comment.
We probably want to remove this.
There was a problem hiding this comment.
yes, the last thing before merging
|
Are you available to make sure things work as expected after the merge @elijames-codecov? (I don't have access to Analytics) |
|
@a-hariti - Let's launch on Monday. It'll make sure we're all around to catch and fix any issues as they arise. But, I'm very happy to double check our analytics once we launch.
|
closes #12061