Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lite ATI Analytics script #12053

Merged
merged 13 commits into from
Nov 7, 2024
Merged

Lite ATI Analytics script #12053

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6df3da3
Lite ATI Analytics script
amoore108 Oct 16, 2024
2efc71b
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 17, 2024
8456020
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 17, 2024
81e87b6
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 17, 2024
79253df
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 22, 2024
9536fb6
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 23, 2024
6822fa0
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 25, 2024
9fbfb27
Merge branch 'latest' into lite-atianalytics-script
amoore108 Oct 31, 2024
036d4db
Merge branch 'latest' into lite-atianalytics-script
amoore108 Nov 4, 2024
c15a183
Merge branch 'latest' into lite-atianalytics-script
amoore108 Nov 4, 2024
cb94ab5
Separate Lite beacon into own file
amoore108 Nov 4, 2024
c26ce42
Merge branch 'latest' into lite-atianalytics-script
amoore108 Nov 7, 2024
f6b21a6
Merge branch 'latest' into lite-atianalytics-script
amoore108 Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/app/components/ATIAnalytics/canonical/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import {
render,
act,
Expand Down Expand Up @@ -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);

Expand Down
33 changes: 22 additions & 11 deletions src/app/components/ATIAnalytics/canonical/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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';
Expand All @@ -12,14 +12,9 @@ const getNoJsATIPageViewUrl = (atiPageViewUrl: string) =>
? 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"
Expand All @@ -30,7 +25,7 @@ const renderNoScriptTrackingPixel = (
style={{ position: 'absolute' }}
src={getNoJsATIPageViewUrl(atiPageViewUrl)}
/>
</ImgPixelWrapper>
</noscript>
);
};

Expand All @@ -44,6 +39,21 @@ const addOperaMiniExtremeScript = (atiPageViewUrlString: string) => {
);
};

const addLiteScript = (atiPageViewUrlString: string) => {
return (
<Helmet>
<script type="text/javascript">
{`
var xhr = new XMLHttpRequest();
xhr.open("GET", "${atiPageViewUrlString}", true);
xhr.withCredentials = true;
xhr.send();
`}
</script>
amoore108 marked this conversation as resolved.
Show resolved Hide resolved
</Helmet>
);
};

const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {
const { isLite } = useContext(RequestContext);

Expand All @@ -58,8 +68,9 @@ const CanonicalATIAnalytics = ({ pageviewParams }: ATIAnalyticsProps) => {

return (
<>
{addOperaMiniExtremeScript(atiPageViewUrlString)}
{renderNoScriptTrackingPixel(atiPageViewUrl, isLite)}
{isLite && addLiteScript(atiPageViewUrlString)}
{!isLite && addOperaMiniExtremeScript(atiPageViewUrlString)}
{renderNoScriptTrackingPixel(atiPageViewUrl)}
Comment on lines +67 to +68
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just thinking out loud here... what happens if the user views the lite site on opera mini? 😰

I think we're OK, but just wanted to check.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be ok. The Lite script is basically identical to the Opera Mini script, so they'll get the same behaviour.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And there's no danger of analytics being sent twice?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be something we'll need to test on Opera Mini.

It was hard to diagnose at the time with the duplicate events, but my theory was that React hydration played a part with react-helmet. The way it behaves is it renders on the server once, then remounts the <Helmet> tags again on hydration. Lite skips out hydration, so in theory it shouldn't.

Its just hard to know how Opera Mini servers behave with this though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could literally do the exact same thing as we've done with Opera Mini and track if its been sent already in the window object. I don't think there is a problem with that on Lite, so maybe to be absolutely sure, we just copy the Opera Mini implementation?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that would work. I had thought that we might be able to consolidate both opera mini & lite implementations into a single script, but I think that would make things too complicated (and it is already complicated enough! 😰 )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea I'd prefer to keep them separate even if they're almost the same. The Lite version may be extended in the future to handle click events too.

</>
);
};
Expand Down
Loading