add instrumentation for sql params (#3017)

* add instrumentation

* remove console log

* additional instrumentation

* use data-event

* use data-event

* fix

frontend/src/metabase/query_builder/actions.js

@@ -134,10 +134,14 @@ export const initializeQB = createThunkAction(INITIALIZE_QB, (updateUrl) => {
 
 
 export const TOGGLE_DATA_REFERENCE = "TOGGLE_DATA_REFERENCE";
-export const toggleDataReference = createAction(TOGGLE_DATA_REFERENCE);
+export const toggleDataReference = createAction(TOGGLE_DATA_REFERENCE, () => {
+    MetabaseAnalytics.trackEvent("QueryBuilder", "Toggle Data Reference");
+});
 
 export const TOGGLE_TEMPLATE_TAGS_EDITOR = "TOGGLE_TEMPLATE_TAGS_EDITOR";
-export const toggleTemplateTagsEditor = createAction(TOGGLE_TEMPLATE_TAGS_EDITOR);
+export const toggleTemplateTagsEditor = createAction(TOGGLE_TEMPLATE_TAGS_EDITOR, () => {
+    MetabaseAnalytics.trackEvent("QueryBuilder", "Toggle Template Tags Editor");
+});
 
 export const CLOSE_QB_TUTORIAL = "CLOSE_QB_TUTORIAL";
 export const closeQbTutorial = createAction(CLOSE_QB_TUTORIAL, () => {

frontend/src/metabase/query_builder/template_tags/TagEditorHelp.jsx

@@ -47,12 +47,21 @@ const EXAMPLES = {
     },
 }
 
+
 const TagExample = ({ datasetQuery, setQuery }) =>
     <div>
         <h5>Example:</h5>
         <p>
             <Code>{datasetQuery.native.query}</Code>
-            { setQuery && <div className="Button Button--small" onClick={() => setQuery(datasetQuery, true)}>Try it</div> }
+            { setQuery && (
+                <div
+                    className="Button Button--small"
+                    data-metabase-event="QueryBuilder;Template Tag Example Query Used"
+                    onClick={ () => setQuery(datasetQuery, true) }
+                >
+                    Try it
+                </div>
+            )}
         </p>
     </div>
 
@@ -109,7 +118,7 @@ const TagEditorHelp = ({ setQuery, sampleDatasetId }) => {
             <TagExample datasetQuery={EXAMPLES.multipleOptional} setQuery={setQueryWithSampleDatasetId} />
 
             <p>
-                <a href="http://www.metabase.com/docs/latest/users-guide/start" target="_blank">Read the full documentation</a>
+                <a href="http://www.metabase.com/docs/latest/users-guide/start" target="_blank" data-metabase-event="QueryBuilder;Template Tag Documentation Click">Read the full documentation</a>
             </p>
         </div>
     )

frontend/src/metabase/query_builder/template_tags/TagEditorSidebar.jsx

@@ -3,6 +3,7 @@ import React, { Component, PropTypes } from "react";
 import Icon from "metabase/components/Icon.jsx";
 import TagEditorParam from "./TagEditorParam.jsx";
 import TagEditorHelp from "./TagEditorHelp.jsx";
+import MetabaseAnalytics from "metabase/lib/analytics";
 
 import cx from "classnames";
 import { getTemplateTags } from "metabase/meta/Card";
@@ -25,6 +26,11 @@ export default class TagEditorSidebar extends Component {
         sampleDatasetId: PropTypes.number,
     };
 
+    setSection (section) {
+        this.setState({ section: section });
+        MetabaseAnalytics.trackEvent("QueryBuilder", "Template Tag Editor Section Change", section)
+    }
+
     render() {
 
         const { card } = this.props;
@@ -51,8 +57,8 @@ export default class TagEditorSidebar extends Component {
                 </div>
                 <div className="DataReference-content">
                     <div className="Button-group Button-group--brand text-uppercase mb2">
-                        <a className={cx("Button Button--small", { "Button--active": section === "settings" , "disabled": tags.length === 0 })} onClick={() => this.setState({ section: "settings" })}>Settings</a>
-                        <a className={cx("Button Button--small", { "Button--active": section === "help" })} onClick={() => this.setState({ section: "help" })}>Help</a>
+                        <a className={cx("Button Button--small", { "Button--active": section === "settings" , "disabled": tags.length === 0 })} onClick={() => this.setSection("settings")}>Settings</a>
+                        <a className={cx("Button Button--small", { "Button--active": section === "help" })} onClick={() => this.setSection("help")}>Help</a>
                     </div>
                     { section === "settings" ?
                         <SettingsPane tags={tags} onUpdate={this.props.updateTemplateTag} databaseFields={this.props.databaseFields}/>