Add new custom GA events to demo

packages/toolpad-app/src/toolpad/Apps/index.tsx

@@ -51,7 +51,7 @@ import AppOptions from '../AppOptions';
 import AppNameEditable from '../AppOptions/AppNameEditable';
 import { ERR_VALIDATE_CAPTCHA_FAILED } from '../../errorCodes';
 
-import { sendAppCreatedEvent } from '../../utils/ga';
+import { sendAppContinueLatestEvent, sendAppCreatedEvent } from '../../utils/ga';
 import { StoredLatestCreatedApp, TOOLPAD_LATEST_CREATED_APP_KEY } from '../../storageKeys';
 import FlexFill from '../../components/FlexFill';
 import ToolpadShell from '../ToolpadShell';
@@ -211,6 +211,8 @@ function CreateAppDialog({
  return;
  }
 
+ sendAppContinueLatestEvent(firstLatestCreatedApp.appId);
+
  navigate(`/app/${firstLatestCreatedApp.appId}`);
  }, [firstLatestCreatedApp, onContinueToExistingApp, surveySeen, setSurveySeen, navigate]);
 

packages/toolpad-app/src/toolpad/ToolpadShell/DemoBar.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
 import { Box, Button, Link, styled, SxProps, Typography } from '@mui/material';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import { useParams } from 'react-router-dom';
 import { blueDark, grey } from '../../theme';
 import { DOCUMENTATION_INSTALLATION_URL, ROADMAP_URL, SCHEDULE_DEMO_URL } from '../../constants';
+import {
+ addUTMParamsToUrl,
+ DEMO_CAMPAIGN_NAME,
+ sendRoadmapClickEvent,
+ sendScheduleDemoClickEvent,
+ sendSelfHostClickEvent,
+} from '../../utils/ga';
 
 const DemoBarContainer = styled(Box)({
  alignItems: 'center',
@@ -15,13 +23,34 @@ const DemoBarContainer = styled(Box)({
  paddingRight: 20,
 });
 
+const linkStyles: SxProps = {
+ color: grey[700],
+ fontWeight: 'normal',
+ textDecorationColor: grey[700],
+ '&:hover': { color: grey[700] },
+};
+
+const addDemoBarUTMParamsToURL = (url: string): string =>
+ addUTMParamsToUrl(url, {
+ source: 'demo_bar',
+ medium: 'organic_toolpad',
+ campaign: DEMO_CAMPAIGN_NAME,
+ });
+
 export default function DemoBar() {
- const linkStyles: SxProps = {
- color: grey[700],
- fontWeight: 'normal',
- textDecorationColor: grey[700],
- '&:hover': { color: grey[700] },
- };
+ const { appId } = useParams();
+
+ const handleSelfHostLinkClick = React.useCallback(() => {
+ sendSelfHostClickEvent(appId, 'demoBar');
+ }, [appId]);
+
+ const handleRoadmapLinkClick = React.useCallback(() => {
+ sendRoadmapClickEvent(appId);
+ }, [appId]);
+
+ const handleScheduleDemoClick = React.useCallback(() => {
+ sendScheduleDemoClickEvent(appId);
+ }, [appId]);
 
  return (
  <DemoBarContainer>
@@ -30,17 +59,33 @@ export default function DemoBar() {
  </Typography>
  <Typography variant="body2" textAlign="center">
  Check out our{' '}
- <Link href={ROADMAP_URL} target="_blank" underline="always" sx={linkStyles}>
+ <Link
+ href={ROADMAP_URL}
+ target="_blank"
+ underline="always"
+ sx={linkStyles}
+ onClick={handleRoadmapLinkClick}
+ >
  roadmap
  </Link>{' '}
  to stay up to date, or{' '}
- <Link href={SCHEDULE_DEMO_URL} target="_blank" underline="always" sx={linkStyles}>
+ <Link
+ href={SCHEDULE_DEMO_URL}
+ target="_blank"
+ underline="always"
+ sx={linkStyles}
+ onClick={handleScheduleDemoClick}
+ >
  schedule a demo
  </Link>
  .<br />
  Note: PostgreSQL, Google Sheets are supported in the self-hosted version.
  </Typography>
- <Link href={DOCUMENTATION_INSTALLATION_URL} target="_blank">
+ <Link
+ href={addDemoBarUTMParamsToURL(DOCUMENTATION_INSTALLATION_URL)}
+ target="_blank"
+ onClick={handleSelfHostLinkClick}
+ >
  <Button size="medium" variant="contained" endIcon={<KeyboardArrowRightRounded />}>
  Self-host
  </Button>

packages/toolpad-app/src/toolpadDataSources/QueryInputPanel.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { Alert, Box, Toolbar, Link } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import { useParams } from 'react-router-dom';
 import FlexFill from '../components/FlexFill';
 import { DOCUMENTATION_INSTALLATION_URL } from '../constants';
 import config from '../config';
+import { addUTMParamsToUrl, DEMO_CAMPAIGN_NAME, sendSelfHostClickEvent } from '../utils/ga';
 
 export interface QueryInputPanelProps {
  children: React.ReactNode;
@@ -13,13 +15,27 @@ export interface QueryInputPanelProps {
 }
 
 export default function QueryInputPanel({ children, onRunPreview, actions }: QueryInputPanelProps) {
+ const { appId } = useParams();
+
+ const handleSelfHostLinkClick = React.useCallback(() => {
+ sendSelfHostClickEvent(appId, 'queryPanel');
+ }, [appId]);
+
  return (
  <Box sx={{ height: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
  {config.isDemo ? (
  <Alert severity="info" sx={{ ml: 1, mr: 1, mt: 1 }}>
  Can only run queries in browser in demo mode.
  <br />
- <Link href={DOCUMENTATION_INSTALLATION_URL} target="_blank">
+ <Link
+ href={addUTMParamsToUrl(DOCUMENTATION_INSTALLATION_URL, {
+ source: 'query_panel',
+ medium: 'organic_toolpad',
+ campaign: DEMO_CAMPAIGN_NAME,
+ })}
+ target="_blank"
+ onClick={handleSelfHostLinkClick}
+ >
  Try self-hosting
  </Link>{' '}
  for full functionality.

packages/toolpad-app/src/utils/ga.ts

@@ -19,6 +19,23 @@ export const reportWebVitalsToGA = ({ id, label, name, value }: NextWebVitalsMet
  }
 };
 
+export const DEMO_CAMPAIGN_NAME = 'toolpad_demo';
+
+export const addUTMParamsToUrl = (
+ url: string,
+ params: { source: string; medium: string; campaign: string },
+): string => {
+ const { source, medium, campaign } = params;
+
+ const urlWithParams = new URL(url);
+
+ urlWithParams.searchParams.set('utm_source', source);
+ urlWithParams.searchParams.set('utm_medium', medium);
+ urlWithParams.searchParams.set('utm_campaign', campaign);
+
+ return urlWithParams.toString();
+};
+
 export const sendAppCreatedEvent = (appName: string, appTemplateId?: AppTemplateId): void => {
  if (config.gaId) {
  window.gtag('event', 'toolpad_app_created', {
@@ -27,3 +44,36 @@ export const sendAppCreatedEvent = (appName: string, appTemplateId?: AppTemplate
  });
  }
 };
+
+export const sendAppContinueLatestEvent = (appId: string): void => {
+ if (config.gaId) {
+ window.gtag('event', 'toolpad_app_continue_latest', {
+ app_id: appId,
+ });
+ }
+};
+
+export const sendSelfHostClickEvent = (appId?: string, source?: string): void => {
+ if (config.gaId) {
+ window.gtag('event', 'toolpad_self_host_click', {
+ app_id: appId,
+ source,
+ });
+ }
+};
+
+export const sendRoadmapClickEvent = (appId?: string): void => {
+ if (config.gaId) {
+ window.gtag('event', 'toolpad_roadmap_click', {
+ app_id: appId,
+ });
+ }
+};
+
+export const sendScheduleDemoClickEvent = (appId?: string): void => {
+ if (config.gaId) {
+ window.gtag('event', 'toolpad_schedule_demo_click', {
+ app_id: appId,
+ });
+ }
+};