Skip to content

Commit 81df6cb

Browse files
mfranciscmfrancisc
authored
fix: adobe eddl tracking (#18)
* fix adobe eddl tracking
1 parent 80f7081 commit 81df6cb

File tree

7 files changed

+102
-173
lines changed

7 files changed

+102
-173
lines changed

‎.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
dist
22
dist-types
33
dist-dynamic
4+
dist-scalprum
45
coverage
56
.vscode
67
.eslintrc.js
8+
index.json
9+
red-hat-developer-hub-backstage-plugin-sandbox

‎plugins/sandbox/src/components/SandboxActivities/SandboxActivitiesCard.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@ import Typography from '@mui/material/Typography';
2020
import CardMedia from '@mui/material/CardMedia';
2121
import { useTheme } from '@mui/material/styles';
2222
import { Link } from '@backstage/core-components';
23-
import {
24-
getEddlDataAttributes,
25-
useTrackAnalytics,
26-
} from '../../utils/eddl-utils';
23+
import { useTrackAnalytics } from '../../utils/eddl-utils';
2724

2825
type SandboxActivitiesCardProps = {
2926
article: {
@@ -39,7 +36,6 @@ export const SandboxActivitiesCard: React.FC<SandboxActivitiesCardProps> = ({
3936
}) => {
4037
const theme = useTheme();
4138
const trackAnalytics = useTrackAnalytics();
42-
const eddlAttributes = getEddlDataAttributes(title, 'Activities');
4339

4440
// Handle activity click for analytics tracking
4541
const handleActivityClick = async () => {
@@ -51,7 +47,10 @@ export const SandboxActivitiesCard: React.FC<SandboxActivitiesCardProps> = ({
5147
to={link}
5248
onClick={handleActivityClick}
5349
style={{ textDecoration: 'none' }}
54-
{...eddlAttributes}
50+
data-analytics-linktype="cta"
51+
data-analytics-category="Developer Sandbox|Activities"
52+
data-analytics-text={title}
53+
data-analytics-region="sandbox-activities"
5554
>
5655
<Card
5756
elevation={0}

‎plugins/sandbox/src/components/SandboxActivities/__tests__/SandboxActivitiesCard.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ describe('SandboxActivitiesCard', () => {
125125

126126
const linkElement = screen.getByRole('link');
127127

128+
expect(linkElement).toHaveAttribute('data-analytics-linktype', 'cta');
128129
expect(linkElement).toHaveAttribute(
129130
'data-analytics-category',
130131
'Developer Sandbox|Activities',

‎plugins/sandbox/src/components/SandboxCatalog/SandboxCatalogCardButton.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const SandboxCatalogCardButton: React.FC<
118118
await trackAnalytics(title, 'Catalog', link, intcmp, 'cta');
119119
};
120120

121-
const buttonContent = (
121+
return userFound && !loading && !verificationRequired ? (
122122
<Button
123123
size="medium"
124124
color="primary"
@@ -131,19 +131,19 @@ export const SandboxCatalogCardButton: React.FC<
131131
endIcon={endIcon}
132132
sx={buttonSx}
133133
>
134-
{label}
134+
<Link
135+
to={link}
136+
underline="none"
137+
onClick={handleCtaClick}
138+
data-analytics-linktype="cta"
139+
data-analytics-text={label}
140+
data-analytics-category={`Developer Sandbox|Catalog|${title}`}
141+
data-analytics-region="sandbox-catalog"
142+
data-analytics-offerid={intcmp}
143+
>
144+
{label}
145+
</Link>
135146
</Button>
136-
);
137-
138-
return userFound && !loading && !verificationRequired ? (
139-
<Link
140-
to={link}
141-
underline="none"
142-
onClick={handleCtaClick}
143-
data-analytics-track-by-analytics-manager="false"
144-
>
145-
{buttonContent}
146-
</Link>
147147
) : (
148148
// When there's no link, we push CTA event on button click
149149
<Button
@@ -158,7 +158,11 @@ export const SandboxCatalogCardButton: React.FC<
158158
}}
159159
endIcon={endIcon}
160160
sx={buttonSx}
161-
data-analytics-track-by-analytics-manager="false"
161+
data-analytics-linktype="cta"
162+
data-analytics-text={label}
163+
data-analytics-category={`Developer Sandbox|Catalog|${title}`}
164+
data-analytics-region="sandbox-catalog"
165+
data-analytics-offerid={intcmp}
162166
>
163167
{label}
164168
</Button>

‎plugins/sandbox/src/components/SandboxCatalog/__tests__/SandboxCatalogCardButton.test.tsx‎

Lines changed: 51 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -220,102 +220,42 @@ describe('SandboxCatalogCardButton', () => {
220220
expect(screen.queryByRole('link')).not.toBeInTheDocument();
221221
});
222222

223-
describe('CTA Event Pushing', () => {
224-
it('should disable automatic tracking and push CTA event when button is clicked (user not found)', () => {
225-
// User not found - button should have tracking disabled and push event on click
226-
mockUseSandboxContext.mockReturnValue({
227-
loading: false,
228-
userFound: false,
229-
userReady: false,
230-
ansibleStatus: AnsibleStatus.UNKNOWN,
231-
} as any);
232-
233-
renderButton();
234-
235-
const button = screen.getByRole('button');
236-
237-
// Should have automatic tracking disabled
238-
expect(button).toHaveAttribute(
239-
'data-analytics-track-by-analytics-manager',
240-
'false',
241-
);
242-
243-
// Click the button
244-
fireEvent.click(button);
245-
246-
// Should push CTA event
247-
expect(mockTrackAnalytics).toHaveBeenCalledWith(
248-
'OpenShift',
249-
'Catalog',
250-
'https://example.com',
251-
'701Pe00000dnCEYIA2',
252-
'cta',
253-
);
254-
});
255-
256-
it('should disable automatic tracking and push CTA event when link is clicked (user found)', () => {
257-
// User found and ready - link should have tracking disabled and push event on click
258-
mockUseSandboxContext.mockReturnValue({
259-
loading: false,
260-
userFound: true,
261-
userReady: true,
262-
verificationRequired: false,
263-
ansibleStatus: AnsibleStatus.UNKNOWN,
264-
} as any);
265-
266-
renderButton();
267-
268-
const link = screen.getByRole('link');
269-
270-
// Should have automatic tracking disabled
271-
expect(link).toHaveAttribute(
272-
'data-analytics-track-by-analytics-manager',
273-
'false',
274-
);
275-
276-
// Click the link
277-
fireEvent.click(link);
278-
279-
// Should push CTA event
280-
expect(mockTrackAnalytics).toHaveBeenCalledWith(
281-
'OpenShift',
282-
'Catalog',
283-
'https://example.com',
284-
'701Pe00000dnCEYIA2',
285-
'cta',
286-
);
287-
});
288-
289-
it('should push CTA event with correct product details for different products', () => {
223+
describe('CTA Event Pushing and Analytics Data Attributes', () => {
224+
it('should push CTA event with correct product details and verify analytics data attributes for different products', () => {
290225
const testCases = [
291226
{
292227
id: Product.OPENSHIFT_CONSOLE,
293228
title: 'OpenShift',
294229
expectedIntcmp: '701Pe00000dnCEYIA2',
230+
expectedLabel: 'Try it',
295231
},
296232
{
297233
id: Product.OPENSHIFT_AI,
298234
title: 'OpenShift AI',
299235
expectedIntcmp: '701Pe00000do2uiIAA',
236+
expectedLabel: 'Try it',
300237
},
301238
{
302239
id: Product.DEVSPACES,
303240
title: 'Dev Spaces',
304241
expectedIntcmp: '701Pe00000doTQCIA2',
242+
expectedLabel: 'Try it',
305243
},
306244
{
307245
id: Product.AAP,
308246
title: 'Ansible Automation Platform',
309247
expectedIntcmp: '701Pe00000dowQXIAY',
248+
expectedLabel: 'Provision',
310249
},
311250
{
312251
id: Product.OPENSHIFT_VIRT,
313252
title: 'OpenShift Virtualization',
314253
expectedIntcmp: '701Pe00000dov6IIAQ',
254+
expectedLabel: 'Try it',
315255
},
316256
];
317257

318-
testCases.forEach(({ id, title, expectedIntcmp }) => {
258+
testCases.forEach(({ id, title, expectedIntcmp, expectedLabel }) => {
319259
// Reset mocks for each test case
320260
jest.clearAllMocks();
321261

@@ -329,6 +269,24 @@ describe('SandboxCatalogCardButton', () => {
329269
const { unmount } = renderButton({ id, title });
330270

331271
const button = screen.getByRole('button');
272+
273+
// Verify analytics data attributes
274+
expect(button).toHaveAttribute('data-analytics-linktype', 'cta');
275+
expect(button).toHaveAttribute('data-analytics-text', expectedLabel);
276+
expect(button).toHaveAttribute(
277+
'data-analytics-category',
278+
`Developer Sandbox|Catalog|${title}`,
279+
);
280+
expect(button).toHaveAttribute(
281+
'data-analytics-region',
282+
'sandbox-catalog',
283+
);
284+
expect(button).toHaveAttribute(
285+
'data-analytics-offerid',
286+
expectedIntcmp,
287+
);
288+
289+
// Verify CTA tracking
332290
fireEvent.click(button);
333291

334292
expect(mockTrackAnalytics).toHaveBeenCalledWith(
@@ -342,5 +300,30 @@ describe('SandboxCatalogCardButton', () => {
342300
unmount();
343301
});
344302
});
303+
304+
it('renders Link with all correct analytics data attributes when userFound is true', () => {
305+
mockUseSandboxContext.mockReturnValue({
306+
loading: false,
307+
userFound: true,
308+
userReady: true,
309+
verificationRequired: false,
310+
ansibleStatus: AnsibleStatus.UNKNOWN,
311+
} as any);
312+
313+
renderButton({ title: 'OpenShift Console' });
314+
315+
const link = screen.getByRole('link');
316+
expect(link).toHaveAttribute('data-analytics-linktype', 'cta');
317+
expect(link).toHaveAttribute('data-analytics-text', 'Try it');
318+
expect(link).toHaveAttribute(
319+
'data-analytics-category',
320+
'Developer Sandbox|Catalog|OpenShift Console',
321+
);
322+
expect(link).toHaveAttribute('data-analytics-region', 'sandbox-catalog');
323+
expect(link).toHaveAttribute(
324+
'data-analytics-offerid',
325+
'701Pe00000dnCEYIA2',
326+
);
327+
});
345328
});
346329
});

‎plugins/sandbox/src/components/SandboxHeader.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -113,30 +113,33 @@ export const SandboxHeader: React.FC<SandboxHeaderProps> = ({ pageTitle }) => {
113113
<Box
114114
sx={{ display: { xs: 'none', sm: 'none', md: 'block', lg: 'block' } }}
115115
>
116-
<Link
117-
to="https://www.redhat.com/en/contact"
118-
underline="none"
119-
target="_blank"
120-
onClick={handleContactSalesClick}
116+
<Button
117+
variant="outlined"
118+
color="primary"
119+
startIcon={<SupportAgentIcon />}
120+
endIcon={<OpenInNewIcon />}
121+
sx={{
122+
textTransform: 'none',
123+
marginRight: theme.spacing(2),
124+
border: `1px solid ${theme.palette.primary.main}`,
125+
'&:hover': {
126+
backgroundColor: 'rgba(25, 118, 210, 0.04)',
127+
borderColor: '#1976d2',
128+
},
129+
}}
121130
>
122-
<Button
123-
variant="outlined"
124-
color="primary"
125-
startIcon={<SupportAgentIcon />}
126-
endIcon={<OpenInNewIcon />}
127-
sx={{
128-
textTransform: 'none',
129-
marginRight: theme.spacing(2),
130-
border: `1px solid ${theme.palette.primary.main}`,
131-
'&:hover': {
132-
backgroundColor: 'rgba(25, 118, 210, 0.04)',
133-
borderColor: '#1976d2',
134-
},
135-
}}
131+
<Link
132+
to="https://www.redhat.com/en/contact"
133+
underline="none"
134+
target="_blank"
135+
onClick={handleContactSalesClick}
136+
data-analytics-linktype="cta"
137+
data-analytics-text="Contact Red Hat Sales"
138+
data-analytics-category="Developer Sandbox|Support"
136139
>
137140
Contact Red Hat Sales
138-
</Button>
139-
</Link>
141+
</Link>
142+
</Button>
140143
</Box>
141144
</Header>
142145
);

0 commit comments

Comments
 (0)