From c3defa0aa54a05185af698b9f248bcb24ce556da Mon Sep 17 00:00:00 2001 From: Pianist <26953709+Pianist038801@users.noreply.github.com> Date: Wed, 15 Dec 2021 14:19:43 -0800 Subject: [PATCH] feat: integrate analytics (#244) * feat: integrate analytics Signed-off-by: Pianist038801 * fix: remove DISABLE_AUTH Signed-off-by: Pianist038801 * fix: typo in the README Signed-off-by: Pianist038801 * fix: analytics configuration Signed-off-by: Pianist038801 Co-authored-by: Pianist038801 Signed-off-by: csirius <85753828+csirius@users.noreply.github.com> --- README.rst | 8 ++++++++ env.js | 10 +++++++++- package.json | 1 + src/client.tsx | 7 +++++++ .../Executions/useNodeExecutionDetails.ts | 4 +--- src/components/Navigation/VersionDisplayModal.tsx | 15 ++++++++++++++- yarn.lock | 5 +++++ 7 files changed, 45 insertions(+), 5 deletions(-) diff --git a/README.rst b/README.rst index 5348069d6..36b18581b 100644 --- a/README.rst +++ b/README.rst @@ -167,6 +167,14 @@ a single module, you can specify that one specifically (ex. ``localStorage.debug = 'flyte:adminEntity'`` to only see decoded Flyte Admin API requests). +============ +Google Analytics +============ + +This application makes use of the `react-ga4 `_ +libary to include Google Analytics tracking code in a website or app. For all the environments, it is configured using ENABLE_GA environment variable. +By default, it's enabled like this: ``ENABLE_GA=true``. If you want to disable it, just set it false. (ex. ``ENABLE_GA=false``). + .. _cors-proxying: ================================ diff --git a/env.js b/env.js index e8871e08c..5404bb9ad 100644 --- a/env.js +++ b/env.js @@ -8,7 +8,7 @@ const NODE_ENV = process.env.NODE_ENV || 'development'; // If this is unset, API calls will default to the same host used to serve this app const ADMIN_API_URL = process.env.ADMIN_API_URL; -// Use this to create SSL server +// Use this to create SSL server const ADMIN_API_USE_SSL = process.env.ADMIN_API_USE_SSL || 'http'; const BASE_URL = process.env.BASE_URL || ''; @@ -23,6 +23,10 @@ const PLUGINS_MODULE = process.env.PLUGINS_MODULE; // If it has no protocol, it will be treated as relative to window.location.origin const STATUS_URL = process.env.STATUS_URL; +// Configure Google Analytics +const ENABLE_GA = process.env.ENABLE_GA || false; +const GA_TRACKING_ID = process.env.GA_TRACKING_ID || 'G-0QW4DJWJ20'; + module.exports = { ADMIN_API_URL, ADMIN_API_USE_SSL, @@ -31,10 +35,14 @@ module.exports = { NODE_ENV, PLUGINS_MODULE, STATUS_URL, + ENABLE_GA, + GA_TRACKING_ID, processEnv: { ADMIN_API_URL, BASE_URL, CORS_PROXY_PREFIX, + ENABLE_GA, + GA_TRACKING_ID, NODE_ENV, STATUS_URL } diff --git a/package.json b/package.json index 661b6e871..bf9ae7967 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "memory-fs": "^0.4.1", "morgan": "^1.8.2", "react-flow-renderer": "^9.6.3", + "react-ga4": "^1.4.1", "react-helmet": "^5.1.3", "react-responsive": "^4.1.0", "react-transition-group": "^2.3.1", diff --git a/src/client.tsx b/src/client.tsx index d388adf18..648825247 100644 --- a/src/client.tsx +++ b/src/client.tsx @@ -3,6 +3,7 @@ import 'intersection-observer'; import 'protobuf'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import ReactGA from 'react-ga4'; const render = (Component: React.FC) => { ReactDOM.render(, document.getElementById('react-app')); @@ -11,6 +12,12 @@ const render = (Component: React.FC) => { const initializeApp = () => { const App = require('./components/App/App').App; + const { ENABLE_GA, GA_TRACKING_ID } = env; + + if (ENABLE_GA != 'false') { + ReactGA.initialize(GA_TRACKING_ID as string); + } + if (env.NODE_ENV === 'development') { // We use style-loader in dev mode, but it causes a FOUC and some initial styling issues // so we'll give it time to add the styles before initial render. diff --git a/src/components/Executions/useNodeExecutionDetails.ts b/src/components/Executions/useNodeExecutionDetails.ts index 08278fc56..ffe1ed341 100644 --- a/src/components/Executions/useNodeExecutionDetails.ts +++ b/src/components/Executions/useNodeExecutionDetails.ts @@ -1,5 +1,3 @@ - - import { log } from 'common/log'; import { QueryType } from 'components/data/types'; import { fetchTaskTemplate } from 'components/Task/taskQueries'; @@ -73,7 +71,7 @@ function createBranchNodeExecutionDetails( ): NodeExecutionDetails { return { displayId: node.id, - displayName: "branchNode", + displayName: 'branchNode', displayType: NodeExecutionDisplayType.BranchNode }; } diff --git a/src/components/Navigation/VersionDisplayModal.tsx b/src/components/Navigation/VersionDisplayModal.tsx index d0e300212..a1edc0a16 100644 --- a/src/components/Navigation/VersionDisplayModal.tsx +++ b/src/components/Navigation/VersionDisplayModal.tsx @@ -1,9 +1,10 @@ import { Dialog, DialogContent } from '@material-ui/core'; import Link from '@material-ui/core/Link'; import { makeStyles, Theme } from '@material-ui/core/styles'; +import * as React from 'react'; import { ClosableDialogTitle } from 'components/common/ClosableDialogTitle'; import { useVersion } from 'components/hooks/useVersion'; -import * as React from 'react'; +import { env } from 'common/env'; const { version: platformVersion } = require('../../../package.json'); @@ -72,6 +73,8 @@ export const VersionDisplayModal: React.FC = ({ ) : null; + const { DISABLE_GA } = env; + return ( = ({ {adminVersion} +
+ Google Analytics + + {DISABLE_GA === 'false' ? 'Active' : 'Inactive'} + +
Documentation Link: