Merge pull request #1330 from dpc-sdp/feature/SD-257-form-start-event

[SD-257] - Added 'form start' analytics event

examples/nuxt-app/test/features/landingpage/forms-analytics.feature

@@ -0,0 +1,12 @@
+Feature: Forms analytics events
+
+  @mockserver
+  Scenario: Form start
+    Given the mock server has started
+    And the page endpoint for path "/" returns fixture "/landingpage/full-form" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/"
+    When I type "Cat" into the input with the label "Last name"
+    Then the dataLayer should include the following events
+      | event      | form_id   | form_name | component | platform_event |
+      | form_start | full_form | Test form | rpl-form  | start          |

examples/nuxt-app/test/fixtures/landingpage/full-form.json

@@ -52,6 +52,7 @@
       "id": 1119,
       "title": "Test form",
       "props": {
+        "title": "Test form",
         "formId": "full_form",
         "hideFormOnSubmit": false,
         "successMessageTitle": "Server success",

packages/nuxt-ripple-analytics/lib/index.ts

@@ -563,6 +563,17 @@ export default {
     }
   },
   // UI Forms components
+  'rpl-form/start': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `form_start`,
+        form_id: payload?.id,
+        form_name: payload?.name,
+        component: 'rpl-form',
+        platform_event: 'start'
+      })
+    }
+  },
   'rpl-form/submit': () => {
     return (payload: any) => {
       trackEvent({

packages/ripple-ui-forms/src/components/RplForm/RplForm.vue

@@ -63,6 +63,7 @@ const emit = defineEmits<{
   (e: 'submit', payload: rplEventPayload & { action: 'submit' }): void
   (e: 'invalid', payload: rplEventPayload & { action: 'submit' }): void
   (e: 'submitted', payload: rplEventPayload & { action: 'complete' }): void
+  (e: 'start', payload: rplEventPayload): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-form', emit)
@@ -77,6 +78,9 @@ const errorSummaryRef = ref(null)
 const cachedErrors = ref<Record<string, CachedError>>({})
 const submitCounter = ref(0)
 
+// Keep track of whether user has changed something in the form
+const formStarted = ref<boolean>(false)
+
 provide('form', { id: props.id, name: props.title })
 provide('isFormSubmitting', isFormSubmitting)
 // submitCounter is watched by some components to efficiently know when to update
@@ -198,6 +202,22 @@ watch(
   }
 )
 
+const handleChange = () => {
+  // 'Form start' analytics event, fires on first change of the form
+  if (!formStarted.value) {
+    formStarted.value = true
+
+    emitRplEvent(
+      'start',
+      {
+        id: props.id,
+        name: props.title
+      },
+      { global: true }
+    )
+  }
+}
+
 const data = reactive({
   isFilled: (val) =>
     typeof val === 'number'
@@ -256,6 +276,7 @@ const plugins = computed(
     novalidate
     @submit-invalid="submitInvalidHandler"
     @submit="submitHandler"
+    @input="handleChange"
   >
     <fieldset
       class="rpl-form__submit-guard"