web/satellite/vuetify-poc: verify analytics events

This change adds more analytics corresponding to existing ones in the production app. Issue: #6123 Change-Id: I019000f1832c62a2d7eaabacbc8d779b786256a0
storj · Dec 21, 2023 · f5880a9 · f5880a9
1 parent 8b7dceb
commit f5880a9
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 15 deletions.
diff --git a/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue b/web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
@@ -409,6 +409,9 @@ async function addCard(res: string): Promise<void> {
         const action = paymentElementEnabled.value ? billingStore.addCardByPaymentMethodID : billingStore.addCreditCard;
         await action(res);
         closeAddPayment();
+
+        analyticsStore.eventTriggered(AnalyticsEvent.CREDIT_CARD_ADDED_FROM_BILLING);
+
         // We fetch User one more time to update their Paid Tier status.
         await usersStore.getUser();
     } catch (error) {
@@ -436,7 +439,6 @@ async function onConfirmAddStripe(): Promise<void> {
     isLoading.value = true;
     await stripeCardInput.value.onSubmit();
     isLoading.value = false;
-    analyticsStore.eventTriggered(AnalyticsEvent.CREDIT_CARD_ADDED_FROM_BILLING);
 }
 
 function addPaymentMethodHandler(): void {

diff --git a/web/satellite/vuetify-poc/src/components/AddCreditCardComponent.vue b/web/satellite/vuetify-poc/src/components/AddCreditCardComponent.vue
@@ -51,8 +51,9 @@ import { useUsersStore } from '@/store/modules/usersStore';
 import { useLoading } from '@/composables/useLoading';
 import { useNotify } from '@/utils/hooks';
 import { useBillingStore } from '@/store/modules/billingStore';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useConfigStore } from '@/store/modules/configStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import StripeCardElement from '@/components/account/billing/paymentMethods/StripeCardElement.vue';
 import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
@@ -61,6 +62,7 @@ interface StripeForm {
     onSubmit(): Promise<void>;
 }
 
+const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();
 const usersStore = useUsersStore();
 const notify = useNotify();
@@ -108,6 +110,8 @@ async function addCardToDB(res: string): Promise<void> {
         isCardInputShown.value = false;
         isLoading.value = false;
 
+        analyticsStore.eventTriggered(AnalyticsEvent.CREDIT_CARD_ADDED_FROM_BILLING);
+
         // We fetch User one more time to update their Paid Tier status.
         usersStore.getUser().catch();
 

diff --git a/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
@@ -15,6 +15,7 @@
                 clearable
                 density="compact"
                 rounded="lg"
+                @update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
             />
         </v-col>
         <v-col cols="auto">
@@ -183,12 +184,13 @@ import {
 } from '@/store/modules/objectBrowserStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useNotify } from '@/utils/hooks';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { BrowserObjectTypeInfo, BrowserObjectWrapper, EXTENSION_INFOS, FILE_INFO, FOLDER_INFO } from '@/types/browser';
 import { useLinksharing } from '@/composables/useLinksharing';
 import { tableSizeOptions } from '@/types/common';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
 import DeleteFileDialog from '@poc/components/dialogs/DeleteFileDialog.vue';
@@ -206,6 +208,7 @@ const emit = defineEmits<{
     newFolderClick: [];
 }>();
 
+const analyticsStore = useAnalyticsStore();
 const config = useConfigStore();
 const obStore = useObjectBrowserStore();
 const projectsStore = useProjectsStore();

diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -15,6 +15,7 @@
             density="comfortable"
             rounded="lg"
             class="mx-2 mt-2"
+            @update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
         />
 
         <v-data-table-server
@@ -130,13 +131,14 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useNotify } from '@/utils/hooks';
 import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
 import { Size } from '@/utils/bytesSize';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { tableSizeOptions } from '@/types/common';
 import { LocalData } from '@/utils/localData';
 import { useAppStore } from '@/store/modules/appStore';
 import { BrowserObjectTypeInfo, BrowserObjectWrapper, EXTENSION_INFOS, FILE_INFO, FOLDER_INFO } from '@/types/browser';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import BrowserRowActions from '@poc/components/BrowserRowActions.vue';
 import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
@@ -161,6 +163,7 @@ const props = defineProps<{
     loading?: boolean;
 }>();
 
+const analyticsStore = useAnalyticsStore();
 const config = useConfigStore();
 const obStore = useObjectBrowserStore();
 const projectsStore = useProjectsStore();

diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -132,6 +132,7 @@ function openProject(): void {
     projectsStore.selectProject(props.item.id);
     router.push(`/projects/${projectsStore.state.selectedProject.urlId}/dashboard`);
     analyticsStore.pageVisit('/projects/dashboard');
+    analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
 }
 
 /**
@@ -141,6 +142,7 @@ function onSettingsClick(): void {
     if (!props.item) return;
     projectsStore.selectProject(props.item.id);
     router.push(`/projects/${projectsStore.state.selectedProject.urlId}/settings`);
+    analyticsStore.pageVisit('/projects/settings');
 }
 
 /**

diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -187,6 +187,7 @@ function openProject(item: ProjectItemModel): void {
     projectsStore.selectProject(item.id);
     router.push(`/projects/${projectsStore.state.selectedProject.urlId}/dashboard`);
     analyticsStore.pageVisit('/projects/dashboard');
+    analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
 }
 
 /**

diff --git a/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue b/web/satellite/vuetify-poc/src/components/StorjTokenCardComponent.vue
@@ -37,12 +37,14 @@ import { computed, onMounted, ref } from 'vue';
 import { Wallet } from '@/types/payments';
 import { useLoading } from '@/composables/useLoading';
 import { useBillingStore } from '@/store/modules/billingStore';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
 import { useAppStore } from '@poc/store/appStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import AddTokensDialog from '@poc/components/dialogs/AddTokensDialog.vue';
 
+const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
 const billingStore = useBillingStore();
 const notify = useNotify();
@@ -132,6 +134,8 @@ function claimWalletClick(): void {
  * Conditionally claim a wallet before that.
  */
 function onAddTokens(): void {
+    analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
+
     withLoading(async () => {
         if (!wallet.value.address) {
             // not possible from this component

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
@@ -179,6 +179,7 @@ import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAppStore } from '@poc/store/appStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 
@@ -195,6 +196,7 @@ const model = computed<boolean>({
     set: value => emit('update:modelValue', value),
 });
 
+const analyticsStore = useAnalyticsStore();
 const projectsStore = useProjectsStore();
 const usersStore = useUsersStore();
 const configStore = useConfigStore();
@@ -252,6 +254,8 @@ async function onPrimaryClick(): Promise<void> {
             model.value = false;
             router.push(`/projects/${project.urlId}/dashboard`);
             notify.success('Project created.');
+
+            analyticsStore.pageVisit('/projects/dashboard');
         });
     } else if (usersStore.state.user.paidTier) {
         if (!isLimitIncreaseRequestEnabled.value) {

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue
@@ -254,7 +254,7 @@ async function download(): Promise<void> {
         );
     } catch (error) {
         error.message = `Error downloading file. ${error.message}`;
-        notify.notifyError(error, AnalyticsErrorEventSource.OBJECT_DETAILS_MODAL);
+        notify.notifyError(error, AnalyticsErrorEventSource.GALLERY_VIEW);
     }
     isDownloading.value = false;
 }

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue
@@ -112,6 +112,7 @@ function openProject(): void {
     notify.success('Invite accepted!');
     router.push(`/projects/${projectsStore.state.selectedProject.urlId}/dashboard`);
     analyticsStore.pageVisit('/projects/dashboard');
+    analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
 }
 
 /**

diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -128,7 +128,7 @@
 
                     <v-divider class="my-2" />
 
-                    <v-list-item v-if="billingEnabled" link class="my-1 rounded-lg" router-link to="/account/billing" @click="closeSideNav">
+                    <v-list-item v-if="billingEnabled" link class="my-1 rounded-lg" router-link to="/account/billing" @click="() => registerLinkClick('/account/billing')">
                         <template #prepend>
                             <icon-card size="18" />
                         </template>
@@ -137,7 +137,7 @@
                         </v-list-item-title>
                     </v-list-item>
 
-                    <v-list-item link class="my-1 rounded-lg" router-link to="/account/settings" @click="closeSideNav">
+                    <v-list-item link class="my-1 rounded-lg" router-link to="/account/settings" @click="() => registerLinkClick('/account/settings')">
                         <template #prepend>
                             <icon-settings size="18" />
                         </template>
@@ -270,6 +270,14 @@ function closeSideNav(): void {
     if (mdAndDown.value) appStore.toggleNavigationDrawer(false);
 }
 
+/**
+ * Conditionally closes the navigation drawer and tracks page visit.
+ */
+function registerLinkClick(page: string): void {
+    closeSideNav();
+    analyticsStore.pageVisit(page);
+}
+
 function toggleUpgradeFlow(): void {
     closeSideNav();
     appStore.toggleUpgradeFlow(true);

diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -83,7 +83,7 @@
                     </template>
 
                     <!-- Project Settings -->
-                    <v-list-item :to="`/projects/${selectedProject.urlId}/settings`">
+                    <v-list-item router-link :to="`/projects/${selectedProject.urlId}/settings`" @click="() => registerLinkClick('/projects/settings')">
                         <template #prepend>
                             <IconSettings />
                         </template>
@@ -147,25 +147,25 @@
             </v-list-item>
             -->
 
-            <navigation-item title="Overview" :to="`/projects/${selectedProject.urlId}/dashboard`">
+            <navigation-item title="Overview" :to="`/projects/${selectedProject.urlId}/dashboard`" @click="() => registerDashboardLinkClick('/projects/dashboard')">
                 <template #prepend>
                     <IconDashboard />
                 </template>
             </navigation-item>
 
-            <navigation-item title="Buckets" :to="`/projects/${selectedProject.urlId}/buckets`">
+            <navigation-item title="Buckets" :to="`/projects/${selectedProject.urlId}/buckets`" @click="() => registerLinkClick('/projects/buckets')">
                 <template #prepend>
                     <IconBucket />
                 </template>
             </navigation-item>
 
-            <navigation-item title="Access" :to="`/projects/${selectedProject.urlId}/access`">
+            <navigation-item title="Access" :to="`/projects/${selectedProject.urlId}/access`" @click="() => registerLinkClick('/projects/access')">
                 <template #prepend>
                     <IconAccess size="18" />
                 </template>
             </navigation-item>
 
-            <navigation-item title="Team" :to="`/projects/${selectedProject.urlId}/team`">
+            <navigation-item title="Team" :to="`/projects/${selectedProject.urlId}/team`" @click="() => registerLinkClick('/projects/team')">
                 <template #prepend>
                     <IconTeam size="18" />
                 </template>
@@ -192,6 +192,7 @@
                         href="https://docs.storj.io/"
                         target="_blank"
                         rel="noopener noreferrer"
+                        @click="() => trackViewDocsEvent('https://docs.storj.io/')"
                     >
                         <template #prepend>
                             <!-- <img src="@poc/assets/icon-docs.svg" alt="Docs"> -->
@@ -210,6 +211,7 @@
                         href="https://forum.storj.io/"
                         target="_blank"
                         rel="noopener noreferrer"
+                        @click="() => trackViewForumEvent('https://forum.storj.io/')"
                     >
                         <template #prepend>
                             <IconForum />
@@ -227,6 +229,7 @@
                         href="https://supportdcs.storj.io/hc/en-us"
                         target="_blank"
                         rel="noopener noreferrer"
+                        @click="() => trackViewSupportEvent('https://supportdcs.storj.io/hc/en-us')"
                     >
                         <template #prepend>
                             <IconSupport />
@@ -359,6 +362,38 @@ function trackPageVisitEvent(page: string): void {
     analyticsStore.pageVisit(page);
 }
 
+function registerDashboardLinkClick(page: string): void {
+    registerLinkClick(page);
+    analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
+}
+
+/**
+ * Sends "View Docs" event to segment and opens link.
+ */
+function trackViewDocsEvent(link: string): void {
+    registerLinkClick(link);
+    analyticsStore.eventTriggered(AnalyticsEvent.VIEW_DOCS_CLICKED);
+    window.open(link);
+}
+
+/**
+ * Sends "View Forum" event to segment and opens link.
+ */
+function trackViewForumEvent(link: string): void {
+    registerLinkClick(link);
+    analyticsStore.eventTriggered(AnalyticsEvent.VIEW_FORUM_CLICKED);
+    window.open(link);
+}
+
+/**
+ * Sends "View Support" event to segment and opens link.
+ */
+function trackViewSupportEvent(link: string): void {
+    registerLinkClick(link);
+    analyticsStore.eventTriggered(AnalyticsEvent.VIEW_SUPPORT_CLICKED);
+    window.open(link);
+}
+
 /**
  * This comparator is used to sort projects by isSelected.
  */

diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -270,6 +270,7 @@ async function upload(e: Event): Promise<void> {
 watch(isBucketPassphraseDialogOpen, isOpen => {
     if (isOpen || !isPromptForPassphrase.value) return;
     router.push(`/projects/${projectId.value}/buckets`);
+    analyticsStore.pageVisit(`/projects/buckets`);
 });
 
 watch(() => route.params.browserPath, browserPath => {

diff --git a/web/satellite/vuetify-poc/src/views/ProjectSettings.vue b/web/satellite/vuetify-poc/src/views/ProjectSettings.vue
@@ -45,7 +45,7 @@
 
                 <v-divider />
 
-                <v-list-item v-if="!isPaidTier && billingEnabled">
+                <v-list-item v-if="!isPaidTier && billingEnabled" @click="toggleUpgradeFlow">
                     <v-list-item-title>Free Account</v-list-item-title>
                     <v-list-item-subtitle>
                         {{ storageLimitFormatted }} Storage / {{ bandwidthLimitFormatted }} Bandwidth.
@@ -145,6 +145,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 import { decimalShift } from '@/utils/strings';
 import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useAppStore } from '@poc/store/appStore';
 
 import EditProjectDetailsDialog from '@poc/components/dialogs/EditProjectDetailsDialog.vue';
 import EditProjectLimitDialog from '@poc/components/dialogs/EditProjectLimitDialog.vue';
@@ -154,6 +155,7 @@ const isEditLimitDialogShown = ref<boolean>(false);
 const fieldToChange = ref<FieldToChange>(FieldToChange.Name);
 const limitToChange = ref<LimitToChange>(LimitToChange.Storage);
 
+const appStore = useAppStore();
 const projectsStore = useProjectsStore();
 const usersStore = useUsersStore();
 const configStore = useConfigStore();
@@ -222,6 +224,10 @@ const projectLimitsIncreaseRequestURL = computed((): string => {
     return configStore.state.config.projectLimitsIncreaseRequestURL;
 });
 
+function toggleUpgradeFlow(): void {
+    appStore.toggleUpgradeFlow(true);
+}
+
 /**
  * Returns formatted limit value.
  */