[WS-1086 Spike] - Add read time to promo click tracking on homepages

[hotinglok]

Resolves JIRA: Summary

This objective of this spike was to provide more information on how to best add the read time to the tracking of individual promos when clicked on in the homepages.

This PR demonstrates a possible implementation in conjunction with the prototype frontend work from https://github.com/bbc/simorgh/pull/13080.

Notable points of discovery:

• There are currently two 'base' Promo components.
  • This legacy Promo component used in the Curations written in JS
  • This OptimoPromos component which is used in a wider variety of places written in TS
• The legacy Promo component does not have any tracking in the component itself, whereas OptimoPromos has an eventTrackingData prop and makes use of the viewability model.
• Prior to the work done in https://github.com/bbc/simorgh/pull/13078, part of this spike was trying to determine whether it would make more sense to just add tracking to the legacy Promo component using the useClickTracker() hook in a similar fashion to how it is implemented in OptimoPromos, or whether it would be worth refactoring the Curations to use the newer OptimoPromo which already allows tracking to be added.
  • Given that https://github.com/bbc/simorgh/pull/13078 is completed and merged now, it probably makes more sense for the work related to the read time experiment on home pages to go with an approach that builds on this rather than refactor relevant components to use the OptimoPromos component instead. However, this should be further explored as tech debt elsewhere.
  • Minimal changes were required to add the read time data to the tracking object following these changes.

Code changes

• Adds read time as label and duration in the select event sent when a promo is clicked in Grid Components (both HierarchicalGrid and CurationGrid)
  • These were based on how the events were setup for the Article page experiment, though these can be changed if necessary.
• Adds read time as optional parameter in buildPromoEventTrackingData

Testing

• [x] Manual Testing required?
  • [x] Local (Ready-For-Test, Local)
  • [ ] Test (Ready-For-Test, Test)
  • [ ] Preview (Ready-For-Test, Preview)
  • [ ] Live (Ready-For-Test, Live)
• [ ] Manual Testing complete?
  • [ ] Local
  • [ ] Test
  • [ ] Preview
  • [ ] Live

Additional Testing Steps

Verify that the select event is sent when a Promo on the homepage is clicked and that the read time can be found in the payload.

1. Visit any homepage (e.g. http://localhost:7080/pidgin?renderer_env=live)
2. When inspecting the page, reload the page and view the events either under the Network tab or the Tag Inspector (Tag Inspector was less reliable when it came to seeing the select event however).
3. If using the Network tab, ensure 'Preserve log' is checked.
4. Click on a promo, verify the event is sent with the correct payload (The event should begin with hit.xiti?s) Example payload of random promo from Pidgin homepage:

[
  {
    name: 'viewability.select',
    data: {
      group: {
        name: 'Top Tori',
        type: 'hierarchical-curation-grid',
        item_count: 9,
        resource_id: 'urn:bbc:tipo:list:41c2dccc-4711-4e01-85d4-72d531765fa8',
        position: 1,
      },
      event: { category: 'viewability', action: 'select' },
      user: { id: null },
      app: { type: 'responsive', name: 'news-pidgin' },
      item: {
        name: 'hierarchical-curation-grid',
        link: 'https://www.bbc.com/pidgin/articles/cx2xz74ye56o',
        type: 'hierarchical-curation-grid-promo',
        text: 'Wetin be geo-tagging of PoS wey CBN give operators ultimatum to activate and how e go work in 60 days',
        position: 2,
        duration: 300000,
        media_type: 'article',
        label: 'Read time: 5 minutes',
        resource_id: 'cx2xz74ye56o',
      },
    },
  },
];

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.