Fix Affiliate Disclaimer tracking

[GHaberis]

What does this change?

Introduces an Ophan tracking event to detect when the Affiliate Disclaimer has been rendered. Changes in order to achieve this:

• Split out the AffiliateDisclaimer, AffiliateDisclaimerInline and GalleryAffiliateDisclaimer components previously exported by AffiliateDisclaimer.tsx in to 3 seperate importable modules AffiliateDisclaimer.importable.tsx, AffiliateDisclaimerInline.importable.tsx and GalleryAffiliateDisclaimer.importable.tsx - it's a requirement of Islands that the component matches the module name.
• Wrap references to the components AffiliateDisclaimer, AffiliateDisclaimerInline and GalleryAffiliateDisclaimer in <Island /> components as they will now rehydrate in the client.
• Introduce a new module affiliateDisclaimerHelpers.tsx for providing shared logic eg. the tracking logic and the disclaimer text component, this is shared by AffiliateDisclaimer.importable.tsx, AffiliateDisclaimerInline.importable.tsx and GalleryAffiliateDisclaimer.importable.tsx
• Updates the @guardian/ophan-tracker-js library to the latest version which includes the new component type AFFILIATE_DISCLAIMER

[github-actions]

Deploy build 23644 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 23644 of dotcom:rendering-all to CODE
• Deploy parts of build 23644 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[GHaberis]

@guardian/the-filter I wouldn't mind getting some feedback on this WIP. I've made the change to split out the 3 components AffiliateDisclaimer, AffiliateDisclaimerInline and GalleryAffiliateDisclaimer into 3 separate modules - which has resolved the issue we were seeing with AffiliateDisclaimer.importable.tsx having multiple named exports.

However when doing so I noted 2 Affiliate Disclaimer detect tracking events being fired on an article with affiliate links, this was because 2 affiliate disclaimers were rendered, although only 1 is actually displayed on the page dependent on breakpoint. We only want 1 event fired so I applied a workaround by tracking affiliateDisclaimerDetectTracked (see my comment in affiliateDisclaimerHelpers.ts).

An alternative option I'd considered was to switch to 'view' instead of 'idle' in the code below...

<Island priority="enhancement" defer={{ until: 'idle' }}>
  <AffiliateDisclaimer />
</Island>

becomes...

<Island priority="enhancement" defer={{ until: 'view' }}>
  <AffiliateDisclaimer />
</Island>

This would mean the tracking event is only fired if the Affiliate Disclaimer is viewed so we wouldn't trigger the event for disclaimers rendered but not visible, if I were to do this I'd update the event action from 'DETECT' to 'VIEW' which is more accurate.

[emma-imber]

@guardian/the-filter I wouldn't mind getting some feedback on this WIP. I've made the change to split out the 3 components AffiliateDisclaimer, AffiliateDisclaimerInline and GalleryAffiliateDisclaimer into 3 separate modules - which has resolved the issue we were seeing with AffiliateDisclaimer.importable.tsx having multiple named exports.

However when doing so I noted 2 Affiliate Disclaimer detect tracking events being fired on an article with affiliate links, this was because 2 affiliate disclaimers were rendered, although only 1 is actually displayed on the page dependent on breakpoint. We only want 1 event fired so I applied a workaround by tracking affiliateDisclaimerDetectTracked (see my comment in affiliateDisclaimerHelpers.ts).

An alternative option I'd considered was to switch to 'view' instead of 'idle' in the code below...

<Island priority="enhancement" defer={{ until: 'idle' }}>
  <AffiliateDisclaimer />
</Island>

becomes...

<Island priority="enhancement" defer={{ until: 'view' }}>
  <AffiliateDisclaimer />
</Island>

This would mean the tracking event is only fired if the Affiliate Disclaimer is viewed so we wouldn't trigger the event for disclaimers rendered but not visible, if I were to do this I'd update the event action from 'DETECT' to 'VIEW' which is more accurate.

Is this a good use case for something like useOnce? Looks like this provides an existing way of doing what you've described, so you would replace checking the value of affiliateDisclaimerDetectTracked with this. I can see this function is used as a wrapper for some other component events in DCAR

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 417 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 417 of dotcom:ab-testing to CODE
• Deploy parts of build 417 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.