satellite/analytics: Track events generated from Upgrade Account Banner (#4770)

satellite/analytics: Track events generated from Upgrade Account banner

satellite/analytics/service.go

@@ -28,6 +28,9 @@ const (
 	eventObjectUploaded            = "Object Uploaded"
 	eventAPIKeyGenerated           = "API Key Generated"
 	eventCreditCardAdded           = "Credit Card Added"
+	eventUpgradeBannerClicked      = "Upgrade Banner Clicked"
+	eventModalAddCard              = "Credit Card Added In Modal"
+	eventModalAddTokens            = "Storj Token Added In Modal"
 )
 
 var (
@@ -68,7 +71,8 @@ func NewService(log *zap.Logger, config Config, satelliteName string) *Service {
 		service.segment = segment.New(config.SegmentWriteKey)
 	}
 	for _, name := range []string{eventGatewayCredentialsCreated, eventPassphraseCreated, eventExternalLinkClicked,
-		eventPathSelected, eventLinkShared, eventObjectUploaded, eventAPIKeyGenerated} {
+		eventPathSelected, eventLinkShared, eventObjectUploaded, eventAPIKeyGenerated, eventUpgradeBannerClicked,
+		eventModalAddCard, eventModalAddTokens} {
 		service.clientEvents[name] = true
 	}
 

web/satellite/src/components/account/billing/paidTier/AddPaymentMethodModal.vue

@@ -185,6 +185,9 @@ import { USER_ACTIONS } from '@/store/modules/users';
 import { PaymentAmountOption } from '@/types/payments';
 import { MetaUtils } from '@/utils/meta';
 
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+
 interface StripeForm {
     onSubmit(): Promise<void>;
 }
@@ -215,6 +218,8 @@ export default class AddPaymentMethodModal extends Vue {
     public isLoading = false;
     public coinPaymentsCheckoutLink = '';
 
+    public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
     public $refs!: {
         stripeCardInput: StripeCardInput & StripeForm;
     };
@@ -243,7 +248,6 @@ export default class AddPaymentMethodModal extends Vue {
         } catch (error) {
             await this.$notify.error(error.message);
         }
-
         this.isLoading = false;
     }
 
@@ -266,6 +270,9 @@ export default class AddPaymentMethodModal extends Vue {
             if (this.$route.name === RouteConfig.ProjectDashboard.name) {
                 await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
             }
+
+            await this.analytics.eventTriggered(AnalyticsEvent.MODAL_ADD_CARD);
+
         } catch (error) {
             await this.$notify.error(error.message);
         }
@@ -302,6 +309,9 @@ export default class AddPaymentMethodModal extends Vue {
             if (this.$route.name === RouteConfig.Billing.name) {
                 await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
             }
+
+            await this.analytics.eventTriggered(AnalyticsEvent.MODAL_ADD_TOKENS);
+
         } catch (error) {
             await this.$notify.error(error.message);
         }

web/satellite/src/components/infoBars/PaidTierBar.vue

@@ -6,7 +6,7 @@
         <p>
             Upload up to 75TB by upgrading to a Storj Pro Account.
         </p>
-        <p class="pt-bar__functional" @click.stop="openAddPMModal">
+        <p class="pt-bar__functional" @click="openBanner">
             Upgrade now.
         </p>
     </div>
@@ -14,12 +14,22 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { AnalyticsHttpApi } from '@/api/analytics';
+import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 
 // @vue/component
 @Component
 export default class PaidTierBar extends Vue {
     @Prop({default: () => () => false})
     public readonly openAddPMModal: () => void;
+    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
+    // Send analytics event to segment when Upgrade Account banner is clicked.
+    public async openBanner(): Promise<void> {
+        this.openAddPMModal()
+        await this.analytics.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED);
+
+    }
 }
 </script>
 

web/satellite/src/utils/constants/analyticsEventNames.ts

@@ -10,4 +10,7 @@ export enum AnalyticsEvent {
     LINK_SHARED = 'Link Shared',
     OBJECT_UPLOADED = 'Object Uploaded',
     API_KEY_GENERATED = 'API Key Generated',
+    UPGRADE_BANNER_CLICKED = 'Upgrade Banner Clicked',
+    MODAL_ADD_CARD = 'Credit Card Added In Modal',
+    MODAL_ADD_TOKENS = 'Storj Token Added In Modal',
 }