feat(dedicated): applying tracking team feedback

ref: MANAGER-15145 Signed-off-by: soufien mhelhali <[email protected]>
ovh · Nov 14, 2024 · 4a906c9 · 4a906c9
1 parent 351c31c
commit 4a906c9
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 33 deletions.
diff --git a/...manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.controller.js b/...manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.controller.js
@@ -53,10 +53,18 @@ export default class AgoraIpOrderCtrl {
   }
 
   goToIpv4Order() {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::select_version::next_ipv4`,
+      type: 'action',
+    });
     this.$state.go('app.ip.agora-order.ipv4');
   }
 
   goToIpv6Order() {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::select_version::next_ipv6`,
+      type: 'action',
+    });
     this.$state.go('app.ip.agora-order.ipv6');
   }
 

diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.controller.js b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.controller.js
@@ -78,6 +78,7 @@ export default class AgoraIpV4OrderController {
       params: {},
       selectedService: null,
       selectedServiceRegion: null,
+      selectedOffer: null,
     };
     this.loading = {};
     this.user = this.$state.params.user;
@@ -207,7 +208,9 @@ export default class AgoraIpV4OrderController {
   }
 
   getServiceRegion() {
-    this.trackClick(`select_service::next_${this.model.selectedService}`);
+    this.trackClick(
+      `select_service::next_${this.model.selectedService.serviceName}`,
+    );
     this.loadServiceRegion = true;
     this.model.selectedServiceRegion = null;
     let request = null;
@@ -244,13 +247,6 @@ export default class AgoraIpV4OrderController {
     });
   }
 
-  trackParkingLocation() {
-    this.atInternet.trackClick({
-      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::select_location::next`,
-      type: 'action',
-    });
-  }
-
   trackOrganisationLink() {
     this.atInternet.trackClick({
       name: `${FUNNEL_TRACKING_PREFIX}link::add_additional_ip::link_to_organisations_management`,
@@ -362,7 +358,9 @@ export default class AgoraIpV4OrderController {
 
   manageLoadIpOffers() {
     if (this.model.selectedRegion) {
-      this.trackClick(`select_region::next`);
+      this.trackClick(
+        `select_region::next_${this.model.selectedRegion.regionName}`,
+      );
     }
 
     this.loading.ipOffers = true;
@@ -564,7 +562,7 @@ export default class AgoraIpV4OrderController {
   }
 
   onSelectedOfferChange(selectedOffer) {
-    this.trackClick(`select_solution::next_${this.model.params.selectedOffer}`);
+    this.model.selectedOffer = selectedOffer;
     this.maxSize = IP_AGORA[selectedOffer].maxQty;
     this.minSize = IP_AGORA[selectedOffer].minQty;
     this.model.params.selectedQuantity = this.minSize;
@@ -614,12 +612,6 @@ export default class AgoraIpV4OrderController {
       quantity: get(this.model.params, 'selectedQuantity', 1),
     };
 
-    const setup = `${this.model.selectedService}_${this.model.selectedRegion}_${this.model.selectedOffer}`;
-    this.atInternet.trackClick({
-      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv4_${setup}`,
-      type: 'action',
-    });
-
     let productToOrder = null;
     if (this.isPrivateCloudOffer) {
       productToOrder = this.IpAgoraOrder.constructor.createProductToOrder({
@@ -650,6 +642,14 @@ export default class AgoraIpV4OrderController {
       });
     }
 
+    const setup = `${commonProductProps.destination}_${orderableIpCountry ||
+      params.selectedCountry?.code ||
+      ''}_${productToOrder.planCode}`;
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv4_${setup}`,
+      type: 'action',
+    });
+
     return this.User.getUrlOf('express_order')
       .then((url) => {
         this.$window.open(
@@ -731,8 +731,27 @@ export default class AgoraIpV4OrderController {
     });
   }
 
+  trackSelectRegion(region) {
+    this.trackClick(`select_region::next_${region}`);
+  }
+
+  trackSelectLocation(location) {
+    this.trackClick(`select_location::next_${location.code}`);
+  }
+
+  offerTraking() {
+    this.trackClick(`select_solution::next_${this.model.selectedOffer}`);
+  }
+
+  locationTraking() {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::select_location::next`,
+      type: 'action',
+    });
+  }
+
   resumeOrder() {
-    const setup = `${this.model.selectedService}_${this.model.selectedRegion}_${this.model.selectedOffer}`;
+    const setup = `${this.model.selectedService.serviceName}_${this.model.selectedRegion.regionName}_${this.model.selectedOffer}`;
     this.atInternet.trackClick({
       name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::cancel::ipv4_${setup}`,
       type: 'action',

diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.html b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.html
@@ -68,7 +68,7 @@
             data-valid="$ctrl.model.selectedRegion"
             data-editable="!$ctrl.isLoading"
             data-navigation="$ctrl.model.selectedRegion"
-            data-on-focus="$ctrl.model.selectedRegion && $ctrl.onEditStep('location')"
+            data-on-focus="$ctrl.model.selectedRegion && $ctrl.onEditStep('region')"
             data-on-submit="$ctrl.manageLoadIpOffers()"
         >
             <div data-ng-show="$ctrl.loading.region" class="text-center">
@@ -84,7 +84,7 @@
                     data-variant="light"
                     data-picture="{{ ::region.icon }}"
                     data-model="$ctrl.model.selectedRegion"
-                    data-ng-click="trackParkingLocation()"
+                    data-on-change="$ctrl.trackSelectRegion(region.regionName)"
                     data-values="[region]"
                 >
                 </oui-select-picker>
@@ -101,6 +101,7 @@
             data-editable="!$ctrl.isLoading"
             data-on-focus="$ctrl.model.params.selectedOffer && $ctrl.onEditStep('solution')"
             data-valid="$ctrl.model.params.selectedOffer"
+            data-on-submit="$ctrl.offerTraking()"
         >
             <div data-ng-show="$ctrl.loading.ipOffers" class="text-center">
                 <oui-spinner></oui-spinner>
@@ -237,6 +238,7 @@ <h4 class="text-center">
             data-on-focus="$ctrl.model.params.selectedCountry && $ctrl.onEditStep('location_ip_address')"
             data-valid="$ctrl.model.params.selectedCountry"
             data-submit-text="{{($ctrl.model.params.selectedOffer.isIpBlockOffer && !$ctrl.isPrivateCloudOffer ? 'ip_agora_table_next_text' : 'ip_agora_table_submit_text') | translate }}"
+            data-on-submit="$ctrl.locationTraking()"
         >
             <div
                 data-ng-show="$ctrl.model.params.selectedOffer.countries.length > 0"
@@ -256,6 +258,7 @@ <h4 class="text-center">
                             data-name="description"
                             data-model="$ctrl.model.params.selectedCountry"
                             disabled="$ctrl.model.params.selectedOffer.countries.length === 1"
+                            data-on-change="$ctrl.trackSelectLocation($ctrl.model.params.selectedCountry)"
                         >
                             <div class="row">
                                 <div

diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.routes.js b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv4/ipv4.routes.js
@@ -1,5 +1,3 @@
-import { FUNNEL_TRACKING_PREFIX } from '../ip-ip-agoraOrder.constant';
-
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.ip.agora-order.ipv4', {
     url: '/ipv4',
@@ -16,8 +14,5 @@ export default /* @ngInject */ ($stateProvider) => {
     resolve: {
       breadcrumb: /* @ngInject */ () => false,
     },
-    atInternet: {
-      rename: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::select_version::next_ipv4`,
-    },
   });
 };
diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.controller.js b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.controller.js
@@ -209,7 +209,7 @@ export default class AgoraIpV6OrderController {
     }
 
     this.atInternet.trackClick({
-      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv6_${trakingService}__free`,
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv6_${trakingService}_${regionId}__free`,
       type: 'action',
     });
 
@@ -219,7 +219,7 @@ export default class AgoraIpV6OrderController {
           `${url}review?products=${JSURL.stringify([productToOrder])}`,
           '_blank',
         );
-        this.goToDashboard();
+        this.$state.go(DASHBOARD_STATE_NAME);
       })
       .catch((error) => {
         this.atInternet.trackClick({
@@ -245,13 +245,20 @@ export default class AgoraIpV6OrderController {
 
   goToDashboard() {
     this.atInternet.trackClick({
-      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::cancel::ipv6_${this.model.selectedService}__free`,
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::cancel::ipv6_${this.model.selectedService}_${this.model.selectedPlan.regionId}_free`,
       type: 'action',
     });
 
     return this.$state.go(DASHBOARD_STATE_NAME);
   }
 
+  trackSelectRegion(name) {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}select::add_additional_ip::select_region::next_${name}`,
+      type: 'action',
+    });
+  }
+
   trackClick(name) {
     this.atInternet.trackClick({
       name: `${FUNNEL_TRACKING_PREFIX}select::add_additional_ip::${name}`,

diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.html b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.html
@@ -116,6 +116,7 @@ <h4>
                         data-disabled="!plan.available"
                         data-values="[plan]"
                         oui-tooltip="{{:: $ctrl.getRegionTooltip(plan.available) }}"
+                        data-on-change="$ctrl.trackSelectRegion(plan.regionId)"
                     >
                     </oui-select-picker>
                 </div>

diff --git a/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.routes.js b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.routes.js
@@ -1,5 +1,3 @@
-import { FUNNEL_TRACKING_PREFIX } from '../ip-ip-agoraOrder.constant';
-
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.ip.agora-order.ipv6', {
     url: '/ipv6',
@@ -10,8 +8,5 @@ export default /* @ngInject */ ($stateProvider) => {
     resolve: {
       breadcrumb: /* @ngInject */ () => false,
     },
-    atInternet: {
-      rename: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::select_version::next_ipv6`,
-    },
   });
 };
diff --git a/packages/manager/apps/dedicated/client/app/ip/ip.controller.js b/packages/manager/apps/dedicated/client/app/ip/ip.controller.js
@@ -9,6 +9,7 @@ export default /* @ngInject */ function IpMainCtrl(
   $scope,
   $timeout,
   $translate,
+  atInternet,
   Alerter,
   coreConfig,
   currentUser,
@@ -118,6 +119,14 @@ export default /* @ngInject */ function IpMainCtrl(
     goToDashboard();
   };
 
+  $scope.goToFailoverWithTracking = (params) => {
+    atInternet.trackClick({
+      name: `DedicatedServers::network::ip::banner::link::see_unused_ips`,
+      type: 'action',
+    });
+    goToFailover(params);
+  };
+
   $scope.onFailoverTabClick = function onFailoverTabClick() {
     if (!isFailoverActive()) {
       trackClick(DASHBOARD_TRACKING_PREFIX.DEFAULT, FAILOVER_TRACKING_HIT.TAB);

diff --git a/packages/manager/apps/dedicated/client/app/ip/ip.html b/packages/manager/apps/dedicated/client/app/ip/ip.html
@@ -79,7 +79,7 @@ <h1 class="oui-header__title">
                 <button
                     class="btn btn-link"
                     type="button"
-                    data-ng-click="goToFailover({ unused: '1' })"
+                    data-ng-click="goToFailoverWithTracking({ unused: '1' })"
                     data-ng-if="!isFailoverActive({ unused: '1' })"
                 >
                     <span data-translate="ip_unused_banner_link"></span>