feat: add umami tags to track actions (#1500)

* fix: add umami tags * feat: apply umami tags on home page * fix: add integrity for script * fix: move umami website id to vars * fix: update from ui data * fix: update prop name * fix: remove unused delays
graasp · Oct 9, 2024 · 263a08a · 263a08a
1 parent 35e363e
commit 263a08a
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 52 deletions.
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -40,6 +40,7 @@ jobs:
           # VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
           VITE_GRAASP_REDIRECTION_HOST: ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
+          VITE_UMAMI_WEBSITE_ID: ${{ vars.VITE_UMAMI_WEBSITE_ID }}
         run: yarn build
         shell: bash
 

diff --git a/cypress/e2e/authentication.cy.ts b/cypress/e2e/authentication.cy.ts
@@ -2,15 +2,11 @@ import { CookieKeys, PackedFolderItemFactory } from '@graasp/sdk';
 
 import {
   HOME_PATH,
-  ITEMS_PATH,
   REDIRECT_PATH,
   buildItemPath,
 } from '../../src/config/paths';
 import { HEADER_APP_BAR_ID, ITEM_MAIN_CLASS } from '../../src/config/selectors';
-import {
-  REDIRECTION_TIME,
-  REQUEST_FAILURE_LOADING_TIME,
-} from '../support/constants';
+import { REQUEST_FAILURE_LOADING_TIME } from '../support/constants';
 import { SIGN_IN_PATH } from '../support/paths';
 
 describe('Authentication', () => {
@@ -46,29 +42,25 @@ describe('Authentication', () => {
       });
     });
 
-    describe('Redirect to URL in local storage', () => {
+    describe('Redirect to URL saved in cookie', () => {
       it('Home', () => {
         cy.setCookie(CookieKeys.RedirectUrl, HOME_PATH);
         cy.visit(REDIRECT_PATH);
-        cy.url({
-          timeout: REDIRECTION_TIME,
-        }).should('include', HOME_PATH);
-      });
-
-      it('Items', () => {
-        cy.setCookie(CookieKeys.RedirectUrl, ITEMS_PATH);
-        cy.visit(REDIRECT_PATH);
-        cy.url({
-          timeout: REDIRECTION_TIME,
-        }).should('include', ITEMS_PATH);
+        cy.url().should(
+          'equal',
+          new URL(HOME_PATH, Cypress.config().baseUrl).toString(),
+        );
       });
 
       it('Item', () => {
         cy.setCookie(CookieKeys.RedirectUrl, buildItemPath(ENV.items[0].id));
         cy.visit(REDIRECT_PATH);
-        cy.url({ timeout: REDIRECTION_TIME }).should(
-          'include',
-          buildItemPath(ENV.items[0].id),
+        cy.url().should(
+          'equal',
+          new URL(
+            buildItemPath(ENV.items[0].id),
+            Cypress.config().baseUrl,
+          ).toString(),
         );
       });
     });

diff --git a/cypress/e2e/header.cy.ts b/cypress/e2e/header.cy.ts
@@ -13,7 +13,7 @@ describe('Header', () => {
     cy.visit(HOME_PATH);
     // check navigation and display and interface doesn't crash
     // todo: this is less robust than using the Platform contant from ui, but it was making cypress compile ui which is unnecessary.
-    cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS.Builder}`).click();
+    cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS.builder}`).click();
     cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_ID}`).should('exist');
   });
 

diff --git a/cypress/e2e/item/chatbox/chatbox.cy.ts b/cypress/e2e/item/chatbox/chatbox.cy.ts
@@ -11,11 +11,11 @@ import {
 } from '../../../../src/config/selectors';
 import { ITEM_WITH_CHATBOX_MESSAGES } from '../../../fixtures/chatbox';
 import { CURRENT_USER, MEMBERS } from '../../../fixtures/members';
-import { CHATBOX_LOADING_TIME } from '../../../support/constants';
+import { CHATBOX_TIMEOUT } from '../../../support/constants';
 
 const openChatbox = () => {
   cy.get(`#${ITEM_CHATBOX_BUTTON_ID}`).click();
-  cy.wait('@getItemChat', { timeout: CHATBOX_LOADING_TIME });
+  cy.wait('@getItemChat', { timeout: CHATBOX_TIMEOUT });
 };
 
 describe('Chatbox Scenarios', () => {

diff --git a/cypress/e2e/memberships/deleteItemMembership.cy.ts b/cypress/e2e/memberships/deleteItemMembership.cy.ts
@@ -15,7 +15,6 @@ import {
 } from '../../../src/config/selectors';
 import { CURRENT_USER, MEMBERS } from '../../fixtures/members';
 import { ITEMS_WITH_MEMBERSHIPS } from '../../fixtures/memberships';
-import { TABLE_MEMBERSHIP_RENDER_TIME } from '../../support/constants';
 import { ItemForTest } from '../../support/types';
 
 const deleteItemMembership = ({
@@ -26,7 +25,6 @@ const deleteItemMembership = ({
   itemId: string;
 }) => {
   cy.get(`#${buildShareButtonId(itemId)}`).click();
-  cy.wait(TABLE_MEMBERSHIP_RENDER_TIME);
   cy.get(`#${buildItemMembershipRowDeleteButtonId(id)}`).click();
   cy.get(`#${CONFIRM_MEMBERSHIP_DELETE_BUTTON_ID}`).click();
 };

diff --git a/cypress/support/constants.ts b/cypress/support/constants.ts
@@ -1,22 +1,12 @@
 export const CREATE_ITEM_PAUSE = 1000;
 export const EDIT_ITEM_PAUSE = 1000;
 export const ITEM_LOGIN_PAUSE = 1000;
-export const NAVIGATE_PAUSE = 1000;
 export const NAVIGATION_LOAD_PAUSE = 1500;
-export const PAGE_LOAD_WAITING_PAUSE = 3000;
 export const REQUEST_FAILURE_LOADING_TIME = 1500;
 export const FILE_LOADING_PAUSE = 2000;
-export const TREE_VIEW_PAUSE = 1500;
-export const WEBSOCKETS_DELAY_TIME = 1500;
 
 export const EDIT_TAG_REQUEST_TIMEOUT = 10000;
 
-export const REDIRECTION_CONTENT = 'hello';
-export const REQUEST_FAILURE_TIME = 2500;
-
-export const REDIRECTION_TIME = 500;
 export const CAPTION_EDIT_PAUSE = 2000;
 
-export const TABLE_MEMBERSHIP_RENDER_TIME = 1000;
-export const FIXTURES_THUMBNAILS_FOLDER = './thumbnails';
-export const CHATBOX_LOADING_TIME = 5000;
+export const CHATBOX_TIMEOUT = 5000;
diff --git a/index.html b/index.html
@@ -18,6 +18,18 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
     />
+
+    <!-- Umami tracking code -->
+
+    <!--
+    The integrity can not be checked when using cross origin
+    integrity="sha384-JyQQf9XxkMfVx/h+OQ+SxUZqLbL3p3KmWfnZ4LpQWzksmzHXESgXCk1/5AYxT9nR"
+    -->
+    <script
+      defer
+      src="https://cloud.umami.is/script.js"
+      data-website-id="%VITE_UMAMI_WEBSITE_ID%"
+    ></script>
     <title>Graasp Builder</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.39.0",
-    "@graasp/ui": "5.2.2",
+    "@graasp/ui": "5.3.0",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -27,7 +27,7 @@ import {
   buildItemPath,
 } from '../config/paths';
 import { hooks, mutations } from '../config/queryClient';
-import Main from './main/Main';
+import { Main } from './main/Main';
 import Redirect from './main/Redirect';
 import BookmarkedItemsScreen from './pages/BookmarkedItemsScreen';
 import MapItemsScreen from './pages/MapItemsScreen';

diff --git a/src/components/common/SelectTypes.tsx b/src/components/common/SelectTypes.tsx
@@ -68,7 +68,12 @@ export const SelectTypes = (): JSX.Element => {
         multiple
         value={itemTypes}
         onChange={handleChange}
-        input={<OutlinedInput label={label} />}
+        input={
+          <OutlinedInput
+            label={label}
+            inputProps={{ 'data-umami-event': 'filter-item-type' }}
+          />
+        }
         renderValue={renderValues}
         MenuProps={MenuProps}
         sx={{

diff --git a/src/components/common/UserSwitchWrapper.tsx b/src/components/common/UserSwitchWrapper.tsx
@@ -49,6 +49,7 @@ const UserSwitchWrapper = ({ ButtonContent }: Props): JSX.Element => {
       seeProfileButtonId={HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID}
       buildMemberMenuItemId={buildMemberMenuItemId}
       avatar={<MemberAvatar id={member?.id} />}
+      dataUmamiEvent="header-avatar"
     />
   );
 };

diff --git a/src/components/item/ItemSearch.tsx b/src/components/item/ItemSearch.tsx
@@ -51,6 +51,7 @@ export const useItemSearch = ({
       inputBaseId={ITEM_SEARCH_INPUT_ID}
       placeholder={translateBuilder(BUILDER.ITEM_SEARCH_PLACEHOLDER)}
       size="small"
+      dataUmamiEvent="item-search"
     />
   );
   return { text: searchText, input: itemSearchInput };

diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
@@ -37,7 +37,13 @@ const StyledLink = styled(Link)(() => ({
   alignItems: 'center',
 }));
 const LinkComponent = ({ children }: { children: ReactNode }) => (
-  <StyledLink to={HOME_PATH}>{children}</StyledLink>
+  <StyledLink
+    data-umami-event="header-home-link"
+    data-umami-event-context={Context.Builder}
+    to={HOME_PATH}
+  >
+    {children}
+  </StyledLink>
 );
 
 // small converter for HOST_MAP into a usePlatformNavigation mapper
@@ -47,9 +53,9 @@ export const platformsHostsMap = defaultHostsMapper({
   [Platform.Analytics]: HOST_MAP.analytics,
 });
 
-type Props = { children: JSX.Element | (JSX.Element & string) };
+type Props = { children: ReactNode };
 
-const Main = ({ children }: Props): JSX.Element => {
+export const Main = ({ children }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const theme = useTheme();
   const { isMobile } = useMobileView();

diff --git a/src/components/main/MainMenu.tsx b/src/components/main/MainMenu.tsx
@@ -36,7 +36,11 @@ const ResourceLinks = () => {
   const { t } = useBuilderTranslation();
   return (
     <ListItem disablePadding>
-      <ListItemButton href={TUTORIALS_LINK} target="_blank">
+      <ListItemButton
+        href={TUTORIALS_LINK}
+        target="_blank"
+        data-umami-event="sidebar-tutorials"
+      >
         <ListItemIcon>
           <BookOpenTextIcon />
         </ListItemIcon>
@@ -64,18 +68,21 @@ const MainMenu = (): JSX.Element | null => {
     member.type === AccountType.Individual ? (
       <>
         <MenuItem
+          dataUmamiEvent="sidebar-bookmarks"
           onClick={() => goTo(BOOKMARKED_ITEMS_PATH)}
           selected={pathname === BOOKMARKED_ITEMS_PATH}
           text={t(BUILDER.BOOKMARKED_ITEMS_TITLE)}
           icon={<BookmarkIcon />}
         />
         <MenuItem
+          dataUmamiEvent="sidebar-published"
           onClick={() => goTo(PUBLISHED_ITEMS_PATH)}
           selected={pathname === PUBLISHED_ITEMS_PATH}
           text={t(BUILDER.NAVIGATION_PUBLISHED_ITEMS_TITLE)}
           icon={<LibraryBigIcon />}
         />
         <MenuItem
+          dataUmamiEvent="sidebar-trash"
           onClick={() => goTo(RECYCLE_BIN_PATH)}
           selected={pathname === RECYCLE_BIN_PATH}
           text={t(BUILDER.RECYCLE_BIN_TITLE)}
@@ -89,6 +96,7 @@ const MainMenu = (): JSX.Element | null => {
       <Stack direction="column" height="100%" justifyContent="space-between">
         <Box>
           <MenuItem
+            dataUmamiEvent="sidebar-home"
             onClick={() => goTo(HOME_PATH)}
             selected={pathname === HOME_PATH}
             icon={<HomeIcon />}

diff --git a/src/components/main/NewItemButton.tsx b/src/components/main/NewItemButton.tsx
@@ -45,6 +45,7 @@ const NewItemButton = ({
             background: theme.palette.primary.main,
             '&:hover': { background: 'grey' },
           }}
+          data-umami-event="new-item-icon-button"
         >
           <PlusIcon />
         </IconButton>
@@ -56,6 +57,7 @@ const NewItemButton = ({
           aria-label="add"
           startIcon={<PlusIcon />}
           size={size}
+          data-umami-event="new-item-button"
         >
           {translateBuilder(BUILDER.NEW_ITEM_BUTTON)}
         </Button>

diff --git a/src/components/table/ShowOnlyMeButton.tsx b/src/components/table/ShowOnlyMeButton.tsx
@@ -23,6 +23,9 @@ const ShowOnlyMeButton = ({
       sx={{ fontSize: '1rem', maxWidth: 'max-content' }}
       id={ACCESSIBLE_ITEMS_ONLY_ME_ID}
       label={translateBuilder(BUILDER.HOME_SHOW_ONLY_CREATED_BY_ME)}
+      // We need to have a button component so the onclick triggers an event in umami
+      component="button"
+      data-umami-event="filter-created-by-me"
     />
   );
 };

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -217,10 +217,10 @@ export const ITEM_PUBLISH_SECTION_TITLE_ID = 'itemPublishSectionTitle';
 export const APP_NAVIGATION_PLATFORM_SWITCH_ID = 'appNavigationPlatformSwitch';
 // cannot use graasp ui because it slows down a lot cypress
 export const APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS = {
-  Builder: 'appNavigationPlatformSwitchButtonBuilder',
-  Player: 'appNavigationPlatformSwitchButtonPlayer',
-  Library: 'appNavigationPlatformSwitchButtonLibrary',
-  Analytics: 'appNavigationPlatformSwitchButtonAnalytics',
+  builder: 'appNavigationPlatformSwitchButtonBuilder',
+  player: 'appNavigationPlatformSwitchButtonPlayer',
+  library: 'appNavigationPlatformSwitchButtonLibrary',
+  analytics: 'appNavigationPlatformSwitchButtonAnalytics',
 };
 
 export const buildItemPublicationButton = (status: PublicationStatus): string =>

diff --git a/yarn.lock b/yarn.lock
@@ -1688,9 +1688,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:5.2.2":
-  version: 5.2.2
-  resolution: "@graasp/ui@npm:5.2.2"
+"@graasp/ui@npm:5.3.0":
+  version: 5.3.0
+  resolution: "@graasp/ui@npm:5.3.0"
   dependencies:
     http-status-codes: "npm:2.3.0"
     interweave: "npm:13.1.0"
@@ -1719,7 +1719,7 @@ __metadata:
     react-i18next: ^13.0.0 || ^14.0.0 || ^15.0.0
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
-  checksum: 10/717d2a0d282dfc4fa7de61f6b132765bdf933870d13ff0570caa713c40281ca96690af7566f41ceff94c7c49a7f22489b0ddddd83329bb5537a5f0f46542af1a
+  checksum: 10/7edfe0f82ef71c718785f98de4be78c2dae712d5681100b5ff8dd9f83d73980dfb0940ab020c86f9231757bd058a926094d5e72934fa57612bcd3f3690f037f4
   languageName: node
   linkType: hard
 
@@ -6476,7 +6476,7 @@ __metadata:
     "@graasp/sdk": "npm:4.31.0"
     "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.39.0"
-    "@graasp/ui": "npm:5.2.2"
+    "@graasp/ui": "npm:5.3.0"
     "@mui/icons-material": "npm:5.16.7"
     "@mui/lab": "npm:5.0.0-alpha.173"
     "@mui/material": "npm:5.16.7"