Automatic dashboard instrumentation

frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx

@@ -26,6 +26,7 @@ import { getUserIsAdmin } from "metabase/selectors/user";
 
 import { DashboardApi } from "metabase/services";
 import * as Urls from "metabase/lib/urls";
+import MetabaseAnalytics from "metabase/lib/analytics";
 
 import { getParameterIconName } from "metabase/meta/Parameter";
 
@@ -78,6 +79,7 @@ class AutomaticDashboardApp extends React.Component {
       }),
     );
     this.setState({ savedDashboardId: newDashboard.id });
+    MetabaseAnalytics.trackEvent("AutoDashboard", "Save");
   };
 
   render() {
@@ -145,7 +147,13 @@ class AutomaticDashboardApp extends React.Component {
           {more && (
             <div className="flex justify-end px4 pb4">
               {more.map(item => (
-                <Link to={item.url} className="ml2">
+                <Link
+                  to={item.url}
+                  className="ml2"
+                  onClick={() =>
+                    MetabaseAnalytics.trackEvent("AutoDashboard", "ClickMore")
+                  }
+                >
                   <Button iconRight="chevronright">{item.title}</Button>
                 </Link>
               ))}
@@ -204,13 +212,20 @@ const suggestionClasses = cxs({
   },
 });
 
-const SuggestionsList = ({ suggestions }) => (
+const SuggestionsList = ({ suggestions, section }) => (
   <ol className="px2">
     {suggestions.map((s, i) => (
       <li key={i} className={suggestionClasses}>
         <Link
           to={s.url}
           className="bordered rounded bg-white shadowed mb2 p2 flex no-decoration"
+          onClick={() =>
+            MetabaseAnalytics.trackEvent(
+              "AutoDashboard",
+              "ClickRelated",
+              section,
+            )
+          }
         >
           <div
             className="bg-slate-extra-light rounded flex align-center justify-center text-slate mr1 flex-no-shrink"
@@ -233,8 +248,8 @@ const SuggestionsSidebar = ({ related }) => (
     <div className="py2 text-centered my3">
       <h3 className="text-grey-3">More X-rays</h3>
     </div>
-    {Object.values(related).map(suggestions => (
-      <SuggestionsList suggestions={suggestions} />
+    {Object.entries(related).map(([section, suggestions]) => (
+      <SuggestionsList section={section} suggestions={suggestions} />
     ))}
   </div>
 );

frontend/src/metabase/visualizations/components/ChartClickActions.jsx

@@ -57,6 +57,9 @@ Object.values(SECTIONS).map((section, index) => {
   section.index = index;
 });
 
+const getGALabelForAction = action =>
+  `${action.section || ""}:${action.name || ""}`;
+
 type Props = {
   clicked: ?ClickObject,
   clickActions: ?(ClickAction[]),
@@ -84,6 +87,11 @@ export default class ChartClickActions extends Component {
   handleClickAction = (action: ClickAction) => {
     const { onChangeCardAndRun } = this.props;
     if (action.popover) {
+      MetabaseAnalytics.trackEvent(
+        "Actions",
+        "Open Click Action Popover",
+        getGALabelForAction(action),
+      );
       this.setState({ popoverAction: action });
     } else if (action.question) {
       const nextQuestion = action.question();
@@ -91,7 +99,7 @@ export default class ChartClickActions extends Component {
         MetabaseAnalytics.trackEvent(
           "Actions",
           "Executed Click Action",
-          `${action.section || ""}:${action.name || ""}`,
+          getGALabelForAction(action),
         );
         onChangeCardAndRun({ nextCard: nextQuestion.card() });
       }
@@ -117,7 +125,7 @@ export default class ChartClickActions extends Component {
               MetabaseAnalytics.trackEvent(
                 "Action",
                 "Executed Click Action",
-                `${popoverAction.section || ""}:${popoverAction.name || ""}`,
+                getGALabelForAction(popoverAction),
               );
             }
             onChangeCardAndRun({ nextCard });
@@ -126,6 +134,7 @@ export default class ChartClickActions extends Component {
             MetabaseAnalytics.trackEvent(
               "Action",
               "Dismissed Click Action Menu",
+              getGALabelForAction(popoverAction),
             );
             this.close();
           }}
@@ -209,7 +218,17 @@ export const ChartClickAction = ({
   // } else
   if (action.url) {
     return (
-      <Link to={action.url()} className={className}>
+      <Link
+        to={action.url()}
+        className={className}
+        onClick={() =>
+          MetabaseAnalytics.trackEvent(
+            "Actions",
+            "Executed Click Action",
+            getGALabelForAction(action),
+          )
+        }
+      >
         {action.title}
       </Link>
     );