[docs] Add Google Analytics events (#13451)

* added anchorReference prop to Menu * [docs] Add Google Analytics events
mui · Oct 30, 2018 · f5b38db · f5b38db
1 parent 1990d14
commit f5b38db
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 24 deletions.
diff --git a/docs/src/config.js b/docs/src/config.js
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -199,26 +199,40 @@ class Demo extends React.Component {
   render() {
     const { classes, demoOptions, githubLocation, index, js: DemoComponent, raw } = this.props;
     const { anchorEl, codeOpen } = this.state;
+    const category = demoOptions.demo;
 
     return (
       <div className={classes.root}>
         {demoOptions.hideHeader ? null : (
           <div>
             <div className={classes.header}>
               <Tooltip title="See the source on GitHub" placement="top">
-                <IconButton href={githubLocation} target="_blank" aria-label="GitHub">
+                <IconButton
+                  ga-event-category={category}
+                  ga-event-action="github"
+                  href={githubLocation}
+                  target="_blank"
+                  aria-label="GitHub"
+                >
                   <Github />
                 </IconButton>
               </Tooltip>
               {demoOptions.hideEditButton ? null : (
                 <Tooltip title="Edit in CodeSandbox" placement="top">
-                  <IconButton onClick={this.handleClickCodeSandbox} aria-label="CodeSandbox">
+                  <IconButton
+                    ga-event-category={category}
+                    ga-event-action="codesandbox"
+                    onClick={this.handleClickCodeSandbox}
+                    aria-label="CodeSandbox"
+                  >
                     <EditIcon />
                   </IconButton>
                 </Tooltip>
               )}
               <Tooltip title={codeOpen ? 'Hide the source' : 'Show the source'} placement="top">
                 <IconButton
+                  ga-event-category={category}
+                  ga-event-action="expand"
                   onClick={this.handleClickCodeOpen}
                   aria-label={`Source of demo n°${index}`}
                 >
@@ -248,9 +262,21 @@ class Demo extends React.Component {
                   horizontal: 'right',
                 }}
               >
-                <MenuItem onClick={this.handleClickCopy}>Copy the source</MenuItem>
+                <MenuItem
+                  ga-event-category={category}
+                  ga-event-action="copy"
+                  onClick={this.handleClickCopy}
+                >
+                  Copy the source
+                </MenuItem>
                 {demoOptions.hideEditButton ? null : (
-                  <MenuItem onClick={this.handleClickStackBlitz}>Edit in StackBlitz</MenuItem>
+                  <MenuItem
+                    ga-event-category={category}
+                    ga-event-action="stackblitz"
+                    onClick={this.handleClickStackBlitz}
+                  >
+                    Edit in StackBlitz
+                  </MenuItem>
                 )}
               </Menu>
             </div>

diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
@@ -1,24 +1,59 @@
 import React from 'react';
 
-class GoogleAnalytics extends React.Component {
-  componentDidMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      return;
+function handleClick(event) {
+  const rootNode = document;
+  let element = event.target;
+
+  while (element && element !== rootNode) {
+    const category = element.getAttribute('ga-event-category');
+
+    // We reach a tracking element, no need to look higher in the dom tree.
+    if (category) {
+      window.ga('send', {
+        hitType: 'event',
+        eventCategory: category,
+        eventAction: element.getAttribute('ga-event-action'),
+      });
+      break;
     }
 
+    element = element.parentNode;
+  }
+}
+
+let binded = false;
+
+// So we can write code like:
+//
+// <Button
+//   ga-event-category="demo"
+//   ga-event-action="expand"
+// >
+//   Foo
+// </Button>
+function bindEvents() {
+  if (binded) {
+    return;
+  }
+
+  binded = true;
+  document.addEventListener('click', handleClick);
+}
+
+class GoogleAnalytics extends React.Component {
+  googleTimer = null;
+
+  componentDidMount() {
+    bindEvents();
     // Wait for the title to be updated.
-    this.timer = setTimeout(() => {
-      window.ga('set', {
+    setTimeout(() => {
+      window.ga('send', {
+        hitType: 'pageview',
         page: window.location.pathname,
       });
-      window.ga('send', { hitType: 'pageview' });
     });
   }
 
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-  }
-
   render() {
     return null;
   }

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import getPageContext from 'docs/src/modules/styles/getPageContext';
-import config from 'docs/src/config';
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark
@@ -21,6 +20,8 @@ if (process.env.NODE_ENV === 'production') {
   cleanCSS = new CleanCSS();
 }
 
+const GOOGLE_ID = process.env.NODE_ENV === 'production' ? 'UA-106598593-2' : 'UA-106598593-3';
+
 class MyDocument extends Document {
   render() {
     const { canonical, pageContext } = this.props;
@@ -64,7 +65,7 @@ class MyDocument extends Document {
             dangerouslySetInnerHTML={{
               __html: `
 window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-ga('create', '${config.google.id}', 'material-ui.com');
+window.ga('create', '${GOOGLE_ID}', 'auto');
               `,
             }}
           />