diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx index 194c2b34f6..a3f2d3848e 100644 --- a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx +++ b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx @@ -8,6 +8,8 @@ import { NextSteps } from "./model"; export type Props = PublicProps; +// How does the new trackNextStepsClick get tied into this component? + const NextStepsComponent: React.FC = (props) => { return ( diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx index a493c74a4b..7b9d715a12 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx @@ -10,16 +10,20 @@ export type AnalyticsType = "init" | "resume"; type AnalyticsLogDirection = AnalyticsType | "forwards" | "backwards"; export type HelpClickMetadata = Record; +export type NextStepsMetadata = Record + let lastAnalyticsLogId: number | undefined = undefined; const analyticsContext = createContext<{ createAnalytics: (type: AnalyticsType) => Promise; trackHelpClick: (metadata?: HelpClickMetadata) => Promise; + trackNextStepsClick: (metadata?: NextStepsMetadata) => Promise; node: Store.node | null; }>({ createAnalytics: () => Promise.resolve(), trackHelpClick: () => Promise.resolve(), + trackNextStepsClick: () => Promise.resolve(), node: null, }); const { Provider } = analyticsContext; @@ -100,6 +104,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ value={{ createAnalytics, trackHelpClick, + trackNextStepsClick, node, }} > @@ -171,6 +176,23 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({ } } + // Add a function to the provider which should capture when a next step is clicked? + // Ideally the metadata gathered should be the click but also the target of the URl? + // If they're clicking a new link will we need to use BeaconAPI to ensure we capture the data? + async function trackNextStepsClick(metadata? : NextStepsMetadata) { + if (shouldTrackAnalytics && lastAnalyticsLogId) { + await publicClient.mutate({ + mutation: gql` + // The mutation generated via Hasura? + `, + variables: { + id: lastAnalyticsLogId, + metadata, + } + }) + } + } + async function createAnalytics(type: AnalyticsType) { if (shouldTrackAnalytics) { const response = await publicClient.mutate({