WSTEAM1-1514: Add click tracking at top level #12360

shayneahchoon · 2025-02-03T15:25:15Z

Resolves JIRA WSTEAM1-1514

Overall changes

Implements changes from #12332

Code changes

Uses immediately invoked function expression instead of a string to outline script.
Adds unit tests.
Adds tracking script at top level of document.
Adds lite tracking on Most Read links only.

Testing

List the steps used to test this PR.

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

src/server/utilities/clickTrackingScript/clickTracking.test.js

src/app/components/MostRead/Canonical/Item/index.tsx

src/app/hooks/useClickTrackerHandler/index.jsx

karinathomasbbc · 2025-02-03T15:40:09Z

src/app/components/MostRead/Canonical/Item/index.tsx


  return (
    <div css={getItemCss({ dir, size })} dir={dir}>
      <a
        css={[styles.link, size === 'default' && styles.defaultLink]}
        href={href}
        onClick={clickTrackerHandler}
+        {...(isLite && { [LITE_TRACKER_PARAM]: liteUrl })}


Does this mean that in order to add tracking on lite, we would need to add this line to every single component? Is there a way of doing this for all components? I wondered if that should be part of the intercepting of the click event...?

It would be really hard to do without duplicating a lot of the atiTracking logic in vanilla js.

src/server/utilities/clickTrackingScript/clickTracking.js

src/server/utilities/clickTrackingScript/clickTracking.test.js

karinathomasbbc · 2025-02-03T15:52:01Z

src/app/hooks/useClickTrackerHandler/index.jsx

@@ -9,6 +10,7 @@ import { ServiceContext } from '../../contexts/ServiceContext';
 import { isValidClick } from './clickTypes';

 const EVENT_TYPE = 'click';
+export const LITE_TRACKER_PARAM = 'data-ati-tracking';


nitpick: Naming things is 🧑‍🔬 (ignore this for the spike - perhaps when we productionise it, we can rename)

Suggested change

export const LITE_TRACKER_PARAM = 'data-ati-tracking';

export const LITE_ATI_TRACKING = 'data-lite-ati-tracking';

karinathomasbbc · 2025-02-03T15:55:08Z

src/server/utilities/clickTrackingScript/clickTracking.js

@@ -0,0 +1,92 @@
+export default function trackingScript() {


Is there duplication between this and the canonical ATI code, and is there any way of sharing the code / implementing it once in one place? I would be keen to keep this script as small as possible 🤞

e.g. can we use https://github.com/bbc/simorgh/blob/c326deb0c8e9ca4469c471a784e12f6eb0eaac51/src/app/lib/analyticsUtils/index.js and have even more branching logic for platform === 'lite'? Or is that just a maintenance nightmare, since we already have amp & canonical code in here?

karinathomasbbc · 2025-02-03T15:57:13Z

src/server/utilities/clickTrackingScript/clickTracking.js

+          }
+        }
+
+        if (!atUserIdValue && crypto.randomUUID) {


Do we need to worry about Opera Mini + Lite, or does this work? Or is the point of Opera Mini that all users have the same ID, so it would be impossible for us to detect unique users?

karinathomasbbc · 2025-02-03T15:58:44Z

src/app/hooks/useClickTrackerHandler/index.jsx

+  const componentName = props?.componentName;
+  const url = props?.url;
+  const advertiserID = props?.advertiserID;
+  const format = props?.format;
+  const detailedPlacement = props?.detailedPlacement;


Can we use destructuring here?

karinathomasbbc · 2025-02-03T16:00:59Z

src/server/Document/Renderers/LiteRenderer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-danger */
 import React, { ReactElement, PropsWithChildren } from 'react';
+import trackingScript from '#src/server/utilities/clickTrackingScript/clickTracking';


If we rename the folder / file, let's also rename it here

karinathomasbbc · 2025-02-03T16:52:54Z

src/app/components/MostRead/Canonical/Item/index.tsx

+  const clickTrackerHandler = isLite
+    ? {
+        [LITE_TRACKER_PARAM]: useConstructLiteSiteUrl(eventTrackingData),
+      }
+    : {
+        onClick: useClickTrackerHandler(eventTrackingData),
+      };


Should this logic be moved into the useClickTrackerHandler code, meaning that the only changes we would need to make to the other components which have click tracking would be what you've done in this file on line 68?

src/server/utilities/liteATIClickTracking/index.test.ts

+
+    trackingScript();
+
+    document.cookie =


To fix the problem, we need to ensure that the cookie is transmitted using SSL by setting the secure attribute on the cookie. This can be done by modifying the document.cookie assignment to include the secure attribute. This change should be made in the beforeEach block where the cookie is being set.

src/server/utilities/liteATIClickTracking/index.test.ts

+      'https://logws1363.ati-host.net/?',
+    );
+
+    document.cookie = 'atuserid={"val":"oldCookieId"}';


To fix the problem, we need to ensure that the cookie is transmitted using SSL by setting the secure attribute on the cookie. This can be done by appending ; secure to the cookie string when setting it. This change should be made in the test file where the cookie is being set.

karinathomasbbc · 2025-02-04T08:53:34Z

src/server/utilities/liteATIClickTracking/index.test.ts

+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore


This can be replaced with

Suggested change

// eslint-disable-next-line @typescript-eslint/ban-ts-comment

// @ts-ignore

// @ts-expect-error Explain why here

karinathomasbbc · 2025-02-04T09:05:18Z

src/server/utilities/liteATIClickTracking/index.test.ts

+  const randomUUIDMock = jest.fn();
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers().setSystemTime(new Date(1731515402000));


nitpick: Could we use the ISO Date, so that we don't need to calculate what date/time this represents?

Suggested change

jest.useFakeTimers().setSystemTime(new Date(1731515402000));

jest.useFakeTimers().setSystemTime(new Date("2024-11-13T16:30:02.000Z"));

karinathomasbbc · 2025-02-04T09:05:53Z

src/server/utilities/liteATIClickTracking/index.test.ts

+    trackingScript();
+
+    document.cookie =
+      'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';


Could we use a more realistic expiry date here?

Suggested change

'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

'atuserid=; expires=Wed, 01 Jan 2025 00:00:00 UTC; path=/;';

karinathomasbbc · 2025-02-04T09:07:01Z

src/app/components/MostRead/Canonical/Item/index.tsx

+  const { isLite } = useContext(RequestContext);
+
+  const clickTrackerHandler = isLite
+    ? {
+        [LITE_TRACKER_PARAM]: useConstructLiteSiteATIEventTrackUrl(eventTrackingData),
+      }
+    : {
+        onClick: useClickTrackerHandler(eventTrackingData),
+      };


Not for the spike, but I would like to see this extracted into a utility - perhaps somewhere adjacent to, or within the useClickTrackerHandler - which we can reuse for all other components we would like to add click tracking to.

karinathomasbbc · 2025-02-04T13:22:06Z

src/server/Document/__snapshots__/component.test.jsx.snap

@@ -205,6 +205,77 @@ exports[`Document Component should render LITE version correctly 1`] = `
    <style>
      .css-7prgni-StyledLink{display:inline-block;}
    </style>
+    <script>
+      (function trackingScript() {


I wasn't expecting this, but was there an existing test which already snapshots the Document component?

karinathomasbbc · 2025-02-04T13:23:51Z

src/server/utilities/liteATIClickTracking/index.test.ts

+    Object.defineProperty(global, 'crypto', {
+      value: {
+        randomUUID: randomUUIDMock,
+      },
+    });


Not for spike but we should probably move this to the src/testHelpers/jest-setup.js file so that we don't have to keep mocking it in other places

WSTEAM1-1514: Add click tracking at top level

67888e2

github-advanced-security bot found potential problems Feb 3, 2025

View reviewed changes

src/server/utilities/clickTrackingScript/clickTracking.test.js Fixed Show fixed Hide fixed

src/server/utilities/clickTrackingScript/clickTracking.test.js Fixed Show fixed Hide fixed

WSTEAM1-1514: Update

1e894cf

shayneahchoon commented Feb 3, 2025

View reviewed changes

src/app/components/MostRead/Canonical/Item/index.tsx Outdated Show resolved Hide resolved

karinathomasbbc reviewed Feb 3, 2025

View reviewed changes

WSTEAM1-1514: Update

975419f

karinathomasbbc reviewed Feb 3, 2025

View reviewed changes

shayneahchoon added 2 commits February 3, 2025 17:00

WSTEAM1-1514: Change to TS:

8c64c73

WSTEAM1-1514: rename

7839f99

github-advanced-security bot found potential problems Feb 3, 2025

View reviewed changes

shayneahchoon added 3 commits February 4, 2025 08:53

WSTEAM1-1514: Update

3dcc093

WSTEAM1-1514: Update

e95925f

WSTEAM1-1514: Update

b59c095

karinathomasbbc reviewed Feb 4, 2025

View reviewed changes

@@ -21,3 +21,3 @@
                 document.cookie =
-                  'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+                  'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; secure;';
@@ -53,3 +53,3 @@
-                expect(document.cookie).toBe('atuserid={"val":"randomUniqueId"}');
+                expect(document.cookie).toBe('atuserid={"val":"randomUniqueId"}; secure');
               });

@@ -53,3 +53,3 @@
-                expect(document.cookie).toBe('atuserid={"val":"randomUniqueId"}');
+                expect(document.cookie).toBe('atuserid={"val":"randomUniqueId"}; secure');
               });
@@ -63,3 +63,3 @@
-                document.cookie = 'atuserid={"val":"oldCookieId"}';
+                document.cookie = 'atuserid={"val":"oldCookieId"}; secure';
                 randomUUIDMock.mockReturnValueOnce('newCookieId');

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WSTEAM1-1514: Add click tracking at top level #12360

WSTEAM1-1514: Add click tracking at top level #12360

shayneahchoon commented Feb 3, 2025

karinathomasbbc Feb 3, 2025

shayneahchoon Feb 4, 2025

karinathomasbbc Feb 3, 2025 •

edited

Loading

karinathomasbbc Feb 3, 2025 •

edited

Loading

karinathomasbbc Feb 3, 2025

karinathomasbbc Feb 3, 2025

karinathomasbbc Feb 3, 2025

karinathomasbbc Feb 3, 2025

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

karinathomasbbc Feb 4, 2025

karinathomasbbc Feb 4, 2025

karinathomasbbc Feb 4, 2025

karinathomasbbc Feb 4, 2025

karinathomasbbc Feb 4, 2025

karinathomasbbc Feb 4, 2025

	export const LITE_TRACKER_PARAM = 'data-ati-tracking';
	export const LITE_ATI_TRACKING = 'data-lite-ati-tracking';

		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore

	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore
	// @ts-expect-error Explain why here

	jest.useFakeTimers().setSystemTime(new Date(1731515402000));
	jest.useFakeTimers().setSystemTime(new Date("2024-11-13T16:30:02.000Z"));

	'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
	'atuserid=; expires=Wed, 01 Jan 2025 00:00:00 UTC; path=/;';

WSTEAM1-1514: Add click tracking at top level #12360

Are you sure you want to change the base?

WSTEAM1-1514: Add click tracking at top level #12360

Conversation

shayneahchoon commented Feb 3, 2025

Overall changes

Code changes

Testing

Helpful Links

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karinathomasbbc Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

karinathomasbbc Feb 3, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karinathomasbbc Feb 3, 2025 •

edited

Loading

karinathomasbbc Feb 3, 2025 •

edited

Loading