From 1a7bd945d6ae9b052d1e1f9ce6f552ce657f658a Mon Sep 17 00:00:00 2001 From: ollie_abrahams Date: Tue, 3 Mar 2026 14:32:42 +0000 Subject: [PATCH 1/2] add xcust component id --- .../src/components/Button/ProductLinkButton.tsx | 3 +++ .../src/components/EnhanceAffiliateLinks.importable.tsx | 9 ++++++--- .../src/components/HorizontalSummaryProductCard.tsx | 2 ++ dotcom-rendering/src/components/LinkBlockComponent.tsx | 1 + dotcom-rendering/src/components/ProductCardButtons.tsx | 3 +++ dotcom-rendering/src/components/ProductCardImage.tsx | 3 +++ dotcom-rendering/src/components/ProductCardInline.tsx | 6 +++++- dotcom-rendering/src/components/ProductCardLeftCol.tsx | 6 +++++- dotcom-rendering/src/components/ProductCarouselCard.tsx | 7 ++++++- 9 files changed, 34 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/Button/ProductLinkButton.tsx b/dotcom-rendering/src/components/Button/ProductLinkButton.tsx index 83d410afe8b..cdd2442890e 100644 --- a/dotcom-rendering/src/components/Button/ProductLinkButton.tsx +++ b/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} > { : 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, )}`; diff --git a/dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx b/dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx index 2ed80844d47..10531c51ee7 100644 --- a/dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx +++ b/dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx @@ -91,6 +91,7 @@ export const HorizontalSummaryProductCard = ({
{ export const ProductCardButtons = ({ productCtas, + xCustComponentId, }: { productCtas: ProductCta[]; + xCustComponentId?: string; }) => ( <> {productCtas.map((productCta, index) => { const label = getLabel(productCta); return ( { 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) diff --git a/dotcom-rendering/src/components/ProductCardInline.tsx b/dotcom-rendering/src/components/ProductCardInline.tsx index 19cf6a662ab..5434d6bc4ab 100644 --- a/dotcom-rendering/src/components/ProductCardInline.tsx +++ b/dotcom-rendering/src/components/ProductCardInline.tsx @@ -196,6 +196,7 @@ export const ProductCardInline = ({ format={format} image={image} url={productCtas[0]?.url} + xCustComponentId={'inline-image'} />
@@ -214,7 +215,10 @@ export const ProductCardInline = ({ )}
- +
{hasCustomAttributes && (
diff --git a/dotcom-rendering/src/components/ProductCardLeftCol.tsx b/dotcom-rendering/src/components/ProductCardLeftCol.tsx index ae7e2deff86..9ddcd952f35 100644 --- a/dotcom-rendering/src/components/ProductCardLeftCol.tsx +++ b/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'} />
{brandName}
@@ -119,7 +120,10 @@ export const ProductCardLeftCol = ({ )}
- +
{customAttributes.length > 0 && (
diff --git a/dotcom-rendering/src/components/ProductCarouselCard.tsx b/dotcom-rendering/src/components/ProductCarouselCard.tsx index 4a945ba0030..b5dcfad992b 100644 --- a/dotcom-rendering/src/components/ProductCarouselCard.tsx +++ b/dotcom-rendering/src/components/ProductCarouselCard.tsx @@ -118,7 +118,11 @@ export const ProductCarouselCard = ({ )}
- +
{!hasHeading && ( @@ -132,6 +136,7 @@ export const ProductCarouselCard = ({
{firstCta.price}
Date: Tue, 3 Mar 2026 15:25:34 +0000 Subject: [PATCH 2/2] change casing to camel case --- .../src/components/EnhanceAffiliateLinks.importable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx b/dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx index 5fd502e1773..bab137ce862 100644 --- a/dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx +++ b/dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx @@ -93,7 +93,7 @@ export const EnhanceAffiliateLinks = () => { const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}${ abTestString ? `|abTestParticipations|${abTestString}` : '' }${utmParamsString ? `|${utmParamsString}` : ''}${ - xcustComponentId ? `|component-id|${xcustComponentId}` : '' + xcustComponentId ? `|componentId|${xcustComponentId}` : '' }`; link.href = `${link.href}&xcust=${encodeURIComponent( xcustValue,