Wizard: Update Amplitude tracking

This updates snippets used for event tracking in Amplitude, adding `imageBuilder` to the name of the event and as a `module` property.

Two more typed events were also added to track number of created blueprints. Name for both events is the same `blueprintCreated`, the differentiation between Create and Create and build images is captured in the `type` property.

These new events will allow to calculate percentage of users that were shown recommendations and of those who added a recommended package while succesfully finishing blueprint creation.

src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx

@@ -24,7 +24,7 @@ import { useDispatch } from 'react-redux';
 import PackageRecommendationDescription from './components/PackageRecommendationDescription';
 import { RedHatRepository } from './Packages';
 
-import { ContentOrigin } from '../../../../constants';
+import { AMPLITUDE_MODULE_NAME, ContentOrigin } from '../../../../constants';
 import { useListRepositoriesQuery } from '../../../../store/contentSourcesApi';
 import { useAppSelector } from '../../../../store/hooks';
 import { useRecommendPackageMutation } from '../../../../store/imageBuilderApi';
@@ -78,10 +78,14 @@ const PackageRecommendations = () => {
         });
 
         if (response && response.data && response.data.packages.length > 0) {
-          analytics.track('recommendationsShown', {
+          analytics.track(
-            shownRecommendations: response.data.packages,
+            `${AMPLITUDE_MODULE_NAME}-packageRecommendationsShown`,
-            selectedPackages: packages.map((pkg) => pkg.name),
+            {
-          });
+              module: AMPLITUDE_MODULE_NAME,
+              shownRecommendations: response.data.packages,
+              selectedPackages: packages.map((pkg) => pkg.name),
+            }
+          );
         }
       })();
     }
@@ -224,13 +228,17 @@ const PackageRecommendations = () => {
                             variant="link"
                             component="a"
                             onClick={() => {
-                              analytics.track('recommendedPackageAdded', {
+                              analytics.track(
-                                packageName: pkg,
+                                `${AMPLITUDE_MODULE_NAME}-recommendedPackageAdded`,
-                                selectedPackages: packages.map(
+                                {
-                                  (pkg) => pkg.name
+                                  module: AMPLITUDE_MODULE_NAME,
-                                ),
+                                  packageName: pkg,
-                                shownRecommendations: data.packages,
+                                  selectedPackages: packages.map(
-                              });
+                                    (pkg) => pkg.name
+                                  ),
+                                  shownRecommendations: data.packages,
+                                }
+                              );
                               addRecommendedPackage(pkg);
                             }}
                             isInline

src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx

@@ -10,7 +10,9 @@ import {
   Modal,
   Button,
 } from '@patternfly/react-core';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
+import { AMPLITUDE_MODULE_NAME } from '../../../../../constants';
 import { setBlueprintId } from '../../../../../store/BlueprintSlice';
 import { useAppDispatch } from '../../../../../store/hooks';
 import {
@@ -30,6 +32,8 @@ export const CreateSaveAndBuildBtn = ({
   setIsOpen,
   isDisabled,
 }: CreateDropdownProps) => {
+  const { analytics } = useChrome();
+
   const [buildBlueprint] = useComposeBlueprintMutation();
   const [createBlueprint] = useCreateBlueprintMutation({
     fixedCacheKey: 'createBlueprintKey',
@@ -38,6 +42,12 @@ export const CreateSaveAndBuildBtn = ({
   const onSaveAndBuild = async () => {
     const requestBody = await getBlueprintPayload();
     setIsOpen(false);
+
+    analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, {
+      module: AMPLITUDE_MODULE_NAME,
+      type: 'createBlueprintAndBuildImages',
+    });
+
     const blueprint =
       requestBody &&
       (await createBlueprint({
@@ -68,6 +78,8 @@ export const CreateSaveButton = ({
   getBlueprintPayload,
   isDisabled,
 }: CreateDropdownProps) => {
+  const { analytics } = useChrome();
+
   const [createBlueprint, { isLoading }] = useCreateBlueprintMutation({
     fixedCacheKey: 'createBlueprintKey',
   });
@@ -120,11 +132,17 @@ export const CreateSaveButton = ({
 
     setIsOpen(false);
 
+    analytics.track(`${AMPLITUDE_MODULE_NAME}-blueprintCreated`, {
+      module: AMPLITUDE_MODULE_NAME,
+      type: 'createBlueprint',
+    });
+
     const blueprint =
       requestBody &&
       (await createBlueprint({
         createBlueprintRequest: requestBody,
       }).unwrap());
+
     if (blueprint) {
       dispatch(setBlueprintId(blueprint?.id));
     }

src/constants.ts

@@ -227,3 +227,5 @@ export enum ContentOrigin {
   'CUSTOM' = 'external,upload',
   'ALL' = 'red_hat,external,upload',
 }
+
+export const AMPLITUDE_MODULE_NAME = 'imageBuilder';