feat(tracking): add tracking page in generator

ref: MANAGER-13929

Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>

packages/components/ovh-at-internet/src/constants.ts

@@ -13,6 +13,40 @@ export const AT_INTERNET_LEVEL2: Record<string, string> = {
   98: 'Manager-HostedPrivateCloud',
 };
 
+const UNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'BareMetalCloud',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];
+
+const SUBUNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'BareMetalCloud',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];
+
 export const AT_INTERNET_WEBSITE: Record<string, string> = {
   ASIA: 'Asia',
   AU: 'Australia',
@@ -62,6 +96,8 @@ export const PCI_PROJECT_MODE_VALUES: Record<string, string> = {
 };
 
 export default {
+  UNIVERSES,
+  SUBUNIVERSES,
   AT_INTERNET_CUSTOM_PROPS,
   AT_INTERNET_LEVEL2,
   AT_INTERNET_WEBSITE,

packages/components/ovh-at-internet/src/ovh-at-internet.ts

@@ -1,4 +1,4 @@
-import { capitalize, isString, mapValues } from 'lodash-es';
+import { capitalize, isString, mapValues, trimEnd } from 'lodash-es';
 import { OvhAtInternetConfig } from './config';
 import {
   IOvhAtInternetTrack,
@@ -16,6 +16,7 @@ import { loadManagerTMS } from './manager-tms';
 import { debug } from './utils';
 
 import initMixCommander from './mix-commander';
+import { toBeRequired } from '@testing-library/jest-dom/matchers';
 
 function getPageTrackingData(
   page: LegacyTrackingData,
@@ -107,6 +108,7 @@ export default class OvhAtInternet extends OvhAtInternetConfig {
   }
 
   canTrack(): boolean {
+    return true;
     return this.isDefaultSet() && this.enabled && this.tag;
   }
 
@@ -124,6 +126,7 @@ export default class OvhAtInternet extends OvhAtInternetConfig {
   }
 
   shouldUsePianoAnalytics() {
+    return true;
     if (isTrackingDebug()) {
       return true;
     }

packages/manager/core/generator/app/index.js

@@ -8,6 +8,7 @@ import {
   createTranslations,
   createApiQueryFilesActions,
 } from '../utils/create-structure-helpers.js';
+import { UNIVERSES, SUBUNIVERSES } from './universes.constant.js';
 
 const appDirectory = dirname(fileURLToPath(import.meta.url));
 
@@ -64,6 +65,24 @@ export default (plop) => {
   plop.setGenerator('app', {
     description: 'Create a React app',
     prompts: [
+      {
+        type: 'list',
+        name: 'universe',
+        message: 'What is the universe of the app ?',
+        choices: UNIVERSES.map((element) => ({
+          name: element,
+          value: element,
+        })),
+      },
+      {
+        type: 'list',
+        name: 'subuniverse',
+        message: 'What is the subuniverse of the app ?',
+        choices: SUBUNIVERSES.map((element) => ({
+          name: element,
+          value: element,
+        })),
+      },
       {
         type: 'input',
         name: 'appName',
@@ -190,7 +209,7 @@ export default (plop) => {
       {
         type: 'input',
         name: 'serviceKey',
-        message: 'What is the service key ?',
+        message: 'What is the service key in listing page ?',
         when: (data) => {
           // Add variables for templates
           data.hasListing = data.templates.includes('listing');

packages/manager/core/generator/app/templates/src/hooks/useCustomTracking.tsx

@@ -0,0 +1,86 @@
+import React, { useContext } from 'react';
+import { useMatches } from 'react-router-dom';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+
+import { PAGE_PREFIX, UNIVERSE, LEVEL2 } from '@/tracking.constant';
+
+export enum PageType {
+  onboarding = 'onboarding',
+  listing = 'listing',
+  dashboard = 'dashboard',
+  popup = 'pop-up',
+  bannerSuccess = 'banner-success',
+  bannerError = 'banner-error',
+  bannerInfo = 'banner-info',
+  bannerWarning = 'banner-warning',
+  funnel = 'funnel',
+}
+
+export enum PageLocation {
+  page = 'page',
+  funnel = 'funnel',
+  banner = 'banner',
+  popup = 'pop-up',
+  datagrid = 'datagrid',
+  tile = 'tile',
+}
+
+export enum ButtonType {
+  button = 'button',
+  link = 'link',
+  select = 'select',
+  externalLink = 'external-link',
+  tile = 'tile',
+  tutorial = 'tile-tutorial',
+  tab = 'go-to-tab',
+}
+
+export type TrackingClickParams = {
+  location?: PageLocation;
+  buttonType?: ButtonType;
+  actions?: string;
+  actionType?: 'action' | 'navigation' | 'download' | 'exit';
+};
+
+export const usePageTracking = () => {
+  const matches = useMatches();
+  const { handle } = matches[matches.length - 1];
+  return (handle as any)?.tracking as TrackingPageParams;
+};
+
+export type TrackingPageParams = {
+  pageType?: PageType;
+  pageName?: string;
+};
+
+export const useOvhCustomTracking = () => {
+  const match: any = useMatches().slice(-1)[0];
+  const { shell } = useContext(ShellContext);
+
+  const defaultParams = {
+    page_category: match.handle?.OvhTracking.type,
+    level2: LEVEL2,
+    site_level2: LEVEL2,
+    page_theme: UNIVERSE,
+  };
+
+  return {
+    trackPage: (params: TrackingPageParams = {}) => {
+      shell.tracking.trackPage({
+        ...params,
+        ...defaultParams,
+        name: `${PAGE_PREFIX}::${match?.id}`,
+      });
+    },
+    trackClick: (params: TrackingClickParams = {}) => {
+      const { location, buttonType, actions, actionType } = params;
+      shell.tracking.trackClick({
+        ...defaultParams,
+        name: [PAGE_PREFIX, location, buttonType, actions].join('::'),
+        type: actionType,
+        page: [PAGE_PREFIX, match?.id].join('::'),
+        chapter1: UNIVERSE,
+      });
+    },
+  };
+};

packages/manager/core/generator/app/templates/src/pages/layout.tsx.hbs

@@ -4,17 +4,36 @@ import { Outlet, useLocation, useMatches } from 'react-router-dom';
 import { useRouting } from '@ovh-ux/manager-react-shell-client';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 
+import {
+  useOvhCustomTracking,
+  ButtonType,
+  PageLocation,
+} from '@/hooks/useCustomTracking';
+
 export default function Layout() {
   const location = useLocation();
   const routing = useRouting();
   const { shell } = useContext(ShellContext);
   const matches = useMatches();
+  const { trackClick } = useOvhCustomTracking();
 
   useEffect(() => {
     const match = matches.slice(-1);
     defineCurrentPage(`app.{{appName}}-${match[0]?.id}`);
   }, [location]);
 
+  useEffect(() => {
+    trackPage();
+  }, [location]);
+
+  useEffect(() => {
+    const match = matches.slice(-1);
+    trackPage({
+      name: `${PAGE_PREFIX}::${match[0]?.id}`,
+      level2: LEVEL2,
+    });
+  }, [location]);
+
   useEffect(() => {
     shell.ux.hidePreloader();
   }, []);

packages/manager/core/generator/app/templates/src/routes.tsx.hbs

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RouteObject } from 'react-router-dom';
 import NotFound from './pages/404';
+import { PageType } from './hooks/useCustomTracking';
 
 const lazyRouteConfig = (importFn: CallableFunction): Partial<RouteObject> => {
   return {
@@ -35,7 +36,7 @@ export const Routes: any = [
             ...lazyRouteConfig(() => import('@/pages/dashboard/index')),
           },
           {
-            id: 'dashboard.tab2',
+            id: 'tab2',
             path: 'Tab2',
             ...lazyRouteConfig(() => import('@/pages/dashboard/Tab2')),
           },
@@ -63,6 +64,12 @@ export const Routes: any = [
         id: 'listing',
         path: '',
         ...lazyRouteConfig(() => import('@/pages/listing')),
+        handle: {
+          OvhTracking: {
+            name: 'listing',
+            type: PageType.listing,
+          },
+        },
       },
       {
         path: ':serviceName',
@@ -72,20 +79,38 @@ export const Routes: any = [
             id: 'dashboard',
             path: '',
             ...lazyRouteConfig(
-              () => import('@/pages/dashboard/index'))
+              () => import('@/pages/dashboard/index')),
+            handle: {
+              OvhTracking: {
+                name: 'dashboard',
+                type: PageType.dashboard,
+              },
+            },
           },
           {
             id: 'dashboard.tab2',
             path: 'Tab2',
             ...lazyRouteConfig(
-              () => import('@/pages/dashboard/Tab2'))
+              () => import('@/pages/dashboard/Tab2')),
+            handle: {
+              OvhTracking: {
+                name: 'tab2',
+                type: PageType.dashboard,
+              },
+            },
           },
         ],
       },
       {
         id: 'onboarding',
         path: 'onboarding',
         ...lazyRouteConfig(() => import('@/pages/onboarding')),
+        handle: {
+          OvhTracking: {
+            name: 'tab2',
+            type: PageType.onboarding,
+          },
+        },
       },
     ],
   },

packages/manager/core/generator/app/templates/src/tracking.constant.ts.hbs

@@ -0,0 +1,5 @@
+export const LEVEL2 = '86';
+export const UNIVERSE = '{{universe}}';
+export const SUBUNIVERSE = '{{subuniverse}}';
+export const APP_NAME = '{{appName}}'
+export const PAGE_PREFIX = [UNIVERSE, SUBUNIVERSE, APP_NAME].join('::');

packages/manager/core/generator/app/universes.constant.js

@@ -0,0 +1,32 @@
+export const UNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'BareMetalCloud',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];
+export const SUBUNIVERSES = [
+  'Dedicated',
+  'Focus',
+  'Manager',
+  'Web',
+  'Server',
+  'Hub',
+  'Creation',
+  'BareMetalCloud',
+  'HostedPrivatedCloud',
+  'PublicCloud',
+  'WebCloud',
+  'Telecom',
+  'Sunrise',
+  'Account-creation',
+];