From da57226fe5ad048eb5a18bd18956a9049622d7a8 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Tue, 16 Apr 2024 16:33:27 -0500 Subject: [PATCH] CE-1123 - Update google analytics to work with events as well as page views; add calls to it to most actual pages. --- src/App.tsx | 25 +++---------- src/QContext.tsx | 3 +- src/qqq/components/forms/EntityForm.tsx | 9 ++++- src/qqq/components/query/ExportMenuItem.tsx | 7 +++- src/qqq/pages/apps/Home.tsx | 9 ++--- src/qqq/pages/processes/ProcessRun.tsx | 8 ++++- src/qqq/pages/records/query/RecordQuery.tsx | 9 ++++- .../records/view/RecordDeveloperView.tsx | 8 ++--- src/qqq/pages/records/view/RecordView.tsx | 7 +++- src/qqq/utils/GoogleAnalyticsUtils.ts | 36 ++++++++++++++++--- 10 files changed, 81 insertions(+), 40 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1980eb3..e26f88d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,7 +49,7 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit"; import RecordQuery from "qqq/pages/records/query/RecordQuery"; import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView"; import RecordView from "qqq/pages/records/view/RecordView"; -import GoogleAnalyticsUtils from "qqq/utils/GoogleAnalyticsUtils"; +import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils"; import Client from "qqq/utils/qqq/Client"; import ProcessUtils from "qqq/utils/qqq/ProcessUtils"; import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react"; @@ -656,7 +656,7 @@ export default function App() }, ); - const [pageHeader, setPageHeaderState] = useState("" as string | JSX.Element); + const [pageHeader, setPageHeader] = useState("" as string | JSX.Element); const [accentColor, setAccentColor] = useState("#0062FF"); const [accentColorLight, setAccentColorLight] = useState("#C0D6F7") const [tableMetaData, setTableMetaData] = useState(null); @@ -671,26 +671,9 @@ export default function App() /******************************************************************************* ** *******************************************************************************/ - function setPageHeader(header: string | JSX.Element) + function recordAnalytics(model: AnalyticsModel) { - setPageHeaderState(header); - if(typeof header == "string") - { - recordAnalytics(header) - } - else - { - recordAnalytics("Title not available") - } - } - - - /******************************************************************************* - ** - *******************************************************************************/ - function recordAnalytics(title: string) - { - googleAnalyticsUtils.recordAnalytics(location, title) + googleAnalyticsUtils.recordAnalytics(model) } diff --git a/src/QContext.tsx b/src/QContext.tsx index 3352816..88db98d 100644 --- a/src/QContext.tsx +++ b/src/QContext.tsx @@ -22,6 +22,7 @@ import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData"; import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; +import {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils"; import {createContext} from "react"; interface QContext @@ -50,7 +51,7 @@ interface QContext /////////////////////////////////////////// // function to record an analytics event // /////////////////////////////////////////// - recordAnalytics?: (title: string) => void; + recordAnalytics?: (model: AnalyticsModel) => void; /////////////////////////////////// // constants - no setters needed // diff --git a/src/qqq/components/forms/EntityForm.tsx b/src/qqq/components/forms/EntityForm.tsx index 2d6cbc0..af83903 100644 --- a/src/qqq/components/forms/EntityForm.tsx +++ b/src/qqq/components/forms/EntityForm.tsx @@ -82,7 +82,7 @@ function EntityForm(props: Props): JSX.Element const qController = Client.getInstance(); const tableNameParam = useParams().tableName; const tableName = props.table === null ? tableNameParam : props.table.name; - const {accentColor} = useContext(QContext); + const {accentColor, recordAnalytics} = useContext(QContext); const [formTitle, setFormTitle] = useState(""); const [validations, setValidations] = useState({}); @@ -359,6 +359,7 @@ function EntityForm(props: Props): JSX.Element { const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label}); const metaData = await qController.loadMetaData(); setMetaData(metaData); @@ -389,6 +390,7 @@ function EntityForm(props: Props): JSX.Element { record = await qController.get(tableName, props.id); setRecord(record); + recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel}); const titleVerb = props.isCopy ? "Copy" : "Edit"; setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`); @@ -428,6 +430,7 @@ function EntityForm(props: Props): JSX.Element // else handle preparing to do an insert // /////////////////////////////////////////// setFormTitle(`Creating New ${tableMetaData?.label}`); + recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label}); if (!props.isModal) { @@ -757,6 +760,8 @@ function EntityForm(props: Props): JSX.Element if (props.id !== null && !props.isCopy) { + recordAnalytics({category: "tableEvents", action: "saveEdit", label: tableMetaData?.label}); + /////////////////////// // perform an update // /////////////////////// @@ -799,6 +804,8 @@ function EntityForm(props: Props): JSX.Element } else { + recordAnalytics({category: "tableEvents", action: props.isCopy ? "saveCopy" : "saveNew", label: tableMetaData?.label}); + ///////////////////////////////// // perform an insert // // todo - audit if it's a dupe // diff --git a/src/qqq/components/query/ExportMenuItem.tsx b/src/qqq/components/query/ExportMenuItem.tsx index f1a1004..19a251a 100644 --- a/src/qqq/components/query/ExportMenuItem.tsx +++ b/src/qqq/components/query/ExportMenuItem.tsx @@ -23,8 +23,9 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import MenuItem from "@mui/material/MenuItem"; import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro"; -import React from "react"; +import QContext from "QContext"; import ValueUtils from "qqq/utils/qqq/ValueUtils"; +import React, {useContext} from "react"; interface QExportMenuItemProps extends GridExportMenuItemProps<{}> { @@ -43,6 +44,10 @@ export default function ExportMenuItem(props: QExportMenuItemProps) { const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props; + const {recordAnalytics} = useContext(QContext); + + recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label}); + return ( { - // setPageHeader(app.label); setPageHeader(null); + recordAnalytics({location: window.location, title: "App: " + app.label}); + recordAnalytics({category: "appEvents", action: "loadAppScreen", label: app.label}); if (!qInstance) { diff --git a/src/qqq/pages/processes/ProcessRun.tsx b/src/qqq/pages/processes/ProcessRun.tsx index 623d491..a9de89b 100644 --- a/src/qqq/pages/processes/ProcessRun.tsx +++ b/src/qqq/pages/processes/ProcessRun.tsx @@ -124,7 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is const [showErrorDetail, setShowErrorDetail] = useState(false); const [showFullHelpText, setShowFullHelpText] = useState(false); - const {pageHeader, setPageHeader} = useContext(QContext); + const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext); ////////////////////////////////////////////////////////////////////////////////////////////////////////////// // for setting the processError state - call this function, which will also set the isUserFacingError state // @@ -1146,6 +1146,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is const processMetaData = await Client.getInstance().loadProcessMetaData(processName); setProcessMetaData(processMetaData); setSteps(processMetaData.frontendSteps); + + recordAnalytics({location: window.location, title: "Process: " + processMetaData?.label}); + recordAnalytics({category: "processEvents", action: "startProcess", label: processMetaData?.label}); + if (processMetaData.tableName && !tableMetaData) { try @@ -1251,6 +1255,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is setTimeout(async () => { + recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label}); + const processResponse = await Client.getInstance().processStep( processName, processUUID, diff --git a/src/qqq/pages/records/query/RecordQuery.tsx b/src/qqq/pages/records/query/RecordQuery.tsx index 66c84bb..5bcedfe 100644 --- a/src/qqq/pages/records/query/RecordQuery.tsx +++ b/src/qqq/pages/records/query/RecordQuery.tsx @@ -338,7 +338,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element ///////////////////////////// // page context references // ///////////////////////////// - const {accentColor, accentColorLight, setPageHeader, dotMenuOpen, keyboardHelpOpen} = useContext(QContext); + const {accentColor, accentColorLight, setPageHeader, recordAnalytics, dotMenuOpen, keyboardHelpOpen} = useContext(QContext); ////////////////////////////////////////////////////////////////// // we use our own header - so clear out the context page header // @@ -875,6 +875,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element return; } + recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label}); + console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`); setLoading(true); setRows([]); @@ -1642,6 +1644,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element { if (selectedSavedViewId != null) { + recordAnalytics({category: "tableEvents", action: "activateSavedView", label: tableMetaData.label}); + ////////////////////////////////////////////// // fetch, then activate the selected filter // ////////////////////////////////////////////// @@ -1657,6 +1661,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element ///////////////////////////////// // this is 'new view' - right? // ///////////////////////////////// + recordAnalytics({category: "tableEvents", action: "activateNewView", label: tableMetaData.label}); ////////////////////////////// // wipe away the saved view // @@ -2327,6 +2332,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element setTableMetaData(tableMetaData); setTableLabel(tableMetaData.label); + recordAnalytics({location: window.location, title: "Query: " + tableMetaData.label}); + setTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName)); // these are the ones to show in the dropdown setAllTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName, true)); // these include hidden ones (e.g., to find the bulks) diff --git a/src/qqq/pages/records/view/RecordDeveloperView.tsx b/src/qqq/pages/records/view/RecordDeveloperView.tsx index 470d237..11e13a6 100644 --- a/src/qqq/pages/records/view/RecordDeveloperView.tsx +++ b/src/qqq/pages/records/view/RecordDeveloperView.tsx @@ -69,13 +69,9 @@ function RecordDeveloperView({table}: Props): JSX.Element const [associatedScripts, setAssociatedScripts] = useState([] as any[]); const [notFoundMessage, setNotFoundMessage] = useState(null); - const [selectedTabs, setSelectedTabs] = useState({} as any); - const [viewingRevisions, setViewingRevisions] = useState({} as any); - const [scriptLogs, setScriptLogs] = useState({} as any); - const [alertText, setAlertText] = useState(null as string); - const {setPageHeader} = useContext(QContext); + const {setPageHeader, recordAnalytics} = useContext(QContext); const [, forceUpdate] = useReducer((x) => x + 1, 0); if (!asyncLoadInited) @@ -90,6 +86,8 @@ function RecordDeveloperView({table}: Props): JSX.Element const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: "Developer Mode: " + tableMetaData.label}); + ////////////////////////////// // load top-level meta-data // ////////////////////////////// diff --git a/src/qqq/pages/records/view/RecordView.tsx b/src/qqq/pages/records/view/RecordView.tsx index 3127965..e08a890 100644 --- a/src/qqq/pages/records/view/RecordView.tsx +++ b/src/qqq/pages/records/view/RecordView.tsx @@ -121,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget); const closeActionsMenu = () => setActionsMenu(null); - const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext); + const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext); if (localStorage.getItem(tableVariantLocalStorageKey)) { @@ -384,6 +384,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: "View: " + tableMetaData.label}); + ////////////////////////////////////////////////////////////////// // load top-level meta-data (e.g., to find processes for table) // ////////////////////////////////////////////////////////////////// @@ -430,6 +432,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element { record = await qController.get(tableName, id, tableVariant, null, queryJoins); setRecord(record); + recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel}); } catch (e) { @@ -631,6 +634,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element event?.preventDefault(); (async () => { + recordAnalytics({category: "tableEvents", action: "delete", label: tableMetaData?.label + " / " + record?.recordLabel}); + await qController.delete(tableName, id) .then(() => { diff --git a/src/qqq/utils/GoogleAnalyticsUtils.ts b/src/qqq/utils/GoogleAnalyticsUtils.ts index 3f5a894..bbcc6e9 100644 --- a/src/qqq/utils/GoogleAnalyticsUtils.ts +++ b/src/qqq/utils/GoogleAnalyticsUtils.ts @@ -24,6 +24,21 @@ import Client from "qqq/utils/qqq/Client"; import ReactGA from "react-ga4"; +export interface PageView +{ + location: Location; + title: string; +} + +export interface UserEvent +{ + action: string; + category: string; + label?: string; +} + +export type AnalyticsModel = PageView | UserEvent; + const qController = Client.getInstance(); /******************************************************************************* @@ -46,14 +61,27 @@ export default class GoogleAnalyticsUtils /******************************************************************************* ** *******************************************************************************/ - private send = (location: Location, title: string) => + private send = (model: AnalyticsModel) => { if(!this.active) { return; } - ReactGA.send({hitType: "pageview", page: location.pathname + location.search, title: title}); + if(model.hasOwnProperty("location")) + { + const pageView = model as PageView; + ReactGA.send({hitType: "pageview", page: pageView.location.pathname + pageView.location.search, title: pageView.title}); + } + else if(model.hasOwnProperty("action") || model.hasOwnProperty("category") || model.hasOwnProperty("label")) + { + const userEvent = model as UserEvent; + ReactGA.event({action: userEvent.action, category: userEvent.category, label: userEvent.label}) + } + else + { + console.log("Unrecognizable analytics model", model); + } } @@ -99,7 +127,7 @@ export default class GoogleAnalyticsUtils /******************************************************************************* ** *******************************************************************************/ - public recordAnalytics = (location: Location, title: string) => + public recordAnalytics = (model: AnalyticsModel) => { if(this.metaData == null) { @@ -109,7 +137,7 @@ export default class GoogleAnalyticsUtils })() } - this.send(location, title); + this.send(model); } } \ No newline at end of file