-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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.
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
[docs-infra] Remove random layout assignment #40862
Conversation
Netlify deploy previewhttps://deploy-preview-40862--material-ui.netlify.app/ Bundle size report |
React.useEffect(() => { | ||
window.gtag('set', 'user_properties', { | ||
...getApiPageLayout(), | ||
}); | ||
}, []); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could keep GA properties if the default layout is changed?
The current GA behavior is to store layout as user settings. which was a requirement because for the same user we wanted to track the randomly assigned layout and the chosen one.
Since this requirement does not exist now, I propose to move the GA to a system where we track modification instead of the saved state. Each time a user click on one of those button, it send an GA event.
I would want to see who is going for collapsed
Me too and that's par of the reason. I use it when I'm searching for a specific props. And this toggle of collapsed/expanded is for now not visible in our data collected because we only store one state per user. It should be visible in the new one since we will listen at all clicks
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this requirement does not exist now, I propose to move the GA to a system where we track modification instead of the saved state. Each time a user click on one of those button, it send an GA event.
I don't know if we can rely on this data. I have tried a bit https://analytics.google.com/analytics/web/?authuser=1#/analysis/p353089763/edit/6jil-1NpQv-a3sMCL6YFlw
but how to judge people trying one option out and revert to the ones who stays on it?
@@ -64,10 +67,12 @@ export default function ClassesSection(props: ClassesSectionProps) { | |||
level: Level = 'h2', | |||
displayClassKeys, | |||
styleOverridesLink, | |||
defaultLayout, | |||
layoutStorageKey = API_LAYOUT_STORAGE_KEYS.classes, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should have the default values for layoutStorageKey
defined in ApiPage
. I imagine if we override them, we want people to override them for the whole page.
What about adding this piece of code to clean the localeStorage from the experiment? function cleanLayoutStorage() {
const defaultLayout = localStorage.getItem('apiPage_default');
if (defaultLayout === null) {
return;
}
// Those can come from to the random experiement
localStorage.removeItem('apiPage_slots');
localStorage.removeItem('apiPage_props');
localStorage.removeItem('apiPage_classes');
localStorage.removeItem('apiPage_css');
localStorage.removeItem('apiPage_default');
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me — no remarks on my end! 🤙
API page component can get props to:
This should allow to have a specific layout for data grid and save it in distinct key/value. Plus it's flexible since you can customize that at the page level.
The GA behavior is also modified. We stop the experiement so no need to compare the default and current layout.
However it can be interesting in the future to know what people are using per page. So the toggle button send an event to google analytics to know when user modify the layout
See for why: https://groups.google.com/a/mui.com/g/docs-infra/c/bzqriS4u3_M/m/8Me75UBAAgAJ. The layout shifts, it's not a great page load experience.
Preview: https://deploy-preview-40862--material-ui.netlify.app/material-ui/api/alert/
Works as expected. If you go on pickers API page you get a table layout, and on data grid API page you get the list layout 🎉