WS-2215 - Analytics tracking on UAS and IDCTA events - #14008
Closed
jinidev wants to merge 2 commits into
Closed
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends Simorgh’s ATI/Reverb analytics so that user authentication state (isSignedIn) and an optional user identifier (hashedId, from ckns_sylphid) are propagated into page + event beacons, and adds view/click tracking for key UAS/IDCTA UI components (Account header, account promo banner, save article button). It also adds ATI page tracking to the Next.js “My News” page via pageIdentifier: 'my-news.page'.
Changes:
- Propagate
isSignedIn/hashedIdthrough ATI/Reverb page and event models, beacon sending, and event-tracking context extraction. - Add
useUserTrackingDatahook and wire it into analytics entry points (ATIAnalytics + EventTrackingContextProvider). - Add view/click event tracking to AccountHeader, AccountPromotionalBanner, and SaveArticleButton; add ATI page tracking for My News.
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| ws-nextjs-app/pages/[service]/my-news/MyNewsPage.tsx | Adds ATIAnalytics rendering and accepts pageData so My News can emit ATI page view beacons. |
| ws-nextjs-app/pages/[service]/my-news/index.page.tsx | Adds atiAnalytics.pageIdentifier = 'my-news.page' to SSR pageData. |
| src/global.d.ts | Updates window.bbcuser.getHashedId typing to async (Promise<string | null>). |
| src/app/models/types/eventTracking.ts | Extends event tracking context type to include optional isSignedIn/hashedId. |
| src/app/lib/analyticsUtils/sendBeacon/index.ts | Populates window.bbcuser.getHashedId() from userVars.hashedId. |
| src/app/lib/analyticsUtils/extractATITrackingProps/index.ts | Passes isSignedIn/hashedId through extracted tracking props. |
| src/app/hooks/useUserTrackingData/index.ts | New hook to read signed-in state + ckns_sylphid hashed ID (client) and expose them for analytics. |
| src/app/hooks/useCustomEventTracker/index.tsx | Includes isSignedIn/hashedId in custom event beacons. |
| src/app/hooks/useClickTrackerHandler/index.jsx | Includes isSignedIn/hashedId in click beacons. |
| src/app/contexts/EventTrackingContext/index.tsx | Injects user tracking data into the event tracking context and fixes required-props validation. |
| src/app/components/SaveArticleButton/index.tsx | Adds view/click tracking with dynamic component names + resourceId item tracking. |
| src/app/components/ATIAnalytics/types.ts | Extends ATI/Reverb types to include optional hashedId and user fields on page/event props. |
| src/app/components/ATIAnalytics/params/index.ts | Forwards isSignedIn/hashedId into page reverb param building. |
| src/app/components/ATIAnalytics/params/buildParams/index.ts | Adds isSignedIn/hashedId into built ATI params and reverb page params. |
| src/app/components/ATIAnalytics/index.tsx | Uses useUserTrackingData and includes the values in the page beacon model. |
| src/app/components/ATIAnalytics/beacon/index.ts | Forwards isSignedIn/hashedId to the event beacon model. |
| src/app/components/ATIAnalytics/atiUrl/index.ts | Adds hashedId into the Reverb user object for page + event models. |
| src/app/components/Account/AccountPromotionalBanner/index.tsx | Adds view tracking and click tracking for close/sign-in/register interactions. |
| src/app/components/Account/AccountHeader/index.tsx | Adds view tracking and click tracking with dynamic component naming for signed-in vs signed-out. |
Comments suppressed due to low confidence (1)
src/app/components/ATIAnalytics/params/buildParams/index.ts:68
buildPageATIParamsnow always includesisSignedInandhashedIdin its returned object. There are existing unit tests that assert exact equality for these params (e.g.src/app/components/ATIAnalytics/params/buildParams/index.test.ts), which will fail unless updated to include the new keys (or to use partial matching).
export const buildPageATIParams = ({
atiData,
requestContext,
serviceContext,
isSignedIn = false,
hashedId = null,
}: ATIDataWithContexts & {
isSignedIn?: boolean;
hashedId?: string | null;
}) => {
const { isUK, platform, statsDestination } = requestContext;
const {
atiAnalyticsAppName,
atiAnalyticsProducerId,
atiAnalyticsProducerName,
lang,
service,
} = serviceContext;
const {
campaigns,
categoryName,
contentId,
contentType,
language,
ldpThingIds,
ldpThingLabels,
nationsProducer,
pageIdentifier,
pageTitle,
producerId,
timePublished,
timeUpdated,
ampExperimentName,
experimentName,
experimentVariant,
} = atiData;
return {
appName: atiAnalyticsAppName,
campaigns,
categoryName,
contentId,
contentType,
isUK,
language: language || lang,
ldpThingIds,
ldpThingLabels,
libraryVersion: LIBRARY_VERSION,
nationsProducer,
pageIdentifier,
pageTitle,
platform,
producerId: producerId || atiAnalyticsProducerId,
producerName: atiAnalyticsProducerName,
service,
statsDestination,
timePublished,
timeUpdated,
isSignedIn,
hashedId,
...(ampExperimentName && { ampExperimentName }),
...(experimentName && { experimentName }),
...(experimentVariant && { experimentVariant }),
};
| buttonSeparatorText={buttonSeparatorText} | ||
| isDismissible | ||
| onClose={handleCloseClick} | ||
| {...viewTracker} |
Comment on lines
58
to
111
| @@ -104,7 +106,8 @@ export const buildReverbAnalyticsModel = ({ | |||
| }, | |||
| }, | |||
| user: { | |||
| isSignedIn: false, | |||
| isSignedIn, | |||
| hashedId, | |||
| }, | |||
Comment on lines
30
to
78
| const { | ||
| pageIdentifier, | ||
| producerId, | ||
| platform, | ||
| statsDestination, | ||
| campaignID, | ||
| producerName, | ||
| isSignedIn, | ||
| hashedId, | ||
| } = extractATITrackingProps({ | ||
| eventType: VIEW_EVENT, | ||
| }); | ||
|
|
||
| const { trackingIsEnabled } = useTrackingToggle(); | ||
| const { service } = use(ServiceContext); | ||
|
|
||
| const trackEvent = useCallback( | ||
| async (stringifiedData = '') => { | ||
| if (!trackingIsEnabled || !eventName) return; | ||
|
|
||
| const shouldSendEvent = [ | ||
| campaignID, | ||
| eventName, | ||
| pageIdentifier, | ||
| platform, | ||
| producerId, | ||
| producerName, | ||
| service, | ||
| statsDestination, | ||
| ].every(Boolean); | ||
|
|
||
| if (shouldSendEvent) { | ||
| try { | ||
| await sendEventBeacon({ | ||
| type: VIEW_EVENT, | ||
| eventGroupingName: eventName, | ||
| componentName: stringifiedData, | ||
| campaignID, | ||
| pageIdentifier, | ||
| platform, | ||
| producerId, | ||
| producerName, | ||
| service, | ||
| statsDestination, | ||
| experimentName, | ||
| experimentVariant, | ||
| isSignedIn, | ||
| hashedId, | ||
| }); |
Comment on lines
4
to
21
| export default ({ | ||
| requestContext, | ||
| serviceContext, | ||
| atiData, | ||
| }: ReverbDetailsProviders) => { | ||
| return buildPageReverbParams({ atiData, requestContext, serviceContext }); | ||
| isSignedIn, | ||
| hashedId, | ||
| }: ReverbDetailsProviders & { | ||
| isSignedIn?: boolean; | ||
| hashedId?: string | null; | ||
| }) => { | ||
| return buildPageReverbParams({ | ||
| atiData, | ||
| requestContext, | ||
| serviceContext, | ||
| isSignedIn, | ||
| hashedId, | ||
| }); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves JIRA: https://bbc.atlassian.net/browse/WS-2215
Summary
Track UAS SaveForLater and IDCTA account‑related view and click events
Code changes
User Authentication Data Propagation:
Added
isSignedInandhashedIdto analytics model and event tracking types, ensuring these user properties are passed through all relevant functions and components, includingbuildReverbAnalyticsModel,buildReverbEventModel, and their respective parameter builders.Updated the
EventTrackingContextProviderand the main analytics entry point to use theuseUserTrackingDatahook, makingisSignedInandhashedIdavailable in analytics contexts and ensuring they're included in all analytics payloads.Component-Level Event Tracking Enhancements:
useViewTrackeranduseClickTrackerHandlerhooks intoAccountHeader,AccountPromotionalBanner, andSaveArticleButtoncomponents, enabling detailed view and click analytics for these UI elements. This includes dynamic component naming for click events and passing relevant tracking data (such as resource IDs).Analytics Hook Improvements:
isSignedInandhashedIdas part of event tracking data, ensuring user authentication state is included with each event.These changes collectively improve the granularity and accuracy of analytics, especially regarding user authentication state, and ensure that key user interactions are tracked in detail.
Testing
Event names :
SaveArticleButton :
save-article-button-click-save and save-article-button-click-remove for button clicks
save-article-button-view - for view
Piano dashboard - https://analytics.piano.io/dataquery/#/designer?reportid=69fc727210a9df2f7a011419
AccountPromotionalBanner:
account-promotional-banner - for view
account-promotional-banner-close - for closing
account-promotional-banner-sign-in - for signin click
account-promotional-banner-register - for register click
Account header:
account-header - for view
account-header-settings - for settings click
account-header-sign-in - for signin click
Piano Dashboard - https://analytics.piano.io/dataquery/#/designer?reportid=6a033bbb5e9acc6f81847ccb
MyNews page:
my_news.page - for the view of page
Piano dashboard -https://analytics.piano.io/dataquery/#/designer?reportid=69fde2d421b0d1e734c23d33