Skip to content
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] Improve ad display #21246

Merged

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented May 30, 2020

  • Try different placements randomly, per session
  • Add analytics to check which placement works best
  • The last time we had an ad on the tocs was in v1: https://v1.material-ui.com/demos/autocomplete/.
  • We have longer and longer documentation pages (making improvements after improvements), to account for it, the ad can now be displayed in the middle of the page, but at most every 8 demos and 4.5 screen height. In practice, it means that the short pages (e.g. Link) have 1 ad, the medium pages (e.g. Breadcrumb) have 2, and the long pages (e.g. Autocomplete) have 3.
  • The approach taken optimizes for less layout shift
  • I hope that the changes won't harm the DX, I have made them considering how I would best enjoy consuming the documentation, as a user

Why

  • Ad revenues have been flattening lately while the volume of usage of the documentation grew and the other sources grew. Something is off.
  • Remove an incentive to break down the long pages of the documentation to optimize for ad revenue (more pages = more display). The incentive should be solely about improving the DX.
  • Explore the options we have available (random new placement + analytics to measure)

Benchmark

  1. Ad at the top of the drawer: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html.
  2. Ad at to the bottom of the drawer: https://react.semantic-ui.com/views/comment/.
  3. "native ad" at the bottom of the drawer: https://materializecss.com/buttons.html or https://d.pr/i/XifOZH
  4. "native ad" at the bottom of the demos, after the interaction: https://react.semantic-ui.com/views/comment/#variations-minimal

Capture d’écran 2020-05-30 à 00 49 28

  1. Ad to the top of the TOC: https://materializecss.com/buttons.html
  2. Ad to the bottom of the TOC: https://vuejs.org/v2/guide/events.html#Key-Codes.
  3. Ad jump layout: https://stackoverflow.com/questions/687948/timeout-a-command-in-bash-without-unnecessary-delay.
  4. More ad as the user consume the content: https://vuetifyjs.com/en/components/banners/.

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label May 30, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented May 30, 2020

Details of bundle changes.

Comparing: f9b581e...2209c6a

Details of page changes
bundle Size Change Size Gzip Change Gzip
/blog/material-ui-v1-is-out ▲ +10 B (+0.15% ) 6.67 kB -- -1 B
/_app -- 37.4 kB -- -1 B
/api-docs/alert-title -- 1.4 kB -- -1 B
/api-docs/alert -- 2.4 kB -- -1 B
/api-docs/app-bar -- 1.94 kB -- -1 B
/api-docs/autocomplete -- 4.61 kB -- -1 B
/api-docs/avatar-group -- 1.51 kB -- -1 B
/api-docs/avatar -- 1.86 kB -- -1 B
/api-docs/backdrop -- 1.72 kB -- -1 B
/api-docs/badge -- 2.13 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.81 kB -- -1 B
/api-docs/bottom-navigation -- 1.7 kB -- -1 B
/api-docs/breadcrumbs -- 1.79 kB -- -1 B
/api-docs/button-base -- 2.22 kB -- -1 B
/api-docs/button-group -- 2.22 kB -- -1 B
/api-docs/button -- 2.53 kB -- -1 B
/api-docs/card-action-area -- 1.58 kB -- -1 B
/api-docs/card-actions -- 1.47 kB -- -1 B
/api-docs/card-content -- 1.45 kB -- -1 B
/api-docs/card-header -- 1.78 kB -- -1 B
/api-docs/card-media -- 1.69 kB -- -1 B
/api-docs/card -- 1.5 kB -- -1 B
/api-docs/checkbox -- 2.3 kB -- -1 B
/api-docs/chip -- 2.46 kB -- -1 B
/api-docs/circular-progress -- 2.07 kB -- -1 B
/api-docs/click-away-listener -- 1.44 kB -- -1 B
/api-docs/collapse -- 2.13 kB -- -1 B
/api-docs/container -- 1.86 kB -- -1 B
/api-docs/css-baseline -- 1.4 kB -- -1 B
/api-docs/dialog-actions -- 1.47 kB -- -1 B
/api-docs/dialog-content-text -- 1.48 kB -- -1 B
/api-docs/dialog-content -- 1.45 kB -- -1 B
/api-docs/dialog-title -- 1.49 kB -- -1 B
/api-docs/dialog -- 2.73 kB -- -1 B
/api-docs/divider -- 1.81 kB -- -1 B
/api-docs/drawer -- 2.13 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.49 kB -- -1 B
/api-docs/expansion-panel-details -- 1.41 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.72 kB -- -1 B
/api-docs/expansion-panel -- 1.97 kB -- -1 B
/api-docs/fab -- 2.09 kB -- -1 B
/api-docs/fade -- 1.5 kB -- -1 B
/api-docs/filled-input -- 2.87 kB -- -1 B
/api-docs/form-control-label -- 1.98 kB -- -1 B
/api-docs/form-control -- 2.36 kB -- -1 B
/api-docs/form-group -- 1.55 kB -- -1 B
/api-docs/form-helper-text -- 1.91 kB -- -1 B
/api-docs/form-label -- 1.84 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.8 kB -- -1 B
/api-docs/grid-list-tile -- 1.72 kB -- -1 B
/api-docs/grid-list -- 1.62 kB -- -1 B
/api-docs/grid -- 2.56 kB -- -1 B
/api-docs/grow -- 1.55 kB -- -1 B
/api-docs/hidden -- 1.53 kB -- -1 B
/api-docs/icon-button -- 2.08 kB -- -1 B
/api-docs/icon -- 1.78 kB -- -1 B
/api-docs/input-adornment -- 1.93 kB -- -1 B
/api-docs/input-base -- 2.95 kB -- -1 B
/api-docs/input-label -- 2.07 kB -- -1 B
/api-docs/input -- 2.83 kB -- -1 B
/api-docs/linear-progress -- 2.03 kB -- -1 B
/api-docs/link -- 1.93 kB -- -1 B
/api-docs/list-item-avatar -- 1.5 kB -- -1 B
/api-docs/list-item-icon -- 1.51 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.47 kB -- -1 B
/api-docs/list-item-text -- 1.79 kB -- -1 B
/api-docs/list-item -- 2.25 kB -- -1 B
/api-docs/list-subheader -- 1.77 kB -- -1 B
/api-docs/list -- 1.68 kB -- -1 B
/api-docs/menu-item -- 1.74 kB -- -1 B
/api-docs/menu-list -- 1.57 kB -- -1 B
/api-docs/menu -- 2.4 kB -- -1 B
/api-docs/mobile-stepper -- 1.93 kB -- -1 B
/api-docs/modal -- 2.42 kB -- -1 B
/api-docs/native-select -- 2.11 kB -- -1 B
/api-docs/no-ssr -- 1.3 kB -- -1 B
/api-docs/outlined-input -- 2.98 kB -- -1 B
/api-docs/pagination-item -- 1.97 kB -- -1 B
/api-docs/pagination -- 2.24 kB -- -1 B
/api-docs/paper -- 1.87 kB -- -1 B
/api-docs/popover -- 2.69 kB -- -1 B
/api-docs/popper -- 1.91 kB -- -1 B
/api-docs/portal -- 1.34 kB -- -1 B
/api-docs/radio-group -- 1.45 kB -- -1 B
/api-docs/radio -- 2.12 kB -- -1 B
/api-docs/rating -- 2.49 kB -- -1 B
/api-docs/root-ref -- 1.41 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.4 kB -- -1 B
/api-docs/select -- 2.96 kB -- -1 B
/api-docs/skeleton -- 1.87 kB -- -1 B
/api-docs/slide -- 1.54 kB -- -1 B
/api-docs/slider -- 3.11 kB -- -1 B
/api-docs/snackbar-content -- 1.61 kB -- -1 B
/api-docs/snackbar -- 2.71 kB -- -1 B
/api-docs/speed-dial-action -- 2.04 kB -- -1 B
/api-docs/speed-dial-icon -- 1.55 kB -- -1 B
/api-docs/speed-dial -- 2.3 kB -- -1 B
/api-docs/step-button -- 1.63 kB -- -1 B
/api-docs/step-connector -- 1.54 kB -- -1 B
/api-docs/step-content -- 1.72 kB -- -1 B
/api-docs/step-icon -- 1.57 kB -- -1 B
/api-docs/step-label -- 1.9 kB -- -1 B
/api-docs/step -- 1.64 kB -- -1 B
/api-docs/stepper -- 1.84 kB -- -1 B
/api-docs/svg-icon -- 2.26 kB -- -1 B
/api-docs/swipeable-drawer -- 2 kB -- -1 B
/api-docs/switch -- 2.46 kB -- -1 B
/api-docs/tab-context -- 1.08 kB -- -1 B
/api-docs/tab-list -- 1.09 kB -- -1 B
/api-docs/tab-panel -- 1.47 kB -- -1 B
/api-docs/tab-scroll-button -- 1.61 kB -- -1 B
/api-docs/tab -- 1.97 kB -- -1 B
/api-docs/table-body -- 1.47 kB -- -1 B
/api-docs/table-cell -- 2.13 kB -- -1 B
/api-docs/table-container -- 1.48 kB -- -1 B
/api-docs/table-footer -- 1.47 kB -- -1 B
/api-docs/table-head -- 1.46 kB -- -1 B
/api-docs/table-pagination -- 2.46 kB -- -1 B
/api-docs/table-row -- 1.69 kB -- -1 B
/api-docs/table-sort-label -- 1.83 kB -- -1 B
/api-docs/table -- 1.68 kB -- -1 B
/api-docs/tabs -- 2.68 kB -- -1 B
/api-docs/text-field -- 3.18 kB -- -1 B
/api-docs/textarea-autosize -- 1.13 kB -- -1 B
/api-docs/toggle-button-group -- 1.92 kB -- -1 B
/api-docs/toggle-button -- 1.78 kB -- -1 B
/api-docs/toolbar -- 1.65 kB -- -1 B
/api-docs/tooltip -- 2.56 kB -- -1 B
/api-docs/tree-item -- 1.88 kB -- -1 B
/api-docs/tree-view -- 1.92 kB -- -1 B
/api-docs/typography -- 2.59 kB -- -1 B
/api-docs/unstable-trap-focus -- 1.44 kB -- -1 B
/api-docs/zoom -- 1.52 kB -- -1 B
/blog/2019-developer-survey-results -- 6.35 kB -- -1 B
/blog/2019 -- 4.24 kB -- -1 B
/blog/2020-introducing-sketch -- 3.51 kB -- -1 B
/blog/2020-q1-update -- 4.33 kB -- -1 B
/blog/april-2019-update -- 3.13 kB -- -1 B
/blog/august-2019-update -- 2.24 kB -- -1 B
/blog/december-2019-update -- 2.37 kB -- -1 B
/blog/july-2019-update -- 2.13 kB -- -1 B
/blog/june-2019-update -- 2 kB -- -1 B
/blog/march-2019-update -- 2.53 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.68 kB -- -1 B
/blog/may-2019-update -- 2.35 kB -- -1 B
/blog/november-2019-update -- 2.75 kB -- -1 B
/blog/october-2019-update -- 2.5 kB -- -1 B
/blog/september-2019-update -- 2.68 kB -- -1 B
/company/about -- 1.74 kB -- -1 B
/company/contact -- 1.33 kB -- -1 B
/company/jobs -- 1.34 kB -- -1 B
/components/about-the-lab -- 6.8 kB -- -1 B
/components/alert -- 12.9 kB -- -1 B
/components/app-bar -- 30.2 kB -- -1 B
/components/autocomplete -- 110 kB -- -1 B
/components/avatars -- 9.2 kB -- -1 B
/components/backdrop -- 2.68 kB -- -1 B
/components/badges -- 15.4 kB -- -1 B
/components/bottom-navigation -- 6.25 kB -- -1 B
/components/box -- 8.05 kB -- -1 B
/components/breadcrumbs -- 14.7 kB -- -1 B
/components/button-group -- 7.61 kB -- -1 B
/components/buttons -- 26.4 kB -- -1 B
/components/cards -- 17.2 kB -- -1 B
/components/checkboxes -- 16.5 kB -- -1 B
/components/chips -- 22 kB -- -1 B
/components/click-away-listener -- 4.94 kB -- -1 B
/components/container -- 3.78 kB -- -1 B
/components/css-baseline -- 7.05 kB -- -1 B
/components/dialogs -- 43.1 kB -- -1 B
/components/dividers -- 12.8 kB -- -1 B
/components/drawers -- 31.5 kB -- -1 B
/components/expansion-panels -- 20.7 kB -- -1 B
/components/floating-action-button -- 10.9 kB -- -1 B
/components/grid-list -- 12 kB -- -1 B
/components/grid -- 32.4 kB -- -1 B
/components/hidden -- 10.6 kB -- -1 B
/components/icons -- 27.6 kB -- -1 B
/components/links -- 7.04 kB -- -1 B
/components/lists -- 26.5 kB -- -1 B
/components/material-icons -- 729 kB -- -1 B
/components/menus -- 25.2 kB -- -1 B
/components/modal -- 12.9 kB -- -1 B
/components/no-ssr -- 5.33 kB -- -1 B
/components/pagination -- 8.19 kB -- -1 B
/components/paper -- 3.49 kB -- -1 B
/components/pickers -- 39.3 kB -- -1 B
/components/popover -- 17.6 kB -- -1 B
/components/popper -- 22.5 kB -- -1 B
/components/portal -- 3.17 kB -- -1 B
/components/progress -- 21.2 kB -- -1 B
/components/radio-buttons -- 15.6 kB -- -1 B
/components/rating -- 11 kB -- -1 B
/components/selects -- 33.1 kB -- -1 B
/components/skeleton -- 13.2 kB -- -1 B
/components/slider -- 16.3 kB -- -1 B
/components/snackbars -- 22.4 kB -- -1 B
/components/speed-dial -- 14.6 kB -- -1 B
/components/steppers -- 36.9 kB -- -1 B
/components/switches -- 16.9 kB -- -1 B
/components/tables -- 174 kB -- -1 B
/components/tabs -- 24.5 kB -- -1 B
/components/text-fields -- 56.6 kB -- -1 B
/components/textarea-autosize -- 3.04 kB -- -1 B
/components/toggle-button -- 11.9 kB -- -1 B
/components/tooltips -- 17.5 kB -- -1 B
/components/transfer-list -- 9.68 kB -- -1 B
/components/transitions -- 12.6 kB -- -1 B
/components/tree-view -- 11.3 kB -- -1 B
/components/typography -- 9.96 kB -- -1 B
/components/use-media-query -- 12.9 kB -- -1 B
/customization/breakpoints -- 16.4 kB -- -1 B
/customization/color -- 21.1 kB -- -1 B
/customization/components -- 38.6 kB -- -1 B
/customization/default-theme -- 8.92 kB -- -1 B
/customization/density -- 9.73 kB -- -1 B
/customization/globals -- 5.23 kB -- -1 B
/customization/palette -- 14.7 kB -- -1 B
/customization/spacing -- 2.82 kB -- -1 B
/customization/theming -- 18.3 kB -- -1 B
/customization/typography -- 12.5 kB -- -1 B
/customization/z-index -- 3.47 kB -- -1 B
/discover-more/backers -- 3.03 kB -- -1 B
/discover-more/changelog -- 1.45 kB -- -1 B
/discover-more/languages -- 3.44 kB -- -1 B
/discover-more/related-projects -- 7.56 kB -- -1 B
/discover-more/roadmap -- 3.72 kB -- -1 B
/discover-more/showcase -- 15.1 kB -- -1 B
/discover-more/team -- 6.84 kB -- -1 B
/discover-more/vision -- 6.76 kB -- -1 B
/getting-started/example-projects -- 7.57 kB -- -1 B
/getting-started/faq -- 34.6 kB -- -1 B
/getting-started/installation -- 7.85 kB -- -1 B
/getting-started/learn -- 8.98 kB -- -1 B
/getting-started/support -- 9.15 kB -- -1 B
/getting-started/supported-components -- 6.74 kB -- -1 B
/getting-started/supported-platforms -- 6.1 kB -- -1 B
/getting-started/templates -- 8.92 kB -- -1 B
/getting-started/templates/album -- 5.57 kB -- -1 B
/getting-started/templates/blog -- 7.45 kB -- -1 B
/getting-started/templates/checkout -- 10.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.86 kB -- -1 B
/getting-started/templates/pricing -- 7.79 kB -- -1 B
/getting-started/templates/sign-in-side -- 8.18 kB -- -1 B
/getting-started/templates/sign-in -- 8.42 kB -- -1 B
/getting-started/templates/sign-up -- 8.52 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.6 kB -- -1 B
/guides/api -- 14.4 kB -- -1 B
/guides/composition -- 14.9 kB -- -1 B
/guides/flow -- 2.26 kB -- -1 B
/guides/interoperability -- 15.9 kB -- -1 B
/guides/localization -- 18.8 kB -- -1 B
/guides/migration-v0x -- 7.39 kB -- -1 B
/guides/migration-v3 -- 19.2 kB -- -1 B
/guides/minimizing-bundle-size -- 10 kB -- -1 B
/guides/responsive-ui -- 4.27 kB -- -1 B
/guides/right-to-left -- 5.24 kB -- -1 B
/guides/server-rendering -- 8.75 kB -- -1 B
/guides/testing -- 8.7 kB -- -1 B
/guides/typescript -- 15.1 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-emotion -- 8.49 kB -- -1 B
/performance/table-hook -- 2.24 kB -- -1 B
/performance/table-mui -- 4.5 kB -- -1 B
/performance/table-raw -- 612 B -- -1 B
/performance/table-styled-components -- 2.6 kB -- -1 B
/premium-themes/onepirate -- 7.34 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1.01 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.44 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 7.67 kB -- -1 B
/production-error -- 2.87 kB -- -1 B
/styles/advanced -- 31.7 kB -- -1 B
/styles/api -- 16.9 kB -- -1 B
/styles/basics -- 16.5 kB -- -1 B
/system/api -- 5.96 kB -- -1 B
/system/basics -- 27.6 kB -- -1 B
/system/borders -- 4.1 kB -- -1 B
/system/display -- 6.55 kB -- -1 B
/system/flexbox -- 5.85 kB -- -1 B
/system/palette -- 4.35 kB -- -1 B
/system/positions -- 2.53 kB -- -1 B
/system/shadows -- 3.86 kB -- -1 B
/system/sizing -- 3.53 kB -- -1 B
/system/spacing -- 6.01 kB -- -1 B
/system/typography -- 4.42 kB -- -1 B
/versions -- 23 kB -- -1 B
docs:chunk:shared -- 65.8 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/core -- 371 kB -- 102 kB
@material-ui/lab -- 218 kB -- 64.7 kB
@material-ui/styles -- 52.1 kB -- 15.6 kB
@material-ui/system -- 17.2 kB -- 4.52 kB
@material-ui/utils -- 7.19 kB -- 2.61 kB
Alert -- 87.5 kB -- 27.6 kB
AlertTitle -- 68.8 kB -- 21.5 kB
AppBar -- 68.6 kB -- 21.4 kB
Autocomplete -- 136 kB -- 42.8 kB
Avatar -- 69.7 kB -- 21.8 kB
AvatarGroup -- 70.8 kB -- 22.4 kB
Backdrop -- 73.2 kB -- 22.6 kB
Badge -- 69.9 kB -- 21.7 kB
BottomNavigation -- 66.9 kB -- 20.9 kB
BottomNavigationAction -- 79.6 kB -- 25.2 kB
Box -- 73.4 kB -- 22.2 kB
Breadcrumbs -- 84.7 kB -- 26.8 kB
Button -- 83.9 kB -- 25.7 kB
ButtonBase -- 78.1 kB -- 24.5 kB
ButtonGroup -- 87.6 kB -- 27 kB
Card -- 67.4 kB -- 21 kB
CardActionArea -- 79.2 kB -- 25 kB
CardActions -- 66.6 kB -- 20.8 kB
CardContent -- 66.5 kB -- 20.7 kB
CardHeader -- 69.6 kB -- 21.8 kB
CardMedia -- 66.9 kB -- 20.9 kB
Checkbox -- 86.3 kB -- 27.2 kB
Chip -- 86.9 kB -- 26.6 kB
CircularProgress -- 68.7 kB -- 21.6 kB
ClickAwayListener -- 4.13 kB -- 1.66 kB
Collapse -- 73.6 kB -- 22.7 kB
colorManipulator -- 4.14 kB -- 1.63 kB
Container -- 67.8 kB -- 21.1 kB
CssBaseline -- 66.5 kB -- 20.8 kB
Dialog -- 88.5 kB -- 27.7 kB
DialogActions -- 66.6 kB -- 20.8 kB
DialogContent -- 66.7 kB -- 20.8 kB
DialogContentText -- 68.6 kB -- 21.5 kB
DialogTitle -- 68.9 kB -- 21.6 kB
Divider -- 67.2 kB -- 21.1 kB
docs:/ -- 12.5 kB -- -1 B
docs:/_app -- 37.4 kB -- -1 B
Drawer -- 90.6 kB -- 27.6 kB
ExpansionPanel -- 77.2 kB -- 24.3 kB
ExpansionPanelActions -- 66.6 kB -- 20.8 kB
ExpansionPanelDetails -- 66.5 kB -- 20.7 kB
ExpansionPanelSummary -- 82.3 kB -- 26 kB
Fab -- 81 kB -- 25.3 kB
Fade -- 29 kB -- 9.67 kB
FilledInput -- 78.2 kB -- 24.2 kB
FormControl -- 69 kB -- 21.4 kB
FormControlLabel -- 70.1 kB -- 21.9 kB
FormGroup -- 66.5 kB -- 20.8 kB
FormHelperText -- 67.9 kB -- 21 kB
FormLabel -- 68 kB -- 21 kB
Grid -- 69.6 kB -- 21.8 kB
GridList -- 67 kB -- 21 kB
GridListTile -- 68.2 kB -- 21.3 kB
GridListTileBar -- 67.7 kB -- 21.2 kB
Grow -- 29.6 kB -- 9.88 kB
Hidden -- 70.6 kB -- 22.1 kB
Icon -- 67.4 kB -- 21 kB
IconButton -- 80.3 kB -- 25.1 kB
Input -- 77.1 kB -- 24 kB
InputAdornment -- 69.7 kB -- 21.9 kB
InputBase -- 75.2 kB -- 23.5 kB
InputLabel -- 69.9 kB -- 21.5 kB
LinearProgress -- 70 kB -- 21.6 kB
Link -- 71.2 kB -- 22.4 kB
List -- 66.8 kB -- 20.8 kB
ListItem -- 81.2 kB -- 25.4 kB
ListItemAvatar -- 66.6 kB -- 20.8 kB
ListItemIcon -- 66.7 kB -- 20.8 kB
ListItemSecondaryAction -- 66.5 kB -- 20.8 kB
ListItemText -- 69.6 kB -- 21.8 kB
ListSubheader -- 67.3 kB -- 21.1 kB
Menu -- 94.1 kB -- 29 kB
MenuItem -- 82.3 kB -- 25.8 kB
MenuList -- 70.5 kB -- 22 kB
MobileStepper -- 72.5 kB -- 22.7 kB
Modal -- 15.1 kB -- 5.27 kB
NativeSelect -- 81.6 kB -- 25.7 kB
NoSsr -- 2.18 kB -- 1.03 kB
OutlinedInput -- 79.2 kB -- 24.6 kB
packages/material-ui/material-ui.production.min.js -- 326 kB -- 94.7 kB
Pagination -- 88.7 kB -- 27.3 kB
PaginationItem -- 85 kB -- 26.2 kB
Paper -- 66.9 kB -- 20.8 kB
Popover -- 88.4 kB -- 27.3 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 87.4 kB -- 27.6 kB
RadioGroup -- 68.4 kB -- 21.2 kB
Rating -- 75.4 kB -- 24.2 kB
RootRef -- 4.64 kB -- 1.76 kB
ScopedCssBaseline -- 67.4 kB -- 21 kB
Select -- 122 kB -- 36.1 kB
Skeleton -- 67.7 kB -- 21.3 kB
Slide -- 30.8 kB -- 10.1 kB
Slider -- 80.6 kB -- 25.6 kB
Snackbar -- 81.2 kB -- 25.4 kB
SnackbarContent -- 68.1 kB -- 21.3 kB
SpeedDial -- 91.3 kB -- 28.9 kB
SpeedDialAction -- 123 kB -- 39.1 kB
SpeedDialIcon -- 69.1 kB -- 21.6 kB
Step -- 67.2 kB -- 21 kB
StepButton -- 86.5 kB -- 27.3 kB
StepConnector -- 67.3 kB -- 21.1 kB
StepContent -- 74.8 kB -- 23.3 kB
StepIcon -- 69.2 kB -- 21.5 kB
StepLabel -- 73.1 kB -- 22.6 kB
Stepper -- 69.4 kB -- 21.8 kB
styles/createMuiTheme -- 22 kB -- 7.58 kB
SvgIcon -- 67.6 kB -- 21 kB
SwipeableDrawer -- 98.1 kB -- 30.7 kB
Switch -- 85.6 kB -- 26.8 kB
Tab -- 80.7 kB -- 25.6 kB
TabContext -- 2.65 kB -- 1.15 kB
Table -- 67.1 kB -- 21 kB
TableBody -- 66.7 kB -- 20.8 kB
TableCell -- 68.6 kB -- 21.5 kB
TableContainer -- 66.5 kB -- 20.7 kB
TableFooter -- 66.7 kB -- 20.8 kB
TableHead -- 66.7 kB -- 20.8 kB
TablePagination -- 149 kB -- 43.6 kB
TableRow -- 67 kB -- 21 kB
TableSortLabel -- 81.6 kB -- 25.8 kB
TabList -- 91.5 kB -- 29.2 kB
TabPanel -- 67.4 kB -- 21 kB
Tabs -- 90.3 kB -- 28.2 kB
TabScrollButton -- 81.1 kB -- 25.4 kB
TextareaAutosize -- 5.24 kB -- 2.19 kB
TextField -- 131 kB -- 38.3 kB
ToggleButton -- 80.3 kB -- 25.4 kB
ToggleButtonGroup -- 67.9 kB -- 21.2 kB
Toolbar -- 66.8 kB -- 20.9 kB
Tooltip -- 107 kB -- 33.9 kB
TreeItem -- 80.6 kB -- 25.6 kB
TreeView -- 72.9 kB -- 22.8 kB
Typography -- 68.2 kB -- 21.2 kB
Unstable_TrapFocus -- 3.85 kB -- 1.59 kB
useAutocomplete -- 14.7 kB -- 5.27 kB
useMediaQuery -- 2.57 kB -- 1.06 kB
useScrollTrigger -- 2.66 kB -- 1.08 kB
Zoom -- 29.1 kB -- 9.81 kB

Generated by 🚫 dangerJS against 2209c6a

@mbrookes
Copy link
Member

the ad can now be displayed in the middle of the page

You already know my opinion about this...

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jun 1, 2020

the ad can now be displayed in the middle of the page

@mbrookes In the current configuration, it impacts 3 pages: autocomplete, textfield, tabs. I wouldn't expect it to break the flow of reading, as displayed after a demo. Imagine we break down this pages into smaller ones because too large. How would the result be different? What's your concern?

I think that this article is interesting:

user growth and lots of cash isn't what really helped Facebook do what it did. It was a relentless and single-minded focus on getting mobile right—and in particular, getting it right for users, not getting it right for the finance or the advertising department.

https://fortune.com/2016/01/28/what-media-companies-can-learn-from-facebooks-incredible-mobile-turnaround/

We need to keep browsing the documentation an enjoyable experience, it's more important. I think that we could/should monitor the number of demos open and the duration of the session metrics to have an idea of the negative impact and eventually correct the approach.


There is something that I wonder about. If you check the usage of the ads on major (huge traffic) developers and the designers website, you will find an ad on the "long tail" of the content "consumed".

  • Dribble: image details
  • StackOverflow: question answers
  • FontAwesome: icon details

I wonder if we shouldn't consider our demo details as this "long tail". There are 1m demo interactions per month which could be leveraged into an inline ad when opening a demo:

83328681-239c0900-a285-11ea-8239-c216912d2248

@levithomason Considering your prior art in this direction, what's your experience with it?

@mbrookes
Copy link
Member

mbrookes commented Jun 1, 2020

In the current configuration, it impacts 3 pages

So nothing lost by not going there...

Imagine we break down this pages into smaller ones because too large. How would the result be different?

False equivalence. We wouldn't (I hope) break a page down into smaller parts, just so that we can introduce more advertising.

I wouldn't expect it to break the flow of reading, as displayed after a demo

Granted, but next thing you know, that wasn't impactful enough, and it gets moved after a section; then after a paragraph...

I think that this article is interesting

Paywalled

@eps1lon
Copy link
Member

eps1lon commented Jun 2, 2020

the ad can now be displayed in the middle of the page

I didn't see this originally. I'm strongly opposed to it and it seems like you're as well:

The incentive should be solely about improving the DX.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jun 2, 2020

So nothing lost by not going there...

Ok, we have two core team members opposed to trying ads in the middle of the page, I will remove it.

False equivalence. We wouldn't (I hope) break a page down into smaller parts, just so that we can introduce more advertising.

Agree, the causality is invested. We would break down a page into smaller parts to make it easier to browse. It's not something we have ever done yet (or maybe for the FAB?), but given we will need to break down the page for the date picker and the data grid, I think that we can do it as well with the autocomplete. Sections could be hook vs component, combo box vs multi-select, etc. This would result in more advertising. Usually, you will find the documentation of the existing enterprise UI libraries with multiple pages, for each component. I think that it comes from them having more content and aiming for smaller pages. IMHO tabs and text fields are also almost too long.

I think that this article is interesting

Ah, sorry, I was reading it on my phone, I didn't see the paywall.


I have asked CodeFund's CEO about his thoughts on the pull request, there is one element that came out looking at the top publishers: inline ad (no image). I think that it's worth trying.

I will try to make a second iteration on the pull request by this weekend with the above points.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants