feat(dedicated): my services add tracking (#14612)

ref: MANAGER-16208 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Dec 18, 2024 · 981251c · 981251c
1 parent 402ba5c
commit 981251c
Show file tree

Hide file tree

Showing 25 changed files with 197 additions and 24 deletions.
diff --git a/...dedicated/client/app/dedicated/dedicated-server/clusters/cluster/dashboard/dashboard.html b/...dedicated/client/app/dedicated/dedicated-server/clusters/cluster/dashboard/dashboard.html
@@ -16,7 +16,9 @@
                 data-on-error="$ctrl.onBillingInformationError(error)"
                 data-service-infos="$ctrl.serviceInfos"
                 data-user="$ctrl.user"
-                data-tracking-prefix="{{$ctrl.trackingPrefix}}"
+                data-tracking-page="DedicatedServers::dedicated-server::cluster::cluster::dashboard::general-information"
+                data-tracking-name-suffix="cluster"
+                tracking-prefix="DedicatedServers::dedicated-server::cluster"
             >
             </billing-subscription-tile>
         </div>

diff --git a/.../client/app/dedicated/dedicated-server/clusters/nodes/node/dashboard/dashboard.routing.js b/.../client/app/dedicated/dedicated-server/clusters/nodes/node/dashboard/dashboard.routing.js
@@ -282,6 +282,11 @@ export default /* @ngInject */ ($stateProvider) => {
           productId: serverName,
         }),
       trackingPrefix: () => 'dedicated::node::dashboard',
+      trackingSubscriptionPrefix: () =>
+        'DedicatedServers::dedicated-server::server',
+      trackingPage: () =>
+        'DedicatedServers::dedicated-server::server::server::dashboard::general-information',
+      trackingNameSuffix: () => 'server',
       trafficInformation: /* @ngInject */ (
         $q,
         $stateParams,

diff --git a/...cated/client/app/dedicated/dedicated-server/servers/server/dashboard/dashboard.routing.js b/...cated/client/app/dedicated/dedicated-server/servers/server/dashboard/dashboard.routing.js
@@ -258,6 +258,11 @@ export default /* @ngInject */ ($stateProvider) => {
           productId: serverName,
         }),
       trackingPrefix: () => 'dedicated::server::dashboard',
+      trackingSubscriptionPrefix: () =>
+        'DedicatedServers::dedicated-server::node',
+      trackingPage: () =>
+        'DedicatedServers::dedicated-server::node::node::dashboard::general-information',
+      trackingNameSuffix: () => 'node',
       trafficInformation: /* @ngInject */ (
         $q,
         $stateParams,

diff --git a/...ager/modules/billing-components/src/components/payment-method/payment-method.component.js b/...ager/modules/billing-components/src/components/payment-method/payment-method.component.js
@@ -2,7 +2,10 @@ import controller from './payment-method.controller';
 import template from './payment-method.html';
 
 export default {
-  bindings: {},
+  bindings: {
+    trackingPage: '<',
+    trackingCategory: '<',
+  },
   controller,
   name: 'ovhManagerAutoRenewPaymentMethod',
   template,

diff --git a/...ger/modules/billing-components/src/components/payment-method/payment-method.controller.js b/...ger/modules/billing-components/src/components/payment-method/payment-method.controller.js
@@ -1,9 +1,10 @@
 export default class PaymentMethodController {
   /* @ngInject */
-  constructor($http, coreURLBuilder, $filter) {
+  constructor($http, coreURLBuilder, $filter, atInternet) {
     this.$http = $http;
     this.coreURLBuilder = coreURLBuilder;
     this.$filter = $filter;
+    this.atInternet = atInternet;
   }
 
   $onInit() {
@@ -35,4 +36,17 @@ export default class PaymentMethodController {
       '#/billing/payment/method',
     );
   }
+
+  trackPaymentClick() {
+    this.atInternet.trackClick({
+      name: `hub::billing::services::listing::tile::link::${
+        this.paymentMehtod ? 'edit' : 'activate'
+      }_services::autorenew`,
+      type: 'action',
+      page_category: this.trackingCategory,
+      page: {
+        name: this.trackingPage,
+      },
+    });
+  }
 }
diff --git a/...ages/manager/modules/billing-components/src/components/payment-method/payment-method.html b/...ages/manager/modules/billing-components/src/components/payment-method/payment-method.html
@@ -38,7 +38,11 @@ <h6 class="oui-box__heading p-0 m-0">
     <div class="d-flex align-items-center" ng-if="!$ctrl.paymentMehtod">
         <p>{{ 'payment_expiration_no_default_method_message' | translate}}</p>
     </div>
-    <a class="oui-link_icon" data-ng-href="{{$ctrl.updatePaymentMethodLink}}">
+    <a
+        class="oui-link_icon"
+        data-ng-href="{{$ctrl.updatePaymentMethodLink}}"
+        data-ng-click="$ctrl.trackPaymentClick()"
+    >
         {{ !$ctrl.paymentMehtod ? 'payment_method_add_link_label':
         'payment_method_update_link_label' | translate}}
         <span class="oui-icon oui-icon-arrow-right" aria-hidden="true"></span>

diff --git a/.../modules/billing-components/src/components/services-actions/services-actions.component.js b/.../modules/billing-components/src/components/services-actions/services-actions.component.js
@@ -6,6 +6,7 @@ export default {
     billingManagementAvailability: '<',
     service: '<',
     trackingPrefix: '@?',
+    trackingPage: '@?',
     getCommitmentLink: '&?',
     getCancelCommitmentLink: '&?',
     getCancelResiliationLink: '&?',

diff --git a/...modules/billing-components/src/components/services-actions/services-actions.controller.js b/...modules/billing-components/src/components/services-actions/services-actions.controller.js
@@ -26,7 +26,6 @@ export default class ServicesActionsCtrl {
   }
 
   $onInit() {
-
     this.user = this.coreConfig.getUser();
     this.BillingLinksService.generateAutorenewLinks(this.service, {
       billingManagementAvailability: this.billingManagementAvailability,
@@ -77,7 +76,17 @@ export default class ServicesActionsCtrl {
   }
 
   trackAction(action, hasActionInEvent = true) {
-    if (this.trackingPrefix) {
+    if (this.trackingPrefix && this.trackingPage) {
+      const name = `${this.trackingPrefix}::button::${action}::service`;
+      this.atInternet.trackClick({
+        name,
+        type: 'action',
+        page_category: 'listing',
+        page: {
+          name: this.trackingPage,
+        },
+      });
+    } else if (this.trackingPrefix) {
       const name = hasActionInEvent
         ? `${this.trackingPrefix}::action::${action}`
         : `${this.trackingPrefix}::${action}`;

diff --git a/...odules/billing-components/src/components/subscription-tile/subscription-tile.component.js b/...odules/billing-components/src/components/subscription-tile/subscription-tile.component.js
@@ -13,6 +13,8 @@ export default {
     goToCancelResiliation: '&',
     goToResiliation: '&',
     trackingPrefix: '@',
+    trackingPage: '@',
+    trackingNameSuffix: '@',
     commitImpressionData: '<?',
     withContactManagement: '<?',
     disableServiceActions: '<?',

diff --git a/...dules/billing-components/src/components/subscription-tile/subscription-tile.controller.js b/...dules/billing-components/src/components/subscription-tile/subscription-tile.controller.js
@@ -189,12 +189,19 @@ export default class ServicesActionsCtrl {
   }
 
   trackAction(action, hasActionInEvent = true) {
-    if (this.trackingPrefix) {
+    if (this.trackingPrefix && this.trackingPage && this.trackingNameSuffix) {
       const name = hasActionInEvent
-        ? `${this.trackingPrefix}::action::${action}`
-        : `${this.trackingPrefix}::${action}`;
+        ? `${this.trackingPrefix}::tile::link::${action}_${this.trackingNameSuffix}`
+        : `${this.trackingPrefix}::${action}_${this.trackingNameSuffix}`;
 
-      this.atInternet.trackClick({ name, type: 'action' });
+      this.atInternet.trackClick({
+        name,
+        type: 'action',
+        page_category: 'dashboard',
+        page: {
+          name: this.trackingPage,
+        },
+      });
     }
   }
 

diff --git a/...anager/modules/billing-components/src/components/subscription-tile/subscription-tile.html b/...anager/modules/billing-components/src/components/subscription-tile/subscription-tile.html
@@ -50,7 +50,7 @@
                     data-ng-if="$ctrl.constructor.showCommit($ctrl.serviceInfos, $ctrl.service.isEngaged(), $ctrl.highlightEngagement)"
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.commitmentLink }}"
-                    data-ng-click="$ctrl.trackClick('go-to-commit')"
+                    data-ng-click="$ctrl.trackAction('renew-discount', true)"
                     target="_top"
                 >
                     <p>
@@ -127,7 +127,7 @@
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.updateLink }}"
                     data-ng-if="$ctrl.autorenewLink && !$ctrl.serviceInfos.hasParticularRenew() && !$ctrl.serviceInfos.hasPendingResiliation() && !$ctrl.serviceInfos.hasDebt() && !$ctrl.serviceInfos.isOneShot() && !$ctrl.serviceInfos.hasForcedRenew() && !$ctrl.serviceInfos.isResiliated() && $ctrl.serviceInfos.canHandleRenew() && !$ctrl.serviceInfos.hasEngagement()"
-                    data-ng-click="$ctrl.trackAction('go-to-configure-renew')"
+                    data-ng-click="$ctrl.trackAction($ctrl.serviceInfos.hasAutomaticRenew() ?'edit-frequency': 'renew', !$ctrl.serviceInfos.hasAutomaticRenew())"
                     target="_top"
                 >
                     <p>
@@ -160,7 +160,7 @@
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.autorenewLink && !$ctrl.service.hasBillingRights($ctrl.user.nichandle) ? $ctrl.warningLink : $ctrl.billingLink }}"
                     data-ng-if="$ctrl.serviceInfos.hasDebt()"
-                    data-on-click="$ctrl.trackAction('go-to-pay-bill')"
+                    data-ng-click="$ctrl.trackAction('go-to-pay-bill')"
                     target="_top"
                 >
                     <p>
@@ -190,7 +190,7 @@
                     class="oui-link_icon"
                     data-ng-if="$ctrl.resiliateLink && ($ctrl.serviceInfos.hasAdminRights($ctrl.user.auth.account) || $ctrl.serviceInfos.hasAdminRights($ctrl.user.nichandle))"
                     data-ng-href="{{ $ctrl.resiliateLink }}"
-                    on-click="$ctrl.trackAction('go-to-resiliate')"
+                    data-ng-click="$ctrl.trackAction('stop', true)"
                     target="_top"
                 >
                     <p>
@@ -218,7 +218,7 @@
                     class="oui-link_icon"
                     data-ng-if="$ctrl.resiliateLink && ($ctrl.serviceInfos.hasAdminRights($ctrl.user.auth.account) || $ctrl.serviceInfos.hasAdminRights($ctrl.user.nichandle))"
                     data-ng-href="{{ $ctrl.resiliateLink }}"
-                    on-click="$ctrl.trackAction('go-to-resiliate')"
+                    data-ng-click="$ctrl.trackAction('stop', true)"
                     target="_top"
                 >
                     <p>

diff --git a/packages/manager/modules/billing/src/autoRenew/agreements/user-agreements.routes.js b/packages/manager/modules/billing/src/autoRenew/agreements/user-agreements.routes.js
@@ -1,5 +1,9 @@
 import controller from './user-agreements.controller';
 import template from './user-agreements.html';
+import {
+  TRACKING_AGREEMENTS_PAGE_NAME,
+  TRACKING_PAGE_CATEGORY,
+} from '../autorenew.constants';
 
 export default /* @ngInject */ (
   $stateProvider,
@@ -19,6 +23,15 @@ export default /* @ngInject */ (
             (currentUser) =>
               currentUser.isTrusted && 'app.account.billing.autorenew',
           ),
+      atInternet: {
+        ignore: true,
+      },
+      onEnter: /* @ngInject */ (atInternet) => {
+        atInternet.trackPage({
+          name: TRACKING_AGREEMENTS_PAGE_NAME,
+          page_category: TRACKING_PAGE_CATEGORY,
+        });
+      },
       resolve: {
         gotoAcceptAllAgreements: /* @ngInject */ ($state, atInternet) => (
           agreements,

diff --git a/packages/manager/modules/billing/src/autoRenew/autorenew.constants.js b/packages/manager/modules/billing/src/autoRenew/autorenew.constants.js
@@ -75,6 +75,22 @@ export const SERVICE_STATUS = {
 
 export const URL_PARAMETER_SEPARATOR = '%20';
 
+const TRACKING_CHAPTER_1 = 'Hub';
+const TRACKING_CHAPTER_2 = 'billing';
+const TRACKING_CHAPTER_3 = 'services';
+
+const TRACKING_PAGE_SUFFIX = 'services::listing::autorenew';
+export const TRACKING_PAGE_CATEGORY = 'listing';
+export const TRACKING_PAGE = `${TRACKING_CHAPTER_1}::${TRACKING_CHAPTER_2}::${TRACKING_CHAPTER_3}::${TRACKING_PAGE_SUFFIX}`;
+export const TRACKING_FILTER_NAME_PREFIX =
+  'Hub::billing::services::listing::button::filter_services';
+
+export const TRACKING_AUTORENEW_PAGE_NAME = `Hub::billing::services::services::listing::autorenew`;
+export const TRACKING_SSH_PAGE_NAME = `${TRACKING_AUTORENEW_PAGE_NAME}::ssh`;
+export const TRACKING_AGREEMENTS_PAGE_NAME = `${TRACKING_AUTORENEW_PAGE_NAME}::agreements`;
+
+export const TRACKING_ACTIONS_PREFIX = `${TRACKING_CHAPTER_1}::${TRACKING_CHAPTER_2}::${TRACKING_CHAPTER_3}::${TRACKING_PAGE_CATEGORY}`;
+
 export default {
   AUTORENEW_EVENT,
   CONTRACTS_IDS,

diff --git a/packages/manager/modules/billing/src/autoRenew/autorenew.controller.js b/packages/manager/modules/billing/src/autoRenew/autorenew.controller.js
@@ -10,6 +10,10 @@ import {
   COLUMNS_CONFIG,
   NIC_ALL,
   URL_PARAMETER_SEPARATOR,
+  TRACKING_FILTER_NAME_PREFIX,
+  TRACKING_PAGE_CATEGORY,
+  TRACKING_PAGE,
+  TRACKING_ACTIONS_PREFIX,
 } from './autorenew.constants';
 
 export default class AutorenewCtrl {
@@ -35,6 +39,10 @@ export default class AutorenewCtrl {
   }
 
   $onInit() {
+    this.trackingPage = TRACKING_PAGE;
+    this.trackingCategory = TRACKING_PAGE_CATEGORY;
+    this.trackingActionsPrefix = TRACKING_ACTIONS_PREFIX;
+
     this.ALIGNMENT_URL = this.coreConfig.isRegion('EU')
       ? ALIGNMENT_URLS[this.currentUser.ovhSubsidiary] || ALIGNMENT_URLS.FR
       : null;
@@ -86,6 +94,7 @@ export default class AutorenewCtrl {
       this.hideHeaderGuide =
         Object.keys(this.guides.url.my_services).length === 0;
     }
+    this.currentCriteria = JSON.parse(JSON.stringify(this.criteria));
   }
 
   descriptionOfHeading() {
@@ -198,6 +207,13 @@ export default class AutorenewCtrl {
   }
 
   onCriteriaChange($criteria) {
+    const newCriteria = $criteria.find(
+      (f) =>
+        !this.currentCriteria.some(
+          (s) => s.property === f.property && s.value === f.value,
+        ),
+    );
+
     const selectedType = find($criteria, { property: 'serviceType' });
     const searchText = find($criteria, { property: null });
     const filters = reduce(
@@ -215,6 +231,17 @@ export default class AutorenewCtrl {
       {},
     );
 
+    if (newCriteria) {
+      this.atInternet.trackClick({
+        name: `${TRACKING_FILTER_NAME_PREFIX}::go-to-${newCriteria.property?.toLowerCase()}-${newCriteria.value?.toLowerCase()}::service`,
+        type: 'action',
+        page_category: TRACKING_PAGE_CATEGORY,
+        page: {
+          name: TRACKING_PAGE,
+        },
+      });
+    }
+
     this.onListParamChanges({
       filters: JSON.stringify(filters),
       selectedType: get(selectedType, 'value'),

diff --git a/packages/manager/modules/billing/src/autoRenew/autorenew.html b/packages/manager/modules/billing/src/autoRenew/autorenew.html
@@ -76,7 +76,11 @@
     </oui-message>
 
     <div class="autorenew-box-container">
-        <ovh-manager-auto-renew-payment-method></ovh-manager-auto-renew-payment-method>
+        <ovh-manager-auto-renew-payment-method
+            tracking-page="$ctrl.trackingPage"
+            tracking-category="$ctrl.trackingCategory"
+        >
+        </ovh-manager-auto-renew-payment-method>
         <ovh-manager-auto-renew-tips></ovh-manager-auto-renew-tips>
     </div>
 
@@ -236,6 +240,8 @@
         >
             <billing-services-actions
                 service="$row"
+                tracking-prefix="{{ $ctrl.trackingActionsPrefix }}"
+                tracking-page="{{ $ctrl.trackingPage }}"
                 user="$ctrl.currentUser"
                 billing-management-availability="$ctrl.isAutorenewManagementAvailable"
             >

diff --git a/packages/manager/modules/billing/src/autoRenew/autorenew.routing.js b/packages/manager/modules/billing/src/autoRenew/autorenew.routing.js
@@ -5,7 +5,11 @@ import range from 'lodash/range';
 
 import { BillingService } from '@ovh-ux/manager-models';
 
-import { NIC_ALL } from './autorenew.constants';
+import {
+  NIC_ALL,
+  TRACKING_AUTORENEW_PAGE_NAME,
+  TRACKING_PAGE_CATEGORY,
+} from './autorenew.constants';
 
 export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
   $stateProvider.state('app.account.billing.autorenewRedirection', {
@@ -243,6 +247,15 @@ export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
           }
         : {},
     ),
+    atInternet: {
+      ignore: true,
+    },
+    onEnter: /* @ngInject */ (atInternet) => {
+      atInternet.trackPage({
+        name: TRACKING_AUTORENEW_PAGE_NAME,
+        page_category: TRACKING_PAGE_CATEGORY,
+      });
+    },
     redirectTo: (transition) =>
       transition
         .injector()

diff --git a/packages/manager/modules/billing/src/autoRenew/ssh/ssh.routing.js b/packages/manager/modules/billing/src/autoRenew/ssh/ssh.routing.js
@@ -1,12 +1,25 @@
 import controller from './user-ssh.controller';
 import template from './user-ssh.html';
+import {
+  TRACKING_SSH_PAGE_NAME,
+  TRACKING_PAGE_CATEGORY,
+} from '../autorenew.constants';
 
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.account.billing.autorenew.ssh', {
     url: '/ssh',
     template,
     controller,
     controllerAs: 'ctrlSsh',
+    atInternet: {
+      ignore: true,
+    },
+    onEnter: /* @ngInject */ (atInternet) => {
+      atInternet.trackPage({
+        name: TRACKING_SSH_PAGE_NAME,
+        page_category: TRACKING_PAGE_CATEGORY,
+      });
+    },
     resolve: {
       breadcrumb: /* @ngInject */ ($translate) =>
         $translate.instant('user_ssh_title'),