add xcust component id

Author: oliverabrahams

dotcom-rendering/src/components/Button/ProductLinkButton.tsx

@@ -18,6 +18,7 @@ type ProductLinkButtonProps = {
 	priority?: ButtonPriority;
 	minimisePadding?: boolean;
 	dataComponent?: string;
+	xCustComponentId?: string;
 };
 
 const fullWidthStyle = css`
@@ -53,6 +54,7 @@ export const ProductLinkButton = ({
 	fullWidthText = false,
 	priority = 'primary',
 	dataComponent,
+	xCustComponentId,
 }: ProductLinkButtonProps) => {
 	const cssOverrides: SerializedStyles[] = [
 		heightAutoStyle,
@@ -73,6 +75,7 @@ export const ProductLinkButton = ({
 			data-spacefinder-role="inline"
 			size={size}
 			cssOverrides={cssOverrides}
+			data-x-cust-component-id={xCustComponentId}
 		>
 			<span
 				style={fullWidthText ? { width: '100%' } : {}}

dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx

@@ -86,12 +86,15 @@ export const EnhanceAffiliateLinks = () => {
 						: new URL(document.referrer).hostname;
 
 				const skimlinksAccountId = getSkimlinksAccountId(link.href);
-
+				const xcustComponentId = link.getAttribute(
+					'data-x-cust-component-id',
+				);
 				// Skimlinks treats xcust as one long string, so we use | to separate values
 				const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}${
 					abTestString ? `|abTestParticipations|${abTestString}` : ''
-				}${utmParamsString ? `|${utmParamsString}` : ''}`;
-
+				}${utmParamsString ? `|${utmParamsString}` : ''}${
+					xcustComponentId ? `|component-id|${xcustComponentId}` : ''
+				}`;
 				link.href = `${link.href}&xcust=${encodeURIComponent(
 					xcustValue,
 				)}`;

dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx

@@ -91,6 +91,7 @@ export const HorizontalSummaryProductCard = ({
 		<div css={horizontalCard}>
 			<div css={imageContainer}>
 				<ProductCardImage
+					xCustComponentId={'horizontal-summary-card'}
 					format={format}
 					image={product.image}
 					url={cardCta.url}
@@ -114,6 +115,7 @@ export const HorizontalSummaryProductCard = ({
 			<div css={buttonContainer}>
 				<ProductLinkButton
 					size="small"
+					xCustComponentId="horizontal-summary-card"
 					fullwidth={true}
 					minimisePadding={true}
 					label={'Buy at ' + cardCta.retailer}

dotcom-rendering/src/components/LinkBlockComponent.tsx

@@ -45,6 +45,7 @@ export const LinkBlockComponent = ({
 		case 'ProductButton': {
 			return (
 				<ProductLinkButton
+					xCustComponentId={'product-link-block'}
 					priority={buttonPriority}
 					label={label}
 					url={url}

dotcom-rendering/src/components/ProductCardButtons.tsx

@@ -8,14 +8,17 @@ const getLabel = (cta: ProductCta): string => {
 
 export const ProductCardButtons = ({
 	productCtas,
+	xCustComponentId,
 }: {
 	productCtas: ProductCta[];
+	xCustComponentId?: string;
 }) => (
 	<>
 		{productCtas.map((productCta, index) => {
 			const label = getLabel(productCta);
 			return (
 				<ProductLinkButton
+					xCustComponentId={xCustComponentId}
 					key={label}
 					label={label}
 					url={productCta.url}

dotcom-rendering/src/components/ProductCardImage.tsx

@@ -9,12 +9,14 @@ interface ProductCardImageProps extends HTMLAttributes<HTMLDivElement> {
 	format: ArticleFormat;
 	image?: ProductImage;
 	url?: string;
+	xCustComponentId?: string;
 }
 
 export const ProductCardImage = ({
 	format,
 	image,
 	url,
+	xCustComponentId,
 }: ProductCardImageProps) => {
 	if (!image) {
 		return null;
@@ -40,6 +42,7 @@ export const ProductCardImage = ({
 					target="_blank"
 					rel="noopener noreferrer"
 					data-link-name="product image link"
+					data-x-cust-component-id={xCustComponentId}
 					// this is needed to override global style
 					// html:not(.src-focus-disabled) *:focus
 					// it has specificity(0, 2, 1) so we need (0, 3, 0)

dotcom-rendering/src/components/ProductCardInline.tsx

@@ -196,6 +196,7 @@ export const ProductCardInline = ({
 					format={format}
 					image={image}
 					url={productCtas[0]?.url}
+					xCustComponentId={'inline-image'}
 				/>
 			</div>
 			<div css={productInfoContainer}>
@@ -214,7 +215,10 @@ export const ProductCardInline = ({
 				)}
 			</div>
 			<div css={buttonWrapper}>
-				<ProductCardButtons productCtas={productCtas} />
+				<ProductCardButtons
+					xCustComponentId={'inline'}
+					productCtas={productCtas}
+				/>
 			</div>
 			{hasCustomAttributes && (
 				<div css={customAttributesContainer}>

dotcom-rendering/src/components/ProductCardLeftCol.tsx

@@ -102,6 +102,7 @@ export const ProductCardLeftCol = ({
 				format={format}
 				image={image}
 				url={productCtas[0]?.url}
+				xCustComponentId={'left-col-image'}
 			/>
 			<div css={productInfoContainer}>
 				<div css={brandNameFont}>{brandName}</div>
@@ -119,7 +120,10 @@ export const ProductCardLeftCol = ({
 				)}
 			</div>
 			<div css={buttonContainer}>
-				<ProductCardButtons productCtas={productCtas} />
+				<ProductCardButtons
+					xCustComponentId={'left-col'}
+					productCtas={productCtas}
+				/>
 			</div>
 			{customAttributes.length > 0 && (
 				<div css={customAttributesContainer}>

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -118,7 +118,11 @@ export const ProductCarouselCard = ({
 					)}
 			</div>
 			<div css={imageArea}>
-				<ProductCardImage format={format} image={product.image} />
+				<ProductCardImage
+					format={format}
+					image={product.image}
+					xCustComponentId={'carousel-card-image'}
+				/>
 			</div>
 			<div css={belowImageArea}>
 				{!hasHeading && (
@@ -132,6 +136,7 @@ export const ProductCarouselCard = ({
 						<div css={priceStyle}>{firstCta.price}</div>
 						<div css={buttonWrapper}>
 							<ProductLinkButton
+								xCustComponentId={'carousel-card'}
 								label={`Buy at ${firstCta.retailer}`}
 								url={firstCta.url}
 								fullwidth={true}