WSTEAM1-1514: Lite Site Piano Analytics - Spike

[shayneahchoon]

Resolves JIRA WSTEAM1-1514

Overall changes

A very high-level summary of easily-reproducible changes that can be understood by non-devs, and why these changes where made.

Code changes

• A bullet point list of key code changes that have been made.

Testing

1. 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

[karinathomasbbc]

A general comment - we mentioned that we wanted to add click tracking to the LiteSiteCTA button - could we carve it out into a separate PR (so that it could be merged sooner, and we can start getting metrics), or does it need to be included in this one?

[karinathomasbbc]

Should we make 'add-lite-tracker-params' into a const somewhere which we can reuse in other places?

Suggested change

	{...(liteUrl && {'add-lite-tracker-params': liteUrl})}
	{...(liteUrl && {LITE_TRACKER_PARAM: liteUrl})}

[karinathomasbbc]

I know this is just a spike, but what is this value supposed to be - the .lite version of the page it's on?

[karinathomasbbc]

Again, I know this is a spike, but when it comes to productionising this, can we add a test of some sort (perhaps a snapshot 🤢 ) - to make sure that this functionality doesn't break if we make changes. I don't want us to have to regression test this every time we make a change. (🤞 we never need to change it!!)

[karinathomasbbc]

Also just a question - are we essentially recreating, but simplifying what the current ATI script does in this function? Is there any other way of doing this without this level of hardcoding in a script? 😬

[amoore108]

Don't want to over solutionise since its a spike. But one way I had in my head was creating a top-level listener in the very root LiteRenderer component to hook into the JS event bubbling system:

        <script
          dangerouslySetInnerHTML={{
            __html: `
            window.addEventListener("load", (event) => {
              // listen for all clicks
              document.addEventListener("click", (e) => {
                if (e.target.tagName === "A") {
                  // Your existing 'liteTrackingScript' logic here
                }
              });  
            });
          `,
          }}
        />

That would listen for all clicks on the page. You could then store your ATI tracking metadata as a data attribute, like:

<a href="..." data-ati-tracking="https://logws1363.ati-host.net?s=598343&s2=70&p=pidgin.articles.cd14lllvdveo.page&atc=PUB-[article]-[most-read]-[]-[]-[pidgin.articles.cd14lllvdveo.page]-[]-[]-[]&type=AT">...</a>

Then in your liteTrackerFunction grab the data like:

const atiTracking = e.target.getAttribute("data-ati-tracking");
...rest

This would save the custom Lite transformer function and adding onclick to anchor tags. The Lite transformer function is probably fast enough, but the more and more we add the slower the actual page response will be as its regex matching on a giant HTML string.

[amoore108]

Looks like its possible though from the spike, nice work!

[karinathomasbbc]

Can we rename this so that it's more representative of what it does?

Suggested change

	export const constructLiteSiteURL = props => {
	export const constructLiteSiteATIURL = props => {

[andrewscfc]

Beware of injection attack vectors here

[andrewscfc]

For production we'd need to make sure this code worked on all our supported browsers, it's not been through a transpiler so it may not work on certain browsers - Opera is a pretty good test case.

[andrewscfc]

Suggested change

	}, Object.keys(beaconProps));
	}, beaconProps);

Is the change you made here functionally equivalent to what was there before the refactor? I think this is passing the names of the props rather than the new dependency beaconProps?