From a262f6c1c5c3195f28c9afb61629fa69e00ea7c9 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 15:06:50 -0700 Subject: [PATCH 01/10] feat(demodata): Initialize window.dataLayera --- ui/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/index.tsx b/ui/src/index.tsx index cba9886f253..26a1f07f244 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -157,6 +157,7 @@ declare global { // Older method used for pre-IE 11 compatibility window.basepath = basepath +window.dataLayer = window.dataLayer || [] const history: History = useRouterHistory(createHistory)({ basename: basepath, // this is written in when available by the URL prefixer middleware From a3fe385f7fa650d017f6aae9c141970d6428f12c Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 15:11:44 -0700 Subject: [PATCH 02/10] feat(g-analytics): Add generic GA event function --- ui/src/shared/utils/analytics.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui/src/shared/utils/analytics.ts b/ui/src/shared/utils/analytics.ts index 1c4c9b50e6d..aab3c605062 100644 --- a/ui/src/shared/utils/analytics.ts +++ b/ui/src/shared/utils/analytics.ts @@ -23,3 +23,10 @@ export const fireUserDataReady = function fireUserDataReady( }, }) } + +export const fireGAEvent = (event: string, payload: object = {}) => { + window.dataLayer.push({ + event, + ...payload, + }) +} From b66bc9d5587aab43a2f54d93aa9e0119f901b861 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 15:20:30 -0700 Subject: [PATCH 03/10] feat(demodata): Add demodata bucket Added event --- ui/src/cloud/actions/demodata.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/src/cloud/actions/demodata.ts b/ui/src/cloud/actions/demodata.ts index ef46f7ae6bd..3b16a2ea78e 100644 --- a/ui/src/cloud/actions/demodata.ts +++ b/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 {fireGAEvent} from 'src/shared/utils/analytics' + +// Types +import {Bucket, RemoteDataState, GetState, DemoBucket} from 'src/types' export type Actions = | ReturnType @@ -114,6 +117,8 @@ export const getDemoDataBucketMembership = ({ const url = `/orgs/${orgID}/dashboards/${createdDashboard.id}` dispatch(notify(demoDataSucceeded(bucketName, url))) + + fireGAEvent('demoData_bucketAdded', {demo_dataset: bucketName}) } catch (error) { const message = `Could not create dashboard for demodata bucket ${bucketName}: ${getErrorMessage( error From 6bee0507a2f8208f4afa062f599194fdcf504f60 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 15:54:20 -0700 Subject: [PATCH 04/10] feat(demodata): Add remove dd event --- ui/src/cloud/actions/demodata.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/cloud/actions/demodata.ts b/ui/src/cloud/actions/demodata.ts index 3b16a2ea78e..4df34c61060 100644 --- a/ui/src/cloud/actions/demodata.ts +++ b/ui/src/cloud/actions/demodata.ts @@ -150,6 +150,7 @@ export const deleteDemoDataBucketMembership = (bucket: DemoBucket) => async ( } dispatch(removeBucket(bucket.id)) + fireGAEvent('demoData_bucketDeleted', {demo_dataset: bucket.name}) } catch (error) { dispatch(notify(demoDataDeleteBucketFailed(bucket.name, error))) From 9a3be99bcfafd0f36d5b3547d1de7b5f0b36d726 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 16:19:49 -0700 Subject: [PATCH 05/10] feat(demodata): Fire query analytics event when org is queried --- ui/src/shared/utils/analytics.ts | 8 ++++++++ ui/src/timeMachine/actions/queries.ts | 4 ++++ 2 files changed, 12 insertions(+) diff --git a/ui/src/shared/utils/analytics.ts b/ui/src/shared/utils/analytics.ts index aab3c605062..a2d7b8777e3 100644 --- a/ui/src/shared/utils/analytics.ts +++ b/ui/src/shared/utils/analytics.ts @@ -30,3 +30,11 @@ export const fireGAEvent = (event: string, payload: object = {}) => { ...payload, }) } + +export const fireQueryEvent = (ownOrg: string, queryOrg: string) => { + if (ownOrg === queryOrg) { + fireGAEvent('orgData_queried') + } else { + fireGAEvent('demoData_queried') + } +} diff --git a/ui/src/timeMachine/actions/queries.ts b/ui/src/timeMachine/actions/queries.ts index 593ff0ef967..0cbac8d6abb 100644 --- a/ui/src/timeMachine/actions/queries.ts +++ b/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) From 0d1a0693526b422e71cde696c6a7d8e4cab99094 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Mon, 11 May 2020 16:48:23 -0700 Subject: [PATCH 06/10] feat(demodata): Convert DashboardHeader to FC --- .../dashboards/components/DashboardHeader.tsx | 202 ++++++++---------- 1 file changed, 94 insertions(+), 108 deletions(-) diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx index 789d7fb8a96..611ae7417a2 100644 --- a/ui/src/dashboards/components/DashboardHeader.tsx +++ b/ui/src/dashboards/components/DashboardHeader.tsx @@ -1,5 +1,5 @@ // Libraries -import React, {Component} from 'react' +import React, {FC} from 'react' import {connect} from 'react-redux' import {withRouter, WithRouterProps} from 'react-router' @@ -14,15 +14,15 @@ 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' // Selectors @@ -60,105 +60,45 @@ 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 { - public render() { - const { - dashboard, - onManualRefresh, - toggleShowVariablesControls, - showVariablesControls, - autoRefresh, - timeRange, - } = this.props - - return ( - <> - - - - - -