Update tracking for product cards (#14871)

* Fix for tracking product card buttons

Author: oliverabrahams

dotcom-rendering/src/components/ProductCardButtons.tsx

@@ -24,9 +24,11 @@ export const ProductCardButtons = ({
 					minimisePadding={true}
 					priority={index === 0 ? 'primary' : 'tertiary'}
 					fullwidth={true}
-					data-component={`${
-						dataComponent ?? 'product-card-button'
-					}-${index}`}
+					dataComponent={
+						dataComponent
+							? `${dataComponent}-${index + 1}`
+							: undefined
+					}
 				/>
 			);
 		})}

dotcom-rendering/src/components/ProductCardInline.tsx

@@ -213,7 +213,7 @@ export const ProductCardInline = ({
 			<div css={buttonWrapper}>
 				<ProductCardButtons
 					productCtas={productCtas}
-					dataComponent={'inline-product-card-buttons'}
+					dataComponent={'inline-product-card-button'}
 				/>
 			</div>
 			{hasCustomAttributes && (

dotcom-rendering/src/components/ProductCardLeftCol.tsx

@@ -121,7 +121,7 @@ export const ProductCardLeftCol = ({
 			<div css={buttonContainer}>
 				<ProductCardButtons
 					productCtas={productCtas}
-					dataComponent={'left-col-product-card-buttons'}
+					dataComponent={'left-col-product-card-button'}
 				/>
 			</div>
 			{customAttributes.length > 0 && (