remove correlation between codefund/carbon and fallback

mui · Dec 23, 2019 · b3ec703 · b3ec703
1 parent d434dbb
commit b3ec703
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 35 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -86,7 +86,6 @@ const inHouseAds = [
 
 function Ad(props) {
   const { classes } = props;
-  const { current: random } = React.useRef(Math.random());
   const t = useSelector(state => state.options.t);
 
   const timerAdblock = React.useRef();
@@ -161,24 +160,65 @@ function Ad(props) {
   if (adblock) {
     minHeight = 'auto';
 
-    if (Math.random() >= 0.8) {
+    if (Math.random() < 0.2) {
       children = getAdblock(classes, t);
     } else {
-      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * random)]} />;
+      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
     }
   }
 
   if (!children) {
     if (carbonOut || codeFundOut) {
-      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * random)]} />;
+      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
       minHeight = 'auto';
-    } else if (random >= 0.65) {
+    } else if (Math.random() < 0.35) {
       children = <AdCodeFund />;
     } else {
       children = <AdCarbon />;
     }
   }
 
+  React.useEffect(() => {
+    // Avoid a flood of events.
+    if (Math.random < 0.1) {
+      return null;
+    }
+
+    const delay = setTimeout(() => {
+      let type;
+
+      if (children.type === AdCodeFund) {
+        type = 'codefund';
+      } else if (children.type === AdCarbon) {
+        type = 'carbon';
+      } else if (children.type === AdInHouse) {
+        type = 'in-house';
+      } else {
+        type = 'disable-adblock';
+      }
+
+      window.ga('send', {
+        hitType: 'event',
+        eventCategory: 'ad',
+        eventAction: 'display',
+        eventLabel: type,
+      });
+
+      if (type === 'in-house') {
+        window.ga('send', {
+          hitType: 'event',
+          eventCategory: 'in-house-ad',
+          eventAction: 'display',
+          eventLabel: children.props.ad.name,
+        });
+      }
+    }, 2000);
+
+    return () => {
+      clearTimeout(delay);
+    };
+  }, [children.type, children.props.ad]);
+
   return (
     <span className={classes.root} style={{ minHeight }}>
       {children}

diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js
@@ -44,6 +44,7 @@ const useStyles = makeStyles(theme => ({
 export default function AdInHouse(props) {
   const { ad } = props;
   const classes = useStyles();
+
   /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
   return (
     <span className={classes.root}>

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -253,7 +253,6 @@ function Demo(props) {
 
   const showSourceHint = demoHovered && !sourceHintSeen;
   const DemoComponent = demoData.Component;
-  const gaCategory = demoOptions.demo;
   const demoName = getDemoName(demoData.githubLocation);
   const demoSandboxedStyle = React.useMemo(
     () => ({
@@ -339,7 +338,7 @@ function Demo(props) {
               demo={demo}
               codeOpen={codeOpen}
               codeVariant={codeVariant}
-              gaEventCategory={gaCategory}
+              gaEventLabel={demoOptions.demo}
               onLanguageClick={handleCodeLanguageClick}
             />
             <div className={classes.headerButtons}>
@@ -353,30 +352,15 @@ function Demo(props) {
               >
                 <IconButton
                   aria-label={showCodeLabel}
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="expand"
                   onClick={handleClickCodeOpen}
                   color={demoHovered ? 'primary' : 'default'}
                 >
                   <CodeIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
-              <Tooltip
-                classes={{ popper: classes.tooltip }}
-                title={t('viewGitHub')}
-                placement="top"
-              >
-                <IconButton
-                  aria-label={t('viewGitHub')}
-                  data-ga-event-category={gaCategory}
-                  data-ga-event-action="github"
-                  href={demoData.githubLocation}
-                  target="_blank"
-                  rel="noopener nofollow"
-                >
-                  <GitHubIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
               {demoOptions.hideEditButton ? null : (
                 <Tooltip
                   classes={{ popper: classes.tooltip }}
@@ -385,14 +369,32 @@ function Demo(props) {
                 >
                   <IconButton
                     aria-label={t('codesandbox')}
-                    data-ga-event-category={gaCategory}
+                    data-ga-event-category="demo"
+                    data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="codesandbox"
                     onClick={handleClickCodeSandbox}
                   >
                     <EditIcon fontSize="small" />
                   </IconButton>
                 </Tooltip>
               )}
+              <Tooltip
+                classes={{ popper: classes.tooltip }}
+                title={t('viewGitHub')}
+                placement="top"
+              >
+                <IconButton
+                  aria-label={t('viewGitHub')}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
+                  data-ga-event-action="github"
+                  href={demoData.githubLocation}
+                  target="_blank"
+                  rel="noopener nofollow"
+                >
+                  <GitHubIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
               <IconButton
                 onClick={handleClickMore}
                 aria-owns={anchorEl ? 'demo-menu-more' : undefined}
@@ -417,30 +419,34 @@ function Demo(props) {
                 }}
               >
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy"
                   onClick={handleClickCopy}
                 >
                   {t('copySource')}
                 </MenuItem>
                 {demoOptions.hideEditButton ? null : (
                   <MenuItem
-                    data-ga-event-category={gaCategory}
+                    data-ga-event-category="demo"
+                    data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="stackblitz"
                     onClick={handleClickStackBlitz}
                   >
                     {t('stackblitz')}
                   </MenuItem>
                 )}
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy-js-source-link"
                   onClick={createHandleCodeSourceLink(`${demoName}.js`)}
                 >
                   {t('copySourceLinkJS')}
                 </MenuItem>
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy-ts-source-link"
                   onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
                 >

diff --git a/docs/src/modules/components/DemoLanguages.js b/docs/src/modules/components/DemoLanguages.js
@@ -18,7 +18,7 @@ const styles = {
 };
 
 function DemoLanguages(props) {
-  const { classes, codeOpen, codeVariant, demo, gaEventCategory, onLanguageClick } = props;
+  const { classes, codeOpen, codeVariant, demo, gaEventLabel, onLanguageClick } = props;
   const hasTSVariant = demo.rawTS;
   const t = useSelector(state => state.options.t);
 
@@ -41,8 +41,9 @@ function DemoLanguages(props) {
           className={classes.toggleButton}
           value={CODE_VARIANTS.JS}
           aria-label={t('showJSSource')}
-          data-ga-event-category={gaEventCategory}
+          data-ga-event-category="demo"
           data-ga-event-action="source-js"
+          data-ga-event-label={gaEventLabel}
         >
           <JavaScriptIcon />
         </ToggleButton>
@@ -51,8 +52,9 @@ function DemoLanguages(props) {
           value={CODE_VARIANTS.TS}
           disabled={!hasTSVariant}
           aria-label={t('showTSSource')}
-          data-ga-event-category={gaEventCategory}
+          data-ga-event-category="demo"
           data-ga-event-action="source-ts"
+          data-ga-event-label={gaEventLabel}
         >
           <TypeScriptIcon />
         </ToggleButton>
@@ -66,7 +68,7 @@ DemoLanguages.propTypes = {
   codeOpen: PropTypes.bool.isRequired,
   codeVariant: PropTypes.string.isRequired,
   demo: PropTypes.object.isRequired,
-  gaEventCategory: PropTypes.string.isRequired,
+  gaEventLabel: PropTypes.string.isRequired,
   onLanguageClick: PropTypes.func,
 };
 

diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
@@ -10,10 +10,9 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 //   Foo
 // </Button>
 function handleClick(event) {
-  const rootNode = document;
   let element = event.target;
 
-  while (element && element !== rootNode) {
+  while (element && element !== document) {
     const category = element.getAttribute('data-ga-event-category');
 
     // We reach a tracking element, no need to look higher in the dom tree.