Merge pull request #3546 from alphagov/expand-formtracker

Expand GA4 form tracker

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add a reset option into the GA4 scrolltracker ([PR #3544](https://github.com/alphagov/govuk_publishing_components/pull/3544))
+* Expand GA4 form tracker ([PR #3546](https://github.com/alphagov/govuk_publishing_components/pull/3546))
 * Adjust core functions setIndexes ([PR #3541](https://github.com/alphagov/govuk_publishing_components/pull/3541))
 * GA4 pageview changes ([PR #3542](https://github.com/alphagov/govuk_publishing_components/pull/3542))
 * Fix select width overlap bug ([PR #3538](https://github.com/alphagov/govuk_publishing_components/pull/3538))

app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js

@@ -84,12 +84,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var labelText = input.label.innerText || input.label.textContent
       var inputType = elem.getAttribute('type')
       var inputNodename = elem.nodeName
+      var inputTypes = ['text', 'search', 'email', 'number']
 
       if (inputType === 'checkbox' && elem.checked) {
         input.answer = labelText
       } else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex].value) {
         input.answer = elem.options[elem.selectedIndex].text
-      } else if ((inputType === 'text' || inputType === 'search') && elem.value) {
+      } else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
         if (this.includeTextInputValues) {
           var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
           input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)

spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.spec.js

@@ -130,9 +130,9 @@ describe('Google Analytics form tracking', function () {
         '<label for="textid1">Label</label>' +
         '<input type="text" id="textid1" name="test-text1" value="text 1"/>' +
         '<label for="textid2">Label</label>' +
-        '<input type="text" id="textid2" name="test-text2"/>' +
+        '<input type="search" id="textid2" name="test-text2"/>' +
         '<label for="textid3">Label</label>' +
-        '<input type="text" id="textid3" name="test-text3" value="text 3"/>'
+        '<input type="email" id="textid3" name="test-text3" value="text 3"/>'
       expected.event_data.text = '[REDACTED]'
 
       window.GOVUK.triggerEvent(element, 'submit')
@@ -258,6 +258,23 @@ describe('Google Analytics form tracking', function () {
       window.GOVUK.triggerEvent(element, 'submit')
       expect(window.dataLayer[0]).toEqual(expected)
     })
+
+    it('does not redact data from multiple text inputs of different types', function () {
+      element.innerHTML =
+        '<label for="textid1">Label</label>' +
+        '<input type="text" id="textid1" name="test-text1" value="text 1"/>' +
+        '<label for="textid2">Label</label>' +
+        '<input type="search" id="textid2" name="test-text2" value="text 2"/>' +
+        '<label for="textid3">Label</label>' +
+        '<input type="email" id="textid3" name="test-text3" value="text 3"/>' +
+        '<label for="textid4">Label</label>' +
+        '<input type="number" id="textid4" name="test-text4" value="4"/>'
+      element.setAttribute('data-ga4-form-include-text', true)
+      expected.event_data.text = 'text 1,text 2,text 3,4'
+
+      window.GOVUK.triggerEvent(element, 'submit')
+      expect(window.dataLayer[0]).toEqual(expected)
+    })
   })
 
   describe('when tracking search forms', function () {