[docs] Improve analytics (#20337)

Author: oliviertassinari

README.md

@@ -55,14 +55,14 @@ Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software" /></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" /></a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month or more to Material-UI.
@@ -112,7 +112,7 @@ Check out our [documentation website](https://material-ui.com/).
 
 ## Premium Themes
 
-You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/) .
+You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store) .
 
 ## Contributing
 

docs/notifications.json

@@ -1,4 +1,8 @@
 [
+  {
+    "id": 27,
+    "text": "You can <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI\">follow us on Twitter</a> to receive exclusive tips and updates about Material-UI and the React ecosystem."
+  },
   {
     "id": 35,
     "title": "Let's translate!",

docs/pages/blog/2020-introducing-sketch.md

@@ -6,9 +6,9 @@ description: Today, we’re excited to announce the introduction of official Ske
 
 Olivier Tassinari. March 30, 2020.
 
-Today, we’re excited to introduce the official Sketch symbols 💎 for Material-UI.
+Today, we're excited to introduce the Sketch symbols 💎 for Material-UI.
 
-[![preview](/static/blog/2020-introducing-sketch/product-preview.png)](https://material-ui.com/store/items/sketch-react)
+[![preview](/static/blog/2020-introducing-sketch/product-preview.png)](https://material-ui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch)
 
 <p class="blog-description">Available on our <a href="https://material-ui.com/store/items/sketch-react">store</a></p>
 
@@ -50,6 +50,14 @@ Create MVPs efficiently and save hundreds of hours on UI Design. This is a great
 Gain in autonomy, design beautiful, consistent and accessible interface without relying on designers. You can preview how it will look before coding it.
 The UI kit was created specifically for Material-UI, a popular React UI library with a comprehensive set of components.
 
+## See it in action
+
+The following video demonstrates how the symbols can be used to design an invoice page.
+
+<iframe width="648" height="364" src="https://www.youtube.com/embed/DTU6r_VE2C4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Sketch Cloud preview: https://material-ui.com/store/previews/sketch-react/.
+
 ## More tools
 
 According to a [recent user survey](https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71) ran by the Material Design Team, Sketch is the most popular tool used by teams to manage design systems. However, it's not the only tool.
@@ -64,4 +72,4 @@ We plan to release the support of **Figma** in the coming weeks. You can subscri
 
 ## Features
 
-You can learn more about the features available on the [Sketch page details](https://material-ui.com/store/items/sketch-react/) of the symbols.
+You can learn more about the features available on the [Sketch page details](https://material-ui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch) of the symbols.

docs/src/modules/components/Ad.js

@@ -58,23 +58,23 @@ const inHouseAds = [
   {
     name: 'themes-2',
     link:
-      'https://material-ui.com/store/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-2',
+      'https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-2',
     img: '/static/in-house/themes-2.jpg',
     description:
       '<b>Premium Templates</b><br />Start your project with the best themes for admins, dashboards and more.',
   },
   {
     name: 'themes',
     link:
-      'https://material-ui.com/store/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house',
+      'https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house',
     img: '/static/in-house/themes.png',
     description:
       '<b>Premium Themes</b><br />Kickstart your application development with a ready-made theme.',
   },
   {
     name: 'tidelift',
     link:
-      'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
+      'https://tidelift.com/subscription/managed-open-source-survey?utm_source=docs&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
     img: '/static/in-house/tidelift.png',
     description:
       '<b>Material-UI for enterprise</b><br />Save time and reduce risk. Managed open source — backed by maintainers.',
@@ -89,7 +89,7 @@ const inHouseAds = [
   {
     name: 'sketch',
     link:
-      'https://material-ui.com/store/items/sketch-react/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-sketch',
+      'https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-sketch',
     img: '/static/in-house/sketch.png',
     description:
       '<b>Sketch</b><br />A large UI kit with over 1,500 handcrafted Material-UI symbols 💎.',

docs/src/modules/components/AppFrame.js

@@ -224,7 +224,7 @@ function AppFrame(props) {
               aria-haspopup="true"
               aria-label={t('changeLanguage')}
               onClick={handleLanguageIconClick}
-              data-ga-event-category="AppBar"
+              data-ga-event-category="header"
               data-ga-event-action="language"
             >
               <LanguageIcon />
@@ -279,36 +279,50 @@ function AppFrame(props) {
               </MenuItem>
             </Menu>
           </NoSsr>
+          <Notifications />
           <Tooltip title={t('editWebsiteColors')} enterDelay={300}>
             <IconButton
               color="inherit"
               aria-label={t('editWebsiteColors')}
               component={Link}
               naked
               href="/customization/color/#color-tool"
-              data-ga-event-category="AppBar"
+              data-ga-event-category="header"
               data-ga-event-action="colors"
             >
               <ColorsIcon />
             </IconButton>
           </Tooltip>
+          <Tooltip title={t('github')} enterDelay={300}>
+            <IconButton
+              component="a"
+              color="inherit"
+              href="https://github.com/mui-org/material-ui"
+              aria-label={t('github')}
+              data-ga-event-category="header"
+              data-ga-event-action="github"
+            >
+              <GitHubIcon />
+            </IconButton>
+          </Tooltip>
           <Tooltip title={t('toggleTheme')} enterDelay={300}>
             <IconButton
               color="inherit"
               onClick={handleTogglePaletteType}
               aria-label={t('toggleTheme')}
-              data-ga-event-category="AppBar"
+              data-ga-event-category="header"
               data-ga-event-action="dark"
             >
               {theme.palette.type === 'light' ? <Brightness4Icon /> : <Brightness7Icon />}
             </IconButton>
           </Tooltip>
           <Tooltip title={t('toggleRTL')} key={theme.direction} enterDelay={300}>
             <IconButton
+              edge="end"
               color="inherit"
               onClick={handleToggleDirection}
               aria-label={t('toggleRTL')}
-              data-ga-event-category="AppBar"
+              data-ga-event-category="header"
               data-ga-event-action="rtl"
             >
               {theme.direction === 'rtl' ? (
@@ -318,20 +332,6 @@ function AppFrame(props) {
               )}
             </IconButton>
           </Tooltip>
-          <Notifications />
-          <Tooltip title={t('github')} enterDelay={300}>
-            <IconButton
-              edge="end"
-              component="a"
-              color="inherit"
-              href="https://github.com/mui-org/material-ui"
-              aria-label={t('github')}
-              data-ga-event-category="AppBar"
-              data-ga-event-action="github"
-            >
-              <GitHubIcon />
-            </IconButton>
-          </Tooltip>
         </Toolbar>
       </AppBar>
       <AppDrawer

docs/src/pages.js

@@ -197,9 +197,9 @@ const pages = [
     pathname: 'https://material-ui.com/store/',
     title: 'Store',
     linkProps: {
-      'data-ga-event-category': 'premium-themes',
+      'data-ga-event-category': 'store',
       'data-ga-event-action': 'click',
-      'data-ga-event-label': 'sidenav-link',
+      'data-ga-event-label': 'sidenav',
     },
   },
   {

docs/src/pages/components/material-icons/SearchIcons.js

@@ -24,6 +24,14 @@ import Link from 'docs/src/modules/components/Link';
 import * as mui from '@material-ui/icons';
 import synonyms from './synonyms';
 
+if (process.env.NODE_ENV !== 'production') {
+  Object.keys(synonyms).forEach((icon) => {
+    if (!mui[icon]) {
+      throw new Error(`The icon ${icon} does no longer exist.`);
+    }
+  });
+}
+
 // Working on the logic? Uncomment these imports.
 // It will be x10 faster than working with all of the icons.