Lite ATI Analytics script

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import {
   render,
   act,
@@ -30,6 +31,28 @@ describe('Canonical ATI Analytics', () => {
     expect(mockSendBeacon).toHaveBeenCalledWith(expectedUrl);
   });
 
+  it('should render lite Helmet script when isLite is true', () => {
+    jest.spyOn(isOperaProxy, 'default').mockImplementation(() => false);
+
+    const expectedUrl = `${atiBaseUrl}${mockPageviewParams}`;
+
+    act(() => {
+      render(<CanonicalATIAnalytics pageviewParams={mockPageviewParams} />, {
+        isLite: true,
+      });
+    });
+
+    const helmet = Helmet.peek();
+
+    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();
+`);
+  });
+
   it('should not send beacon when browser is Opera Mini', () => {
     jest.spyOn(isOperaProxy, 'default').mockImplementation(() => true);
 

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

@@ -1,25 +1,21 @@
-import React, { useContext, useEffect, useState, Fragment } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import { RequestContext } from '#app/contexts/RequestContext';
 import isOperaProxy from '#app/lib/utilities/isOperaProxy';
 import { Helmet } from 'react-helmet';
 import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
 import { ATIAnalyticsProps } from '../types';
 import sendBeaconOperaMiniScript from './sendBeaconOperaMiniScript';
+import sendBeaconLite from './sendBeaconLite';
 
 const getNoJsATIPageViewUrl = (atiPageViewUrl: string) =>
   atiPageViewUrl.includes('x8=[simorgh]')
     ? atiPageViewUrl.replace('x8=[simorgh]', 'x8=[simorgh-nojs]')
     : `${atiPageViewUrl}&x8=[simorgh-nojs]`;
 
-const renderNoScriptTrackingPixel = (
-  atiPageViewUrl: string,
-  isLite: boolean,
-) => {
-  const ImgPixelWrapper = isLite ? Fragment : 'noscript';
-
+const renderNoScriptTrackingPixel = (atiPageViewUrl: string) => {
   return (
-    <ImgPixelWrapper>
+    <noscript>
       <img
         height="1px"
         width="1px"
@@ -30,7 +26,7 @@ const renderNoScriptTrackingPixel = (
         style={{ position: 'absolute' }}
         src={getNoJsATIPageViewUrl(atiPageViewUrl)}
       />
-    </ImgPixelWrapper>
+    </noscript>
   );
 };
 
@@ -44,6 +40,16 @@ const addOperaMiniExtremeScript = (atiPageViewUrlString: string) => {
   );
 };
 
+const addLiteScript = (atiPageViewUrlString: string) => {
+  const script = sendBeaconLite(atiPageViewUrlString);
+
+  return (
+    <Helmet>
+      <script type="text/javascript">{script}</script>
+    </Helmet>
+  );
+};
+
 const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
   const { isLite } = useContext(RequestContext);
 
@@ -58,8 +64,9 @@ const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
 
   return (
     <>
-      {addOperaMiniExtremeScript(atiPageViewUrlString)}
-      {renderNoScriptTrackingPixel(atiPageViewUrl, isLite)}
+      {isLite && addLiteScript(atiPageViewUrlString)}
+      {!isLite && addOperaMiniExtremeScript(atiPageViewUrlString)}
+      {renderNoScriptTrackingPixel(atiPageViewUrl)}
     </>
   );
 };

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

@@ -0,0 +1,35 @@
+/* eslint-disable no-eval */
+import sendBeaconLite from './sendBeaconLite';
+
+let XMLHttpRequestSpy: jest.SpyInstance<XMLHttpRequest | undefined, []>;
+
+describe('sendBeaconLite', () => {
+  const XMLHttpRequestMock: Partial<XMLHttpRequest> = {
+    open: jest.fn(),
+    withCredentials: false,
+    send: jest.fn(),
+  };
+
+  beforeEach(() => {
+    XMLHttpRequestSpy = jest.spyOn(window, 'XMLHttpRequest');
+  });
+
+  afterEach(() => {
+    XMLHttpRequestSpy.mockRestore();
+    jest.clearAllMocks();
+  });
+
+  it('should send beacon with XHR', () => {
+    XMLHttpRequestSpy.mockImplementation(
+      () => XMLHttpRequestMock as XMLHttpRequest,
+    );
+
+    eval(sendBeaconLite('https://foobar.com'));
+
+    expect(XMLHttpRequestMock.open).toHaveBeenCalledWith(
+      'GET',
+      'https://foobar.com',
+      true,
+    );
+  });
+});

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

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