Merge pull request #14892 from guardian/filter/utm-into-xcust

Add UTM params into xCust

Author: charleycampbell

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

@@ -7,6 +7,12 @@ import { useBetaAB } from '../lib/useAB';
  * - Referrer
  * - Skimlinks account ID
  * - AB test participations
+ * - UTM parameters (from page URL or referrer URL):
+ *   - utm_source
+ *   - utm_medium
+ *   - utm_campaign
+ *   - utm_content
+ *   - utm_term
  *
  * ## Why does this need to be an Island?
  *
@@ -16,6 +22,26 @@ import { useBetaAB } from '../lib/useAB';
  *
  * (No visual story exists as this does not render anything)
  */
+
+// Helper to extract UTM parameters from URLSearchParams
+function getUtmString(params: URLSearchParams, keys: string[]): string {
+	return keys
+		.map((key) => {
+			const value = params.get(key);
+			return value ? `${key}|${value}` : null;
+		})
+		.filter(Boolean)
+		.join('|');
+}
+
+const utmKeys = [
+	'utm_source',
+	'utm_medium',
+	'utm_campaign',
+	'utm_content',
+	'utm_term',
+];
+
 export const EnhanceAffiliateLinks = () => {
 	const abTests = useBetaAB();
 
@@ -32,6 +58,26 @@ export const EnhanceAffiliateLinks = () => {
 	useEffect(() => {
 		const allLinksOnPage = [...document.querySelectorAll('a')];
 
+		const urlParams = new URLSearchParams(window.location.search);
+
+		const referrerURLParams = new URLSearchParams(
+			document.referrer.split('?')[1] ?? '',
+		);
+
+		const utmParamsFromArticleURL = getUtmString(urlParams, utmKeys);
+
+		const utmParamsFromReferrer = getUtmString(referrerURLParams, utmKeys);
+
+		/* Selects UTM parameters from the article URL if present;
+		 otherwise it falls back to UTM parameters from the referrer URL if those exist.
+		 If neither are present it returns an empty string.*/
+		const utmParamsString =
+			utmParamsFromArticleURL && utmParamsFromArticleURL.trim() !== ''
+				? utmParamsFromArticleURL
+				: utmParamsFromReferrer && utmParamsFromReferrer.trim() !== ''
+				? utmParamsFromReferrer
+				: '';
+
 		for (const link of allLinksOnPage) {
 			if (isSkimlink(link.href)) {
 				const referrerDomain =
@@ -44,7 +90,7 @@ export const EnhanceAffiliateLinks = () => {
 				// Skimlinks treats xcust as one long string, so we use | to separate values
 				const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}${
 					abTestString ? `|abTestParticipations|${abTestString}` : ''
-				}`;
+				}${utmParamsString ? `|${utmParamsString}` : ''}`;
 
 				link.href = `${link.href}&xcust=${encodeURIComponent(
 					xcustValue,

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

@@ -81,4 +81,72 @@ describe('EnhanceAffiliateLinks', () => {
 			'xcust=referrer%7Cfoo.com%7CaccountId%7C12345%7CabTestParticipations%7Ctest1%3AvariantA%2Ctest2%3AvariantB',
 		);
 	});
+
+	it('should use article URL UTM parameters when present', () => {
+		Object.defineProperty(window, 'location', {
+			value: new URL(
+				'https://example.test/this?utm_source=growth&utm_medium=epicuk&utm_campaign=q3_test&utm_content=filter_general',
+			),
+			configurable: true,
+		});
+
+		document.body.innerHTML = `<a href="https://go.skimresources.com/?id=12345">Skimlink</a>`;
+
+		render(<EnhanceAffiliateLinks />);
+
+		const link = document.querySelector('a');
+		expect(link?.href).toContain(
+			'utm_source%7Cgrowth%7Cutm_medium%7Cepicuk%7Cutm_campaign%7Cq3_test%7Cutm_content%7Cfilter_general',
+		);
+	});
+
+	it('should use UTM parameters from the referrer if the article URL has none', () => {
+		Object.defineProperty(window, 'location', {
+			value: new URL('https://example.test/page'),
+			configurable: true,
+		});
+
+		Object.defineProperty(document, 'referrer', {
+			value: 'https://foo.bar/some?utm_source=testsource&utm_medium=somemedium&utm_campaign=refcamp',
+			configurable: true,
+		});
+
+		document.body.innerHTML = `
+		<a href="https://go.skimresources.com/?id=12345">Skimlink</a>
+	`;
+
+		render(<EnhanceAffiliateLinks />);
+
+		const link = document.querySelector('a');
+
+		expect(link?.href).toContain(
+			'utm_source%7Ctestsource%7Cutm_medium%7Csomemedium%7Cutm_campaign%7Crefcamp',
+		);
+	});
+
+	it('should use UTM parameters from the article URL over the referrer if both exist', () => {
+		Object.defineProperty(window, 'location', {
+			value: new URL(
+				'https://example.test/page?utm_source=pagegrow&utm_medium=somemedium',
+			),
+			configurable: true,
+		});
+
+		Object.defineProperty(document, 'referrer', {
+			value: 'https://foo.bar?utm_source=refgrow&utm_medium=refmed',
+			configurable: true,
+		});
+
+		document.body.innerHTML = `
+		<a href="https://go.skimresources.com/?id=12345">Skimlink</a>
+	`;
+
+		render(<EnhanceAffiliateLinks />);
+
+		const link = document.querySelector('a');
+		expect(link?.href).toContain(
+			'utm_source%7Cpagegrow%7Cutm_medium%7Csomemedium',
+		);
+		expect(link?.href).not.toContain('refgrow');
+	});
 });