diff --git a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx index 78e1c4bc5c..b4c3d41f05 100644 --- a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx +++ b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx @@ -6,6 +6,7 @@ import Link from "@mui/material/Link"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { visuallyHidden } from "@mui/utils"; +import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider"; import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import Caret from "ui/icons/Caret"; @@ -140,6 +141,13 @@ const ResultReason: React.FC = ({ : "" }`; + const { trackBackwardsNavigationByNodeId } = useAnalyticsTracking(); + + const handleChangeAnswer = (id: string) => { + trackBackwardsNavigationByNodeId(id, "change"); + changeAnswer(id); + }; + return ( = ({ component="button" onClick={(event) => { event.stopPropagation(); - changeAnswer(id); + handleChangeAnswer(id); }} > Change diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx index 4c02645f18..984f5524ae 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx @@ -6,6 +6,7 @@ import { visuallyHidden } from "@mui/utils"; import { PASSPORT_UPLOAD_KEY } from "@planx/components/DrawBoundary/model"; import { TYPES } from "@planx/components/types"; import format from "date-fns/format"; +import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider"; import { Store, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; @@ -203,8 +204,11 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) { // For applicable component types, display a list of their question & answers with a "change" link // ref https://design-system.service.gov.uk/components/summary-list/ function SummaryList(props: SummaryListProps) { - const handleClick = (nodeId: string) => { - props.changeAnswer(nodeId); + const { trackBackwardsNavigationByNodeId } = useAnalyticsTracking(); + + const handleChangeAnswer = (id: string) => { + trackBackwardsNavigationByNodeId(id, "change"); + props.changeAnswer(id); }; return ( @@ -222,7 +226,7 @@ function SummaryList(props: SummaryListProps) {
{props.showChangeButton && ( handleClick(nodeId)} + onClick={() => handleChangeAnswer(nodeId)} component="button" fontSize="body2.fontSize" > diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx index d0c252e729..e965a3215c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx @@ -21,6 +21,7 @@ type AnalyticsLogDirection = export type HelpClickMetadata = Record; export type SelectedUrlsMetadata = Record<"selectedUrls", string[]>; +export type BackwardsNaviagtionInitiatorType = "change" | "back"; type NodeMetadata = { flagset?: FlagSet; @@ -29,6 +30,8 @@ type NodeMetadata = { description?: string; }; flag?: Flag; + title?: string; + type?: TYPES; }; let lastAnalyticsLogId: number | undefined = undefined; @@ -40,12 +43,17 @@ const analyticsContext = createContext<{ trackFlowDirectionChange: ( flowDirection: AnalyticsLogDirection, ) => Promise; + trackBackwardsNavigationByNodeId: ( + nodeId: string, + backwardsNavigationType: BackwardsNaviagtionInitiatorType, + ) => Promise; node: Store.node | null; }>({ createAnalytics: () => Promise.resolve(), trackHelpClick: () => Promise.resolve(), trackNextStepsLinkClick: () => Promise.resolve(), trackFlowDirectionChange: () => Promise.resolve(), + trackBackwardsNavigationByNodeId: () => Promise.resolve(), node: null, }); const { Provider } = analyticsContext; @@ -64,6 +72,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ resultData, previewEnvironment, flowId, + flow, ] = useStore((state) => [ state.currentCard, state.breadcrumbs, @@ -72,6 +81,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ state.resultData, state.previewEnvironment, state.id, + state.flow, ]); const node = currentCard(); const isAnalyticsEnabled = @@ -128,6 +138,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ trackHelpClick, trackNextStepsLinkClick, trackFlowDirectionChange, + trackBackwardsNavigationByNodeId, node, }} > @@ -296,6 +307,39 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ } } + async function trackBackwardsNavigationByNodeId( + nodeId: string, + initiator: BackwardsNaviagtionInitiatorType, + ) { + const targetNodeMetadata = getTitleAndTypeFromFlow(nodeId); + console.log("Target node info: ", targetNodeMetadata); + const metadata: Record = {}; + metadata[`${initiator}`] = targetNodeMetadata; + console.log("Metadata payload:", metadata); + + if (shouldTrackAnalytics && lastAnalyticsLogId) { + await publicClient.mutate({ + mutation: gql` + mutation UpdateHaInitiatedBackwardsNavigation( + $id: bigint! + $metadata: jsonb = {} + ) { + update_analytics_logs_by_pk( + pk_columns: { id: $id } + _append: { metadata: $metadata } + ) { + id + } + } + `, + variables: { + id: lastAnalyticsLogId, + metadata, + }, + }); + } + } + async function createAnalytics(type: AnalyticsType) { if (shouldTrackAnalytics) { const userAgent = Bowser.parse(window.navigator.userAgent); @@ -350,6 +394,15 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ return {}; } } + + function getTitleAndTypeFromFlow(nodeId: string) { + const { data, type } = flow[nodeId]; + const nodeMetadata: NodeMetadata = { + title: data?.text, + type: type, + }; + return nodeMetadata; + } }; /** diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx index 10f9c29ffd..e7b4012650 100644 --- a/editor.planx.uk/src/pages/Preview/Questions.tsx +++ b/editor.planx.uk/src/pages/Preview/Questions.tsx @@ -74,7 +74,8 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => { state.setPreviewEnvironment, ]); const isStandalone = previewEnvironment === "standalone"; - const { createAnalytics, node } = useAnalyticsTracking(); + const { createAnalytics, node, trackBackwardsNavigationByNodeId } = + useAnalyticsTracking(); const [gotFlow, setGotFlow] = useState(false); const isUsingLocalStorage = useStore((state) => state.path) === ApplicationPath.SingleSession; @@ -146,7 +147,10 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => { const goBack = useCallback(() => { const previous = previousCard(node); - if (previous) record(previous); + if (previous) { + trackBackwardsNavigationByNodeId(previous, "back"); + record(previous); + } }, [node?.id]); const showBackButton = useMemo(