diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx index 602de3ed6..ed6d419f7 100644 --- a/apps/scandic-web/components/Forms/Signup/index.tsx +++ b/apps/scandic-web/components/Forms/Signup/index.tsx @@ -96,11 +96,12 @@ export default function SignupForm({ title }: SignUpFormProps) { const { control, subscribe } = methods - useFormTracking("signup", subscribe, control) + const { trackFormSubmit } = useFormTracking("signup", subscribe, control) async function onSubmit(data: SignUpSchema) { const phoneNumber = formatPhoneNumber(data.phoneNumber, data.phoneNumberCC) signup.mutate({ ...data, phoneNumber, language: lang }) + trackFormSubmit() } return ( diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx index de13dc606..fb4be39a3 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx @@ -89,11 +89,20 @@ export default function Details() { watch, } = methods - useFormTracking("checkout", subscribe, control, ` - room ${roomNr}`) + const { trackFormSubmit } = useFormTracking( + "checkout", + subscribe, + control, + ` - room ${roomNr}` + ) useEffect(() => { - addPreSubmitCallback(`${idx}-details`, trigger) - }, [addPreSubmitCallback, idx, trigger]) + function callback() { + trigger() + trackFormSubmit() + } + addPreSubmitCallback(`${idx}-details`, callback) + }, [addPreSubmitCallback, idx, trigger, trackFormSubmit]) const updateDetailsStore = useCallback(() => { if (isValid) { diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx index 6c16a9693..8017f440c 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx @@ -85,7 +85,7 @@ export default function Details({ user }: DetailsProps) { watch, } = methods - useFormTracking( + const { trackFormSubmit } = useFormTracking( "checkout", subscribe, control, @@ -93,8 +93,12 @@ export default function Details({ user }: DetailsProps) { ) useEffect(() => { - addPreSubmitCallback(`${idx}-details`, trigger) - }, [addPreSubmitCallback, idx, trigger]) + function callback() { + trigger() + trackFormSubmit() + } + addPreSubmitCallback(`${idx}-details`, callback) + }, [addPreSubmitCallback, idx, trigger, trackFormSubmit]) const onSubmit = useCallback( (values: DetailsSchema) => { diff --git a/apps/scandic-web/components/TrackingSDK/hooks.ts b/apps/scandic-web/components/TrackingSDK/hooks.ts index 40b9022d6..a8427fc32 100644 --- a/apps/scandic-web/components/TrackingSDK/hooks.ts +++ b/apps/scandic-web/components/TrackingSDK/hooks.ts @@ -1,10 +1,15 @@ "use client" -import isEqual from "fast-deep-equal" + import { usePathname } from "next/navigation" -import { startTransition, useEffect, useRef, useState } from "react" +import { + startTransition, + useCallback, + useEffect, + useRef, + useState, +} from "react" import { type Control, - type FieldErrors, type FieldValues, useFormState, type UseFromSubscribe, @@ -21,8 +26,8 @@ import { createSDKPageObject, trackPageView } from "@/utils/tracking" import { type FormType, trackFormAbandonment, + trackFormCompletion, trackFormInputStarted, - trackFormValidationError, } from "@/utils/tracking/form" import type { @@ -284,38 +289,10 @@ export function useFormTracking( const [formStarted, setFormStarted] = useState(false) const lastAccessedField = useRef(undefined) const formState = useFormState({ control }) - const previousErrors = useRef>({}) - - useEffect(() => { - const errors = formState.errors - const prevErrors = previousErrors.current - - const isNewErrors = !isEqual(errors, prevErrors) - if (Object.keys(errors).length && isNewErrors) { - const errorString = Object.values(errors) - .map((err) => { - if (err && "message" in err) { - return err.message - } - const nested = Object.values(err ?? {}).find( - (val) => val && typeof val === "object" && "message" in val - ) - if (nested) { - return nested.message - } - return undefined - }) - .filter(Boolean) - .join("|") - - trackFormValidationError(formType, errorString, nameSuffix) - previousErrors.current = { ...errors } - } - }, [formType, formState, nameSuffix]) useEffect(() => { const unsubscribe = subscribe({ - formState: { touchedFields: true }, + formState: { dirtyFields: true }, callback: (data) => { if ("name" in data) { lastAccessedField.current = data.name as string @@ -353,4 +330,14 @@ export function useFormTracking( window.removeEventListener("visibilitychange", handleVisibilityChange) } }, [formStarted, formType, nameSuffix, formState.isValid]) + + const trackFormSubmit = useCallback(() => { + if (formState.isValid) { + trackFormCompletion(formType, nameSuffix) + } + }, [formType, nameSuffix, formState.isValid]) + + return { + trackFormSubmit, + } } diff --git a/apps/scandic-web/utils/tracking/form.ts b/apps/scandic-web/utils/tracking/form.ts index 9ed99d6e3..1bbf6aed4 100644 --- a/apps/scandic-web/utils/tracking/form.ts +++ b/apps/scandic-web/utils/tracking/form.ts @@ -79,3 +79,25 @@ export function trackFormValidationError( }) } } + +export function trackFormCompletion(type: FormType, nameSuffix?: string) { + if (type === "checkout") { + trackEvent({ + event: "formCompletion", + form: { + action: "checkout form completion", + name: "checkout enter detail" + nameSuffix, + type: type, + }, + }) + } else if (type === "signup") { + trackEvent({ + event: "formCompletion", + form: { + action: "signup form completion", + name: "member registration" + nameSuffix, + type: type, + }, + }) + } +}