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%.
10 lines
299 B
TypeScript
10 lines
299 B
TypeScript
/* eslint-disable */
|
|
export default {
|
|
displayName: 'nx-dev-ui-scrollable-content',
|
|
transform: {
|
|
'^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
|
|
},
|
|
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
|
coverageDirectory: '../../coverage/nx-dev/ui-scrollable-content',
|
|
};
|