feat(demodata): Add GA events for demodata

ui/src/cloud/actions/demodata.ts

@@ -23,10 +23,13 @@ import {
   demoDataSucceeded,
 } from 'src/shared/copy/notifications'
 
-// Types
-import {Bucket, RemoteDataState, GetState, DemoBucket} from 'src/types'
+// Utils
 import {reportError} from 'src/shared/utils/errors'
 import {getErrorMessage} from 'src/utils/api'
+import {fireEvent} from 'src/shared/utils/analytics'
+
+// Types
+import {Bucket, RemoteDataState, GetState, DemoBucket} from 'src/types'
 
 export type Actions =
   | ReturnType<typeof setDemoDataStatus>
@@ -114,6 +117,8 @@ export const getDemoDataBucketMembership = ({
     const url = `/orgs/${orgID}/dashboards/${createdDashboard.id}`
 
     dispatch(notify(demoDataSucceeded(bucketName, url)))
+
+    fireEvent('demoData_bucketAdded', {demo_dataset: bucketName})
   } catch (error) {
     const message = `Could not create dashboard for demodata bucket ${bucketName}: ${getErrorMessage(
       error
@@ -145,6 +150,7 @@ export const deleteDemoDataBucketMembership = (bucket: DemoBucket) => async (
     }
 
     dispatch(removeBucket(bucket.id))
+    fireEvent('demoData_bucketDeleted', {demo_dataset: bucket.name})
   } catch (error) {
     dispatch(notify(demoDataDeleteBucketFailed(bucket.name, error)))
 

ui/src/cloud/constants/index.ts

@@ -15,9 +15,15 @@ const WebsiteMonitoringDashboardTemplate = async (name: string) => {
 }
 
 export const WebsiteMonitoringBucket = 'Website Monitoring Bucket'
+export const WebsiteMonitoringDemoDataDashboard =
+  'Website Monitoring Demo Data Dashboard'
 
 export const DemoDataDashboards = {
-  [WebsiteMonitoringBucket]: 'Website Monitoring Demo Data Dashboard',
+  [WebsiteMonitoringBucket]: WebsiteMonitoringDemoDataDashboard,
+}
+
+export const DemoDataDashboardNames = {
+  [WebsiteMonitoringDemoDataDashboard]: WebsiteMonitoringBucket,
 }
 
 export const DemoDataTemplates = {

ui/src/dashboards/components/DashboardHeader.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component} from 'react'
+import React, {FC, useEffect} from 'react'
 import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
@@ -14,17 +14,20 @@ import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import {Button, IconFont, ComponentColor, Page} from '@influxdata/clockface'
 
 // Actions
-import {toggleShowVariablesControls} from 'src/userSettings/actions'
-import {updateDashboard} from 'src/dashboards/actions/thunks'
+import {toggleShowVariablesControls as toggleShowVariablesControlsAction} from 'src/userSettings/actions'
+import {updateDashboard as updateDashboardAction} from 'src/dashboards/actions/thunks'
 import {
-  setAutoRefreshInterval,
-  setAutoRefreshStatus,
+  setAutoRefreshInterval as setAutoRefreshIntervalAction,
+  setAutoRefreshStatus as setAutoRefreshStatusAction,
 } from 'src/shared/actions/autoRefresh'
 import {
-  setDashboardTimeRange,
-  updateQueryParams,
+  setDashboardTimeRange as setDashboardTimeRangeAction,
+  updateQueryParams as updateQueryParamsAction,
 } from 'src/dashboards/actions/ranges'
 
+// Utils
+import {fireDashboardViewedEvent} from 'src/shared/utils/analytics'
+
 // Selectors
 import {getTimeRange} from 'src/dashboards/selectors'
 import {getByID} from 'src/resources/selectors'
@@ -60,105 +63,49 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  toggleShowVariablesControls: typeof toggleShowVariablesControls
-  updateDashboard: typeof updateDashboard
-  onSetAutoRefreshStatus: typeof setAutoRefreshStatus
-  updateQueryParams: typeof updateQueryParams
-  setDashboardTimeRange: typeof setDashboardTimeRange
-  handleChooseAutoRefresh: typeof setAutoRefreshInterval
+  toggleShowVariablesControls: typeof toggleShowVariablesControlsAction
+  updateDashboard: typeof updateDashboardAction
+  onSetAutoRefreshStatus: typeof setAutoRefreshStatusAction
+  updateQueryParams: typeof updateQueryParamsAction
+  setDashboardTimeRange: typeof setDashboardTimeRangeAction
+  setAutoRefreshInterval: typeof setAutoRefreshIntervalAction
 }
 
 type Props = OwnProps & StateProps & DispatchProps & WithRouterProps
 
-class DashboardHeader extends Component<Props> {
-  public render() {
-    const {
-      dashboard,
-      onManualRefresh,
-      toggleShowVariablesControls,
-      showVariablesControls,
-      autoRefresh,
-      timeRange,
-    } = this.props
-
-    return (
-      <>
-        <Page.Header fullWidth={true}>
-          <RenamablePageTitle
-            maxLength={DASHBOARD_NAME_MAX_LENGTH}
-            onRename={this.handleRenameDashboard}
-            name={dashboard && dashboard.name}
-            placeholder={DEFAULT_DASHBOARD_NAME}
-          />
-        </Page.Header>
-        <Page.ControlBar fullWidth={true}>
-          <Page.ControlBarLeft>
-            <Button
-              icon={IconFont.AddCell}
-              color={ComponentColor.Primary}
-              onClick={this.handleAddCell}
-              text="Add Cell"
-              titleText="Add cell to dashboard"
-            />
-            <Button
-              icon={IconFont.TextBlock}
-              text="Add Note"
-              onClick={this.handleAddNote}
-            />
-            <Button
-              icon={IconFont.Cube}
-              text="Variables"
-              onClick={toggleShowVariablesControls}
-              color={
-                showVariablesControls
-                  ? ComponentColor.Secondary
-                  : ComponentColor.Default
-              }
-            />
-            <DashboardLightModeToggle />
-            <PresentationModeToggle />
-            <GraphTips />
-          </Page.ControlBarLeft>
-          <Page.ControlBarRight>
-            <TimeZoneDropdown />
-            <AutoRefreshDropdown
-              onChoose={this.handleChooseAutoRefresh}
-              onManualRefresh={onManualRefresh}
-              selected={autoRefresh}
-            />
-            <TimeRangeDropdown
-              onSetTimeRange={this.handleChooseTimeRange}
-              timeRange={timeRange}
-            />
-          </Page.ControlBarRight>
-        </Page.ControlBar>
-      </>
-    )
-  }
-
-  private handleAddNote = () => {
-    const {router, org, dashboard} = this.props
+const DashboardHeader: FC<Props> = ({
+  dashboard,
+  onManualRefresh,
+  toggleShowVariablesControls,
+  showVariablesControls,
+  onSetAutoRefreshStatus,
+  setAutoRefreshInterval,
+  autoRefresh,
+  timeRange,
+  updateDashboard,
+  updateQueryParams,
+  setDashboardTimeRange,
+  router,
+  org,
+}) => {
+  useEffect(() => {
+    fireDashboardViewedEvent(dashboard.name)
+  }, [dashboard.id])
+
+  const handleAddNote = () => {
     router.push(`/orgs/${org.id}/dashboards/${dashboard.id}/notes/new`)
   }
 
-  private handleAddCell = () => {
-    const {router, org, dashboard} = this.props
+  const handleAddCell = () => {
     router.push(`/orgs/${org.id}/dashboards/${dashboard.id}/cells/new`)
   }
 
-  private handleRenameDashboard = (name: string) => {
-    const {dashboard, updateDashboard} = this.props
-
+  const handleRenameDashboard = (name: string) => {
     updateDashboard(dashboard.id, {name})
   }
 
-  private handleChooseAutoRefresh = (milliseconds: number) => {
-    const {
-      handleChooseAutoRefresh,
-      onSetAutoRefreshStatus,
-      dashboard,
-    } = this.props
-    handleChooseAutoRefresh(dashboard.id, milliseconds)
+  const handleChooseAutoRefresh = (milliseconds: number) => {
+    setAutoRefreshInterval(dashboard.id, milliseconds)
 
     if (milliseconds === 0) {
       onSetAutoRefreshStatus(dashboard.id, AutoRefreshStatus.Paused)
@@ -168,15 +115,7 @@ class DashboardHeader extends Component<Props> {
     onSetAutoRefreshStatus(dashboard.id, AutoRefreshStatus.Active)
   }
 
-  private handleChooseTimeRange = (timeRange: TimeRange) => {
-    const {
-      autoRefresh,
-      onSetAutoRefreshStatus,
-      setDashboardTimeRange,
-      updateQueryParams,
-      dashboard,
-    } = this.props
-
+  const handleChooseTimeRange = (timeRange: TimeRange) => {
     setDashboardTimeRange(dashboard.id, timeRange)
     updateQueryParams({
       lower: timeRange.lower,
@@ -197,6 +136,60 @@ class DashboardHeader extends Component<Props> {
       onSetAutoRefreshStatus(dashboard.id, AutoRefreshStatus.Active)
     }
   }
+
+  return (
+    <>
+      <Page.Header fullWidth={true}>
+        <RenamablePageTitle
+          maxLength={DASHBOARD_NAME_MAX_LENGTH}
+          onRename={handleRenameDashboard}
+          name={dashboard && dashboard.name}
+          placeholder={DEFAULT_DASHBOARD_NAME}
+        />
+      </Page.Header>
+      <Page.ControlBar fullWidth={true}>
+        <Page.ControlBarLeft>
+          <Button
+            icon={IconFont.AddCell}
+            color={ComponentColor.Primary}
+            onClick={handleAddCell}
+            text="Add Cell"
+            titleText="Add cell to dashboard"
+          />
+          <Button
+            icon={IconFont.TextBlock}
+            text="Add Note"
+            onClick={handleAddNote}
+          />
+          <Button
+            icon={IconFont.Cube}
+            text="Variables"
+            onClick={toggleShowVariablesControls}
+            color={
+              showVariablesControls
+                ? ComponentColor.Secondary
+                : ComponentColor.Default
+            }
+          />
+          <DashboardLightModeToggle />
+          <PresentationModeToggle />
+          <GraphTips />
+        </Page.ControlBarLeft>
+        <Page.ControlBarRight>
+          <TimeZoneDropdown />
+          <AutoRefreshDropdown
+            onChoose={handleChooseAutoRefresh}
+            onManualRefresh={onManualRefresh}
+            selected={autoRefresh}
+          />
+          <TimeRangeDropdown
+            onSetTimeRange={handleChooseTimeRange}
+            timeRange={timeRange}
+          />
+        </Page.ControlBarRight>
+      </Page.ControlBar>
+    </>
+  )
 }
 
 const mstp = (state: AppState): StateProps => {
@@ -219,12 +212,12 @@ const mstp = (state: AppState): StateProps => {
 }
 
 const mdtp: DispatchProps = {
-  toggleShowVariablesControls: toggleShowVariablesControls,
-  updateDashboard: updateDashboard,
-  onSetAutoRefreshStatus: setAutoRefreshStatus,
-  updateQueryParams: updateQueryParams,
-  setDashboardTimeRange: setDashboardTimeRange,
-  handleChooseAutoRefresh: setAutoRefreshInterval,
+  toggleShowVariablesControls: toggleShowVariablesControlsAction,
+  updateDashboard: updateDashboardAction,
+  onSetAutoRefreshStatus: setAutoRefreshStatusAction,
+  updateQueryParams: updateQueryParamsAction,
+  setDashboardTimeRange: setDashboardTimeRangeAction,
+  setAutoRefreshInterval: setAutoRefreshIntervalAction,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/shared/utils/analytics.ts

@@ -1,3 +1,5 @@
+import {DemoDataDashboardNames} from 'src/cloud/constants'
+
 export const fireOrgIdReady = function fireOrgIdReady(
   organizationIds: string[]
 ) {
@@ -23,3 +25,26 @@ export const fireUserDataReady = function fireUserDataReady(
     },
   })
 }
+
+export const fireEvent = (event: string, payload: object = {}) => {
+  window.dataLayer = window.dataLayer || []
+  window.dataLayer.push({
+    event,
+    ...payload,
+  })
+}
+
+export const fireQueryEvent = (ownOrg: string, queryOrg: string) => {
+  if (ownOrg === queryOrg) {
+    fireEvent('orgData_queried')
+  } else {
+    fireEvent('demoData_queried')
+  }
+}
+
+export const fireDashboardViewedEvent = (dashboardName: string) => {
+  const demoDataset = DemoDataDashboardNames[dashboardName]
+  if (demoDataset) {
+    fireEvent('demoData_dashboardViewed', {demo_dataset: demoDataset})
+  }
+}

ui/src/timeMachine/actions/queries.ts

@@ -43,6 +43,7 @@ import {
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
 import {getAll} from 'src/resources/selectors/index'
+import {fireQueryEvent} from 'src/shared/utils/analytics'
 
 export type Action = SaveDraftQueriesAction | SetQueryResults
 
@@ -138,6 +139,9 @@ export const executeQueries = () => async (dispatch, getState: GetState) => {
 
     pendingResults = queries.map(({text}) => {
       const orgID = getOrgIDFromBuckets(text, allBuckets) || getOrg(state).id
+
+      fireQueryEvent(getOrg(state).id, orgID)
+
       const extern = buildVarsOption(variableAssignments)
 
       return runQuery(orgID, text, extern)