Move chartbeat out of unmount and refactor to avoid unwanted reloading

[dr3]

Is your feature request related to a problem? Please describe.
Our current chartbeat code is run inside the article main. This means it gets unmounted when you navigate to a new article (due to the loading screen).

Currently the unmounting logic causes issues as it reinitialises charbeat by reloading the script again.

It also doesnt call window.pSUPERFLY.virtualPage in the right place, calling it on unmount instead of when a new article is loaded.

Describe the solution you'd like
Move the chartbeat logic into pageWrapper or contexts, (or anouther new layer above withLoading to avoid being unmounted.

Possible sollution:
Move it into UserContext (or anouther context), creating a useChartbeat function which takes config as an argument. When useChartbeat is first called it renders the scripts using helmet (and never unmounts them).

If the config argument changes (data changes), the useChartbeat function will call window.pSUPERFLY.virtualPage for you.

We need to be very careful to use the useEffect hook properly. The config object should only change when data changes, not on renders. If this is done wrong, even if config is regenerated the same across the renders, useEffect will see it as a new object, calling window.pSUPERFLY.virtualPage too many times

Testing notes
This issue will require a complete testing of chartbeat functionality on articles pages when this refactor is done.

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.

[jamesdonoh]

Allthough the PoC above was merged the next steps for this issue are to determine if there is a more optimal solution and refactor as required.

[jroebu14]

Needs investigation to see if the current chartbeat implementation is up to scratch. Worth checking test coverage too. A senior could pair with someone on this

[jroebu14]

@jamesdonoh

Myself and Andrew have been pairing on this issue and we would like some context around why it is necessary to use the window.pSUPERFLY.virtualPage API for onward journeys? Can we instead just rely on the IIFE with the async chartbeat script tag being called on every article render?

[rhenshaw56]

Myself and Andrew have been pairing on this issue and we would like some context around why it is necessary to use the window.pSUPERFLY.virtualPage API for onward journeys? ?

@jroebu14 IIFE with the async chartbeat script tag just initialises chartbeat. If this wasn't an SPA we could do without window.pSUPERFLY.virtualPage as their script sufficiently handles this for non-spa sites but it's recommended in their docs to do this to update most of the config values that have changed, in this case title, referrer, etc.