9dca7c7025
This PR adds events to track engagement in our docs. Since we use a scrollable `<div>` in our docs, the normal `scroll` events in GA do not work. A new `<ScrollableContent>` component is added that will do two things: - Send `scroll_25`, `scroll_50`, `scroll_75`, and `scroll_90` events whenever the user scrolls to 25%, 50%, 75%, of 90% of the content - Optionally reset scroll top to zero whenever router changes (existing behavior) All of the places where we have content in a scrollable `<div>` is replaced with `<ScrollableContent>`. Note: 90% means user has reached the bottom, since it's not usually possible to get to 100%.
16 lines
440 B
TypeScript
16 lines
440 B
TypeScript
/**
|
|
* Takes in a percentage like 0.33 and rounds to the nearest 0, 25%, 50%, 75%, 90% bucket.
|
|
*/
|
|
export function getScrollDepth(pct: number): 0 | 25 | 50 | 75 | 90 {
|
|
// Anything greater than 0.9 is just 90% and counts as reaching the bottom.
|
|
if (pct >= 0.9) {
|
|
return 90;
|
|
}
|
|
|
|
// Otherwise, divide into quarters (0, 25, 50, 75).
|
|
if (pct < 0.25) return 0;
|
|
if (pct < 0.5) return 25;
|
|
if (pct < 0.75) return 50;
|
|
return 75;
|
|
}
|