WSTEAM1-1514: Add click tracking at top level

src/app/components/ATIAnalytics/canonical/index.test.tsx

@@ -47,10 +47,14 @@ describe('Canonical ATI Analytics', () => {
 
     expect(helmet.scriptTags).toHaveLength(1);
     expect(helmet.scriptTags[0].innerHTML).toEqual(`
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "${expectedUrl}", true);
-    xhr.withCredentials = true;
-    xhr.send();
+    function sendBeaconLite (atiPageViewUrlString) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", atiPageViewUrlString, true);
+        xhr.withCredentials = true;
+        xhr.send();
+    }
+
+    sendBeaconLite("${expectedUrl}");
 `);
   });
 

src/app/components/ATIAnalytics/canonical/sendBeaconLite.ts

@@ -1,8 +1,12 @@
 const sendBeaconLite = (atiPageViewUrlString: string) => `
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "${atiPageViewUrlString}", true);
-    xhr.withCredentials = true;
-    xhr.send();
+    function sendBeaconLite (atiPageViewUrlString) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", atiPageViewUrlString, true);
+        xhr.withCredentials = true;
+        xhr.send();
+    }
+
+    sendBeaconLite("${atiPageViewUrlString}");
 `;
 
 export default sendBeaconLite;

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

@@ -1,7 +1,10 @@
 /** @jsx jsx */
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 import { jsx } from '@emotion/react';
-import useClickTrackerHandler from '#hooks/useClickTrackerHandler';
+import useClickTrackerHandler, {
+  LITE_TRACKER_PARAM,
+  useConstructLiteSiteATIEventTrackUrl,
+} from '#hooks/useClickTrackerHandler';
 import styles from './index.styles';
 import {
   mostReadListGridProps,
@@ -15,6 +18,7 @@
 } from '../../types';
 import { Direction } from '../../../../models/types/global';
 import Grid from '../../../../legacy/components/Grid';
+import { RequestContext } from '#app/contexts/RequestContext';
 
 export const getParentColumns = (columnLayout: ColumnLayout) => {
   return columnLayout !== 'oneColumn'
@@ -46,14 +50,22 @@
   size,
   eventTrackingData,
 }: PropsWithChildren<MostReadLinkProps>) => {
-  const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
+  const { isLite } = useContext(RequestContext);
+
+  const clickTrackerHandler = isLite
+    ? {
+        [LITE_TRACKER_PARAM]: useConstructLiteSiteATIEventTrackUrl(eventTrackingData),
+      }
+    : {
+        onClick: useClickTrackerHandler(eventTrackingData),
+      };
 
   return (
     <div css={getItemCss({ dir, size })} dir={dir}>
       <a
         css={[styles.link, size === 'default' && styles.defaultLink]}
         href={href}
-        onClick={clickTrackerHandler}
+        {...clickTrackerHandler}
       >
         {title}
       </a>

src/app/hooks/useClickTrackerHandler/index.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { useContext, useCallback, useState } from 'react';
 
+import { buildATIEventTrackUrl } from '#app/components/ATIAnalytics/atiUrl';
 import { EventTrackingContext } from '../../contexts/EventTrackingContext';
 import useTrackingToggle from '../useTrackingToggle';
 import OPTIMIZELY_CONFIG from '../../lib/config/optimizely';
@@ -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';
 
 const useClickTrackerHandler = (props = {}) => {
   const preventNavigation = props?.preventNavigation;
@@ -136,4 +138,35 @@ const useClickTrackerHandler = (props = {}) => {
   );
 };
 
+export const useConstructLiteSiteATIEventTrackUrl = (props = {}) => {
+  const eventTrackingContext = useContext(EventTrackingContext);
+
+  const componentName = props?.componentName;
+  const url = props?.url;
+  const advertiserID = props?.advertiserID;
+  const format = props?.format;
+  const detailedPlacement = props?.detailedPlacement;
+
+  const { pageIdentifier, platform, producerId, statsDestination } =
+    eventTrackingContext;
+
+  const campaignID = props?.campaignID || eventTrackingContext?.campaignID;
+
+  const atiClickTrackingUrl = buildATIEventTrackUrl({
+    pageIdentifier,
+    producerId,
+    platform,
+    statsDestination,
+    componentName,
+    campaignID,
+    format,
+    type: EVENT_TYPE,
+    advertiserID,
+    url,
+    detailedPlacement,
+  });
+
+  return atiClickTrackingUrl;
+};
+
 export default useClickTrackerHandler;

src/app/hooks/useClickTrackerHandler/index.test.jsx

@@ -16,7 +16,9 @@ import {
 import * as serviceContextModule from '../../contexts/ServiceContext';
 
 import pidginData from './fixtureData/tori-51745682.json';
-import useClickTrackerHandler from '.';
+import useClickTrackerHandler, {
+  useConstructLiteSiteATIEventTrackUrl,
+} from '.';
 
 const trackingToggleSpy = jest.spyOn(trackingToggle, 'default');
 
@@ -588,3 +590,22 @@ describe('Error handling', () => {
     expect(global.fetch).not.toHaveBeenCalled();
   });
 });
+
+describe('Lite Site - Click tracking', () => {
+  it('Returns a valid ati tracking url given the input props', () => {
+    const { result } = renderHook(
+      () =>
+        useConstructLiteSiteATIEventTrackUrl({
+          ...defaultProps,
+          campaignID: 'custom-campaign',
+        }),
+      {
+        wrapper,
+      },
+    );
+
+    expect(result.current).toContain(
+      'atc=PUB-[custom-campaign]-[brand]-[]-[CHD=promo::2]-[]-[]-[]-[]&type=AT',
+    );
+  });
+});

src/global.d.ts

@@ -19,6 +19,7 @@ declare global {
       bootstrap: () => void;
       cmd: { push: () => void };
     };
+    sendBeaconLite: (url: string, data?: BodyInit | null) => boolean;
   }
 }
 

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/liteATIClickTracking';
 import { BaseRendererProps } from './types';
 
 interface Props extends BaseRendererProps {
@@ -24,6 +25,11 @@ export default function LitePageRenderer({
         {helmetLinkTags}
         {helmetScriptTags}
         <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(${trackingScript.toString()})()`,
+          }}
+        />
       </head>
       <body>{bodyContent}</body>
     </html>

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() {
+  window.addEventListener('load', function () {
+    document.addEventListener('click', function (event) {
+      var targetElement = event.target;
+      // eslint-disable-next-line no-undef
+      if ((targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === 'A') {
+        event.stopPropagation();
+        event.preventDefault();
+        var atiURL = targetElement.getAttribute('data-ati-tracking');
+        if (atiURL == null) {
+          return;
+        }
+        var currentAnchorElement = event.currentTarget;
+        var nextPageUrl = currentAnchorElement === null || currentAnchorElement === void 0 ? void 0 : currentAnchorElement.href;
+        var _window = window,
+          _window$screen = _window.screen,
+          width = _window$screen.width,
+          height = _window$screen.height,
+          colorDepth = _window$screen.colorDepth,
+          pixelDepth = _window$screen.pixelDepth,
+          innerWidth = _window.innerWidth,
+          innerHeight = _window.innerHeight;
+        var now = new Date();
+        var hours = now.getHours();
+        var mins = now.getMinutes();
+        var secs = now.getSeconds();
+
+        // COOKIE SETTINGS
+        var cookieName = 'atuserid';
+        var expires = 397; // expires in 13 months
+        var cookiesForPage = "; ".concat(document.cookie);
+        var atUserIdCookie = cookiesForPage.split("; ".concat(cookieName, "="));
+        var atUserIdValue = null;
+        if (atUserIdCookie.length === 2) {
+          var _atUserIdCookie$pop;
+          var cookieInfo = (_atUserIdCookie$pop = atUserIdCookie.pop()) === null || _atUserIdCookie$pop === void 0 ? void 0 : _atUserIdCookie$pop.split(';').shift();
+          if (cookieInfo) {
+            var decodedCookie = decodeURI(cookieInfo);
+            var user = JSON.parse(decodedCookie);
+            atUserIdValue = user.val;
+          }
+        }
+        if (!atUserIdValue && crypto.randomUUID) {
+          atUserIdValue = crypto.randomUUID();
+        }
+        var stringifiedCookieValue = JSON.stringify({
+          val: atUserIdValue
+        });
+        if (atUserIdValue) {
+          document.cookie = "".concat(cookieName, "=").concat(stringifiedCookieValue, "; path=/; max-age=").concat(expires, ";");
+        }
+        var rValue = [width || 0, height || 0, colorDepth || 0, pixelDepth || 0].join('x');
+        var reValue = [innerWidth || 0, innerHeight || 0].join('x');
+        var hlValue = [hours, mins, secs].join('x');
+        var clientSideAtiURL = atiURL.concat('&', 'r=', rValue).concat('&', 're=', reValue).concat('&', 'hl=', hlValue);
+        if (navigator.language) {
+          clientSideAtiURL = clientSideAtiURL.concat('&', 'lng=', navigator.language);
+        }
+        if (atUserIdValue) {
+          clientSideAtiURL = clientSideAtiURL.concat('&', 'idclient=', atUserIdValue);
+        }
+
+        // eslint-disable-next-line no-undef -- This is provided in a helmet script
+        window.sendBeaconLite(clientSideAtiURL);
+        window.location.assign(nextPageUrl);
+      }
+    });
+  });
+})()
+    </script>
   </head>
   <body>
     <div>

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

@@ -0,0 +1,118 @@
+import trackingScript from '.';
+
+const dispatchClick = (targetElement: HTMLElement) => {
+  document.body.appendChild(targetElement);
+  const event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  });
+  targetElement.dispatchEvent(event);
+};
+
+describe('Click tracking script', () => {
+  const randomUUIDMock = jest.fn();
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers().setSystemTime(new Date(1731515402000));
+
+    trackingScript();
+
+    document.cookie =
+      'atuserid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    delete window.location;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.location = {
+      assign: jest.fn(),
+    };
+
+    window.sendBeaconLite = jest.fn();
+
+    Object.defineProperty(global, 'crypto', {
+      value: {
+        randomUUID: randomUUIDMock,
+      },
+    });
+
+    window.dispatchEvent(new Event('load'));
+  });
+
+  it('Sets a new cookie if there is no atuserid cookie on the user browser', () => {
+    const anchorElement = document.createElement('a');
+    anchorElement.setAttribute(
+      'data-ati-tracking',
+      'https://logws1363.ati-host.net/?',
+    );
+
+    randomUUIDMock.mockReturnValueOnce('randomUniqueId');
+    dispatchClick(anchorElement);
+
+    expect(document.cookie).toBe('atuserid={"val":"randomUniqueId"}');
+  });
+
+  it('Reuses the atuserid cookie if there is a atuserid cookie on the user browser', () => {
+    const anchorElement = document.createElement('a');
+    anchorElement.setAttribute(
+      'data-ati-tracking',
+      'https://logws1363.ati-host.net/?',
+    );
+
+    document.cookie = 'atuserid={"val":"oldCookieId"}';
+    randomUUIDMock.mockReturnValueOnce('newCookieId');
+    dispatchClick(anchorElement);
+
+    const callParam = (window.sendBeaconLite as jest.Mock).mock.calls[0][0];
+
+    expect(callParam).toContain('idclient=oldCookieId');
+  });
+
+  it('Calls sendBeaconLite() with the correct url', () => {
+    const anchorElement = document.createElement('a');
+    anchorElement.setAttribute(
+      'data-ati-tracking',
+      'https://logws1363.ati-host.net/?',
+    );
+
+    window.screen = {
+      width: 100,
+      height: 400,
+      colorDepth: 24,
+      pixelDepth: 24,
+      availWidth: 400,
+      availHeight: 100,
+      orientation: 'landscape' as unknown as ScreenOrientation,
+    };
+    window.innerWidth = 4060;
+    window.innerHeight = 1080;
+    Object.defineProperty(navigator, 'language', {
+      get() {
+        return 'en-GB';
+      },
+    });
+
+    dispatchClick(anchorElement);
+
+    const callParam = (window.sendBeaconLite as jest.Mock).mock.calls[0][0];
+
+    const parsedATIParams = Object.fromEntries(new URLSearchParams(callParam));
+
+    expect(parsedATIParams).toMatchObject({
+      hl: '16x30x2',
+      lng: 'en-GB',
+      r: '0x0x24x24',
+      re: '4060x1080',
+    });
+  });
+
+  it('Does not call sendBeacon if the event has no data-ati-tracking parameter', () => {
+    const anchorElement = document.createElement('a');
+
+    dispatchClick(anchorElement);
+
+    expect(window.sendBeaconLite).toHaveBeenCalledTimes(0);
+  });
+});