particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Update Amplitude tracking

Browse source 
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.
This commit is contained in:
regexowl 2024-08-22 08:37:42 +02:00 • committed by Klara Simickova
parent 568c85066d
commit be8a00d186
3 changed files with 40 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/Components/CreateImageWizard/steps/Packages/PackageRecommendations.tsx
View file

@ -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', {
shownRecommendations: response.data.packages,
selectedPackages: packages.map((pkg) => pkg.name),
});
analytics.track(
`${AMPLITUDE_MODULE_NAME}-packageRecommendationsShown`,
{
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', {
packageName: pkg,
selectedPackages: packages.map(
(pkg) => pkg.name
),
shownRecommendations: data.packages,
});
analytics.track(
`${AMPLITUDE_MODULE_NAME}-recommendedPackageAdded`,
{
module: AMPLITUDE_MODULE_NAME,
packageName: pkg,
selectedPackages: packages.map(
(pkg) => pkg.name
),
shownRecommendations: data.packages,
}
);
addRecommendedPackage(pkg);
}}
isInline

18
src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx
View file

@ -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));
}