Add Ophan tracking to crossword (#1935)

* Add Ophan attributes to track interaction with crossword * Add Ophan tracking to anagram helper start button
guardian · Feb 12, 2025 · 87acb88 · 87acb88
1 parent 3a93d78
commit 87acb88
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.tsx
@@ -83,6 +83,7 @@ export const AnagramHelper = () => {
 				min-height: fit-content;
 				z-index: 2;
 			`}
+			data-link-name="Anagram Helper"
 		>
 			<div
 				css={css`
@@ -98,6 +99,7 @@ export const AnagramHelper = () => {
 					priority="tertiary"
 					icon={<SvgCross size="xsmall" />}
 					hideLabel={true}
+					data-link-name="Close"
 				></CrosswordButton>
 			</div>
 			<div
@@ -136,6 +138,7 @@ export const AnagramHelper = () => {
 							disabled={letters.length < 1}
 							priority="primary"
 							size="default"
+							data-link-name="Shuffle"
 						>
 							Start
 						</CrosswordButton>
@@ -159,13 +162,15 @@ export const AnagramHelper = () => {
 								onClick={reset}
 								size={'default'}
 								priority="secondary"
+								data-link-name="Start Again"
 							>
 								Back
 							</CrosswordButton>
 							<CrosswordButton
 								onClick={shuffle}
 								size={'default'}
 								priority="primary"
+								data-link-name="Shuffle"
 							>
 								Shuffle
 							</CrosswordButton>

diff --git a/libs/@guardian/react-crossword/src/components/Controls.tsx b/libs/@guardian/react-crossword/src/components/Controls.tsx
@@ -61,7 +61,7 @@ const ClearClue = (props: ButtonProps) => {
 	}, [cells, currentEntryId, updateCell]);
 
 	return (
-		<ClueButton onClick={clear} {...props}>
+		<ClueButton onClick={clear} data-link-name="Clear this" {...props}>
 			Clear Word
 		</ClueButton>
 	);
@@ -108,7 +108,7 @@ const CheckClue = (props: ButtonProps) => {
 	}, [cells, checkCell, currentEntryId, updateCell, setValidAnswers]);
 
 	return (
-		<ClueButton onClick={check} {...props}>
+		<ClueButton onClick={check} data-link-name="Check this" {...props}>
 			Check Word
 		</ClueButton>
 	);
@@ -135,7 +135,7 @@ const RevealClue = (props: ButtonProps) => {
 	}, [cells, currentEntryId, updateCell]);
 
 	return (
-		<ClueButton onClick={reveal} {...props}>
+		<ClueButton onClick={reveal} data-link-name="Reveal this" {...props}>
 			Reveal Word
 		</ClueButton>
 	);
@@ -145,7 +145,11 @@ const AnagramHelper = (props: ButtonProps) => {
 	const { toggleAnagramHelper } = useShowAnagramHelper();
 
 	return (
-		<ClueButton onClick={toggleAnagramHelper} {...props}>
+		<ClueButton
+			onClick={toggleAnagramHelper}
+			data-link-name="Show anagram helper"
+			{...props}
+		>
 			Anagram Helper
 		</ClueButton>
 	);
@@ -190,7 +194,7 @@ const CheckGrid = (props: ButtonProps) => {
 	}, [cells, checkCell, entries, updateCell, setValidAnswers]);
 
 	return (
-		<CrosswordButton onClick={check} {...props}>
+		<CrosswordButton onClick={check} data-link-name="Check all" {...props}>
 			Check All
 		</CrosswordButton>
 	);
@@ -211,7 +215,12 @@ const RevealGrid = (props: ButtonProps) => {
 		setProgress(newProgress);
 	}, [cells, setProgress]);
 	return (
-		<CrosswordButton onClick={reveal} requireConfirmation={true} {...props}>
+		<CrosswordButton
+			onClick={reveal}
+			requireConfirmation={true}
+			data-link-name="Reveal all"
+			{...props}
+		>
 			Reveal All
 		</CrosswordButton>
 	);
@@ -223,6 +232,7 @@ const ClearGrid = (props: ButtonProps) => {
 		<CrosswordButton
 			onClick={clearUserInput}
 			requireConfirmation={true}
+			data-link-name="Clear all"
 			{...props}
 		>
 			Clear All

diff --git a/libs/@guardian/react-crossword/src/components/Crossword.tsx b/libs/@guardian/react-crossword/src/components/Crossword.tsx
@@ -66,6 +66,7 @@ export const Crossword = ({
 		<ContextProvider theme={theme} data={data} userProgress={progress}>
 			<div
 				role="application"
+				data-link-name="Crosswords"
 				css={css`
 					*,
 					*::before,