feat: track a user clicking the back button

- For each node an analytics_log is created
- Add a new coloumn of has_clicked_back which stores a boolean if the user clicks back
- Update the analytics_log for the node where the user clicks back
- Optional metatdata to store where back was in the future if required

editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx

@@ -21,6 +21,7 @@ type AnalyticsLogDirection =
 
 export type HelpClickMetadata = Record<string, string>;
 export type SelectedUrlsMetadata = Record<"selectedUrls", string[]>;
+export type BackButtonClickMetadata = Record<string, string>;
 
 type NodeMetadata = {
   flagset?: FlagSet;
@@ -40,12 +41,14 @@ const analyticsContext = createContext<{
   trackFlowDirectionChange: (
     flowDirection: AnalyticsLogDirection,
   ) => Promise<void>;
+  trackBackButtonClick: () => Promise<void>;
   node: Store.node | null;
 }>({
   createAnalytics: () => Promise.resolve(),
   trackHelpClick: () => Promise.resolve(),
   trackNextStepsLinkClick: () => Promise.resolve(),
   trackFlowDirectionChange: () => Promise.resolve(),
+  trackBackButtonClick: () => Promise.resolve(),
   node: null,
 });
 const { Provider } = analyticsContext;
@@ -128,6 +131,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
         trackHelpClick,
         trackNextStepsLinkClick,
         trackFlowDirectionChange,
+        trackBackButtonClick,
         node,
       }}
     >
@@ -249,6 +253,28 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   }
 
+  async function trackBackButtonClick(metadata?: BackButtonClickMetadata) {
+    if (shouldTrackAnalytics && lastAnalyticsLogId) {
+      await publicClient.mutate({
+        mutation: gql`
+          mutation UpdateHasClickedBack($id: bigint!, $metadata: jsonb = {}) {
+            update_analytics_logs_by_pk(
+              pk_columns: { id: $id }
+              _set: { has_clicked_back: true }
+              _append: { metadata: $metadata }
+            ) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: lastAnalyticsLogId,
+          metadata,
+        },
+      });
+    }
+  }
+
   async function trackNextStepsLinkClick(metadata?: SelectedUrlsMetadata) {
     if (shouldTrackAnalytics && lastAnalyticsLogId) {
       await publicClient.mutate({

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, trackBackButtonClick } =
+    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) {
+      trackBackButtonClick();
+      record(previous);
+    }
   }, [node?.id]);
 
   const showBackButton = useMemo(

hasura.planx.uk/metadata/tables.yaml

@@ -48,6 +48,7 @@
       permission:
         columns:
           - flow_direction
+          - has_clicked_back
           - has_clicked_help
           - metadata
           - next_log_created_at

hasura.planx.uk/migrations/1698841194166_alter_table_public_analytics_logs_add_column_has_clicked_back/down.sql

@@ -0,0 +1 @@
+alter table "public"."analytics_logs" drop column "has_clicked_back";

hasura.planx.uk/migrations/1698841194166_alter_table_public_analytics_logs_add_column_has_clicked_back/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."analytics_logs" add column "has_clicked_back" boolean
+ not null default 'false';