feat(dedicated): implement new traking nomenclature

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

Hide file tree

Showing 10 changed files with 91 additions and 51 deletions.
diff --git a/...s/manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.constant.js b/...s/manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.constant.js
@@ -1,5 +1,5 @@
-export const TRACKING_PREFIX = 'dedicated::ip::dashboard::order::';
-
+export const TRACKING_PREFIX = 'DedicatedServers::network::ip::';
+export const FUNNEL_TRACKING_PREFIX = `${TRACKING_PREFIX}funnel::`;
 export const IP_TYPE = {
   IPv4: 'ipv4',
   IPv6: 'ipv6',
@@ -22,6 +22,7 @@ export const IP_FAILOVER_PLANCODE = {
 export default {
   ADDITIONAL_IP,
   TRACKING_PREFIX,
+  FUNNEL_TRACKING_PREFIX,
   IP_FAILOVER_PLANCODE,
   IP_TYPE_TITLE,
   DASHBOARD_STATE_NAME,

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
@@ -1,6 +1,6 @@
 import {
   ADDITIONAL_IP,
-  TRACKING_PREFIX,
+  FUNNEL_TRACKING_PREFIX,
   DASHBOARD_STATE_NAME,
   ALERT_ID,
   IP_TYPE,
@@ -62,7 +62,7 @@ export default class AgoraIpOrderCtrl {
 
   resumeOrder() {
     this.atInternet.trackClick({
-      name: `${TRACKING_PREFIX}cancel`,
+      name: `${FUNNEL_TRACKING_PREFIX}link::back_previous_page`,
       type: 'action',
     });
     return this.$state.go(DASHBOARD_STATE_NAME);

diff --git a/...ges/manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.routes.js b/...ges/manager/apps/dedicated/client/app/components/ip/agoraOrder/ip-ip-agoraOrder.routes.js
@@ -1,5 +1,6 @@
 import template from './ip-ip-agoraOrder.html';
 import controller from './ip-ip-agoraOrder.controller';
+import { TRACKING_PREFIX } from './ip-ip-agoraOrder.constant';
 
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.ip.agora-order', {
@@ -26,7 +27,7 @@ export default /* @ngInject */ ($stateProvider) => {
         IpAgoraOrder.getIpCatalog(coreConfig.getUser().ovhSubsidiary),
     },
     atInternet: {
-      rename: 'dedicated::ip::dashboard::order',
+      rename: `${TRACKING_PREFIX}ip::funnel::add_additional_ip`,
     },
   });
 };
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
@@ -13,13 +13,14 @@ import uniq from 'lodash/uniq';
 import {
   DASHBOARD_STATE_NAME,
   IP_TYPE_TITLE,
+  TRACKING_PREFIX,
+  FUNNEL_TRACKING_PREFIX,
 } from '../ip-ip-agoraOrder.constant';
 
 import {
   IP_LOCATION_GROUPS,
   IP_SERVICETYPE__PARK,
   PRODUCT_TYPES,
-  TRACKING_PREFIX,
   VPS_MAX_QUANTITY,
   IP_AGORA,
   ADDITIONAL_IP,
@@ -92,6 +93,13 @@ export default class AgoraIpV4OrderController {
     );
   }
 
+  onEditStep(step) {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::edit_step_select_${step}`,
+      type: 'action',
+    });
+  }
+
   static isIpv6Plan(planCode) {
     return planCode.match(/^ip-v6.*/) != null;
   }
@@ -206,6 +214,7 @@ export default class AgoraIpV4OrderController {
   }
 
   getServiceRegion() {
+    this.trackClick(`select_service::next_${this.model.selectedService}`);
     this.loadServiceRegion = true;
     this.model.selectedServiceRegion = null;
     let request = null;
@@ -242,6 +251,20 @@ 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`,
+      type: 'action',
+    });
+  }
+
   static getRegionsOffers(countries) {
     return flattenDeep(
       IP_LOCATION_GROUPS.filter(
@@ -310,10 +333,6 @@ export default class AgoraIpV4OrderController {
     );
   }
 
-  trackFinalStep() {
-    this.trackStep(3);
-  }
-
   /* To be replaced once we have region list coming from API for the Vrack, as of now consider IPV6 regions */
   getIpv6RegionsWithPlan(IpOffers) {
     this.IP_REGION = 'ip_region';
@@ -417,7 +436,10 @@ export default class AgoraIpV4OrderController {
   }
 
   manageLoadIpOffers() {
-    this.trackStep(2);
+    if (this.model.selectedRegion) {
+      this.trackClick(`select_region::next`);
+    }
+
     this.loading.ipOffers = true;
     this.ipOffers = [];
     this.failoverIpOffers = [];
@@ -616,6 +638,7 @@ export default class AgoraIpV4OrderController {
   }
 
   onSelectedOfferChange(selectedOffer) {
+    this.trackClick(`select_solution::next_${this.model.params.selectedOffer}`);
     this.maxSize = IP_AGORA[selectedOffer].maxQty;
     this.minSize = IP_AGORA[selectedOffer].minQty;
     this.model.params.selectedQuantity = this.minSize;
@@ -654,10 +677,7 @@ export default class AgoraIpV4OrderController {
   }
 
   redirectToPaymentPage() {
-    const { params, selectedService } = this.model;
-    const serviceType = selectedService.type;
-    const offerPlanCode = params.selectedOffer.planCode;
-    const quantity = params.selectedQuantity || 1;
+    const { params } = this.model;
     const countryCode = params.selectedCountry?.code || null;
     const orderableIpCountry =
       countryCode || get(this.orderableIpCountries, '[0]', '');
@@ -668,10 +688,9 @@ 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: `${TRACKING_PREFIX}confirm_${serviceType}_${offerPlanCode}_${quantity}${
-        countryCode ? `_${countryCode}` : ''
-      }`,
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv4_${setup}`,
       type: 'action',
     });
 
@@ -722,6 +741,10 @@ export default class AgoraIpV4OrderController {
         );
       })
       .catch((err) => {
+        this.atInternet.trackClick({
+          name: `${TRACKING_PREFIX}ip::banner-error::add_additional_ip_error::${err}`,
+          type: 'display',
+        });
         this.Alerter.error(
           this.$translate.instant('ip_order_finish_error'),
           this.ALERT_ID,
@@ -785,25 +808,20 @@ export default class AgoraIpV4OrderController {
     return v1.value.localeCompare(v2.value);
   }
 
-  trackPrevious() {
+  trackClick(name) {
     this.atInternet.trackClick({
-      name: `${TRACKING_PREFIX}previous`,
-      type: 'action',
-    });
-  }
-
-  trackStep(count) {
-    this.atInternet.trackClick({
-      name: `${TRACKING_PREFIX}next-step-${count}`,
+      name: `${FUNNEL_TRACKING_PREFIX}select::add_additional_ip::${name}`,
       type: 'action',
     });
   }
 
   resumeOrder() {
+    const setup = `${this.model.selectedService}_${this.model.selectedRegion}_${this.model.selectedOffer}`;
     this.atInternet.trackClick({
-      name: `${TRACKING_PREFIX}cancel`,
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::cancel::ipv4_${setup}`,
       type: 'action',
     });
+
     return this.$state.go(DASHBOARD_STATE_NAME);
   }
 }
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
@@ -12,7 +12,7 @@
             data-valid="$ctrl.model.selectedService"
             data-editable="!$ctrl.isLoading"
             data-navigation="$ctrl.model.selectedService"
-            data-on-focus="$ctrl.onFlavorFocus()"
+            data-on-focus="$ctrl.model.selectedService && $ctrl.onEditStep('service')"
             data-on-submit="$ctrl.onIpServiceSelection()"
         >
             <div data-ng-show="$ctrl.loading.services" class="text-center">
@@ -69,7 +69,7 @@
             data-valid="$ctrl.model.selectedRegion"
             data-editable="!$ctrl.isLoading"
             data-navigation="$ctrl.model.selectedRegion"
-            data-on-focus="$ctrl.onFlavorFocus()"
+            data-on-focus="$ctrl.model.selectedRegion && $ctrl.onEditStep('location')"
             data-on-submit="$ctrl.manageLoadIpOffers()"
         >
             <div data-ng-show="$ctrl.loading.region" class="text-center">
@@ -85,6 +85,7 @@
                     data-variant="light"
                     data-picture="{{ ::region.icon }}"
                     data-model="$ctrl.model.selectedRegion"
+                    data-ng-click="trackParkingLocation()"
                     data-values="[region]"
                 >
                 </oui-select-picker>
@@ -99,6 +100,7 @@
             data-header="{{:: 'ip_agora_table_header_offer' | translate }}"
             data-navigation="$ctrl.model.params.selectedOffer"
             data-editable="!$ctrl.isLoading"
+            data-on-focus="$ctrl.model.params.selectedOffer && $ctrl.onEditStep('solution')"
             data-valid="$ctrl.model.params.selectedOffer"
         >
             <div data-ng-show="$ctrl.loading.ipOffers" class="text-center">
@@ -233,6 +235,7 @@ <h4 class="text-center">
             data-header="{{:: 'ip_agora_ipv4_localisation_title' | translate }}"
             data-navigation="$ctrl.model.params.selectedCountry"
             data-editable="!$ctrl.isLoading"
+            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 }}"
         >
@@ -322,10 +325,11 @@ <h4 class="text-center">
                 </select>
                 <a
                     class="oui-link mb-4"
+                    data-ng-click="$ctrl.trackOrganisationLink($event)"
                     data-ui-sref="app.ip.organisation"
                     data-translate="ip_order_no_organisation_2"
                 ></a>
             </div>
         </oui-step-form>
     </oui-stepper>
-</div>
+</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,3 +1,5 @@
+import { FUNNEL_TRACKING_PREFIX } from '../ip-ip-agoraOrder.constant';
+
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.ip.agora-order.ipv4', {
     url: '/ipv4',
@@ -15,7 +17,7 @@ export default /* @ngInject */ ($stateProvider) => {
       breadcrumb: /* @ngInject */ () => false,
     },
     atInternet: {
-      rename: 'dedicated::ip::dashboard::order::ipv4',
+      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.constant.js b/packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.constant.js
@@ -40,12 +40,9 @@ export const FLAGS = {
 
 export const EMPTY_CHOICE = '-';
 
-export const DEDICATED_IP_ORDER_TRACKING_PREFIX =
-  'dedicated::ip::dashboard::order';
 export const ACTIONS_SUFFIX = 'action';
 
 export default {
-  DEDICATED_IP_ORDER_TRACKING_PREFIX,
   ACTIONS_SUFFIX,
   PRODUCT_TYPES,
   TRACKING_PREFIX,

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
@@ -5,13 +5,10 @@ import {
   DASHBOARD_STATE_NAME,
   ADDITIONAL_IP,
   IP_TYPE_TITLE,
+  TRACKING_PREFIX,
+  FUNNEL_TRACKING_PREFIX,
 } from '../ip-ip-agoraOrder.constant';
-import {
-  FLAGS,
-  EMPTY_CHOICE,
-  DEDICATED_IP_ORDER_TRACKING_PREFIX,
-  ACTIONS_SUFFIX,
-} from './ipv6.constant';
+import { FLAGS, EMPTY_CHOICE, ACTIONS_SUFFIX } from './ipv6.constant';
 
 export default class AgoraIpV6OrderController {
   /* @ngInject */
@@ -75,6 +72,13 @@ export default class AgoraIpV6OrderController {
     });
   }
 
+  onEditStep(step) {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}tile::add_additional_ip::edit_step_select_${step}`,
+      type: ACTIONS_SUFFIX,
+    });
+  }
+
   getIpv6OrderableNumber() {
     return (
       Array.from(
@@ -84,7 +88,8 @@ export default class AgoraIpV6OrderController {
   }
 
   loadServices() {
-    this.trackClick('ipv6-additonal-option');
+    this.model.option = true;
+    this.trackClick('select_option::next_free');
     this.loading.services = true;
     return this.$q
       .all({
@@ -137,7 +142,7 @@ export default class AgoraIpV6OrderController {
   }
 
   loadRegions() {
-    this.trackClick('next-step-2');
+    this.trackClick(`select_service::next_${this.model.selectedService}`);
 
     this.catalogByLocation = this.ipv6RegionsWithPlan.map(
       ({ regionId, plan }) => {
@@ -204,8 +209,8 @@ export default class AgoraIpV6OrderController {
     }
 
     this.atInternet.trackClick({
-      name: `order::confirm_ipv6${trakingService}_${regionId}`,
-      type: ACTIONS_SUFFIX,
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::confirm::ipv6_${trakingService}__free`,
+      type: 'action',
     });
 
     return this.User.getUrlOf('express_order')
@@ -216,7 +221,12 @@ export default class AgoraIpV6OrderController {
         );
         this.goToDashboard();
       })
-      .catch(() => {
+      .catch((error) => {
+        this.atInternet.trackClick({
+          name: `${TRACKING_PREFIX}ip::banner-error::add_additional_ip_error::${error}`,
+          type: 'display',
+        });
+
         this.Alerter.error(
           this.$translate.instant('ip_order_finish_error'),
           this.ALERT_ID,
@@ -234,14 +244,17 @@ export default class AgoraIpV6OrderController {
   }
 
   goToDashboard() {
+    this.atInternet.trackClick({
+      name: `${FUNNEL_TRACKING_PREFIX}button::add_additional_ip::cancel::ipv6_${this.model.selectedService}__free`,
+      type: 'action',
+    });
+
     return this.$state.go(DASHBOARD_STATE_NAME);
   }
 
-  trackClick(hit) {
+  trackClick(name) {
     this.atInternet.trackClick({
-      name: hit
-        ? `${DEDICATED_IP_ORDER_TRACKING_PREFIX}::${hit}`
-        : DEDICATED_IP_ORDER_TRACKING_PREFIX,
+      name: `${FUNNEL_TRACKING_PREFIX}select::add_additional_ip::${name}`,
       type: ACTIONS_SUFFIX,
     });
   }