From 77373ebe514dd313287b08560dbafab49bec2e5a Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:55:52 +0100
Subject: [PATCH 1/4] Add GA4 form tracker to the survey banner email survey

---
 app/assets/javascripts/surveys.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
index 50bc36ca9..d6d543f05 100644
--- a/app/assets/javascripts/surveys.js
+++ b/app/assets/javascripts/surveys.js
@@ -24,7 +24,7 @@
               'id="user-survey-cancel" ' +
               'role="button" ' +
               'data-module="ga4-event-tracker" ' +
-              'data-ga4-event=\'' + JSON.stringify({ event_name: 'select_content', type: 'survey banner', action: 'closed' }) +
+              'data-ga4-event=\'' + JSON.stringify({ event_name: 'select_content', type: 'survey banner', action: 'closed', section: '{{title}}' }) +
             '\'>Close</a>' +
       '    <h2 class="survey-title" id="survey-title">{{title}}</h2>' +
           '<div data-module="ga4-link-tracker" data-ga4-track-links-only ' +
@@ -49,7 +49,7 @@
     '    {{surveyCta}}' +
     '  </a>' +
     '</div>' +
-    '<form id="email-survey-form" action="/contact/govuk/email-survey-signup" method="post" class="js-hidden" aria-hidden="true">' +
+    '<form id="email-survey-form" action="/contact/govuk/email-survey-signup" method="post" class="js-hidden" aria-hidden="true" data-module="ga4-form-tracker" data-ga4-form=\'' + JSON.stringify({ event_name: 'form_submit', type: 'survey banner', action: 'submit', section: '{{title}}', text: '{{surveyFormCta}}', tool_name: '{{title}}' }) + '\'>' +
     '  <div class="survey-inner-wrapper">' +
     '    <div id="survey-form-description" class="survey-form-description">{{surveyFormDescription}}' +
     '      <br> {{surveyFormCtaPostscript}}' +

From e154ce7bf1d9aacfdb628ca62c2a887ae973fe01 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:55:13 +0100
Subject: [PATCH 2/4] Add GA4 form complete event to email survey banner

---
 app/assets/javascripts/surveys.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
index d6d543f05..0f912be0f 100644
--- a/app/assets/javascripts/surveys.js
+++ b/app/assets/javascripts/surveys.js
@@ -308,8 +308,10 @@
           xhr.onreadystatechange = function () {
             if (xhr.readyState === 4 && xhr.status === 200) {
               successCallback()
+              userSurveys.attachGa4FormCompleteElement($emailSurveyForm, false)
             } else {
               errorCallback()
+              userSurveys.attachGa4FormCompleteElement($emailSurveyForm, true)
             }
           }
 
@@ -320,6 +322,27 @@
       }
     },
 
+    attachGa4FormCompleteElement: function (emailSurveyElement, error) {
+      // When the email survey form is submitted, this attaches a HTML element with our GA4 auto tracker to the DOM.
+      // The module is then started - the module will send data-ga4-auto object to the dataLayer.
+      // Doing it this way prevents us from calling and having to maintaining GA4 JS/cookie consent in this repo.
+      var emailSurveyHeading = document.getElementById('survey-title').textContent.trim()
+      var emailSurveyText = error ? document.getElementById('email-survey-post-failure') : document.getElementById('#email-survey-post-success')
+      emailSurveyText = emailSurveyText.textContent.trim()
+      var span = document.createElement('span')
+      span.setAttribute('data-module', 'ga4-auto-tracker')
+      span.setAttribute('data-ga4-auto', JSON.stringify({
+        event_name: 'form_complete',
+        action: 'complete',
+        type: 'survey banner',
+        text: emailSurveyText,
+        section: emailSurveyHeading,
+        tool_name: emailSurveyHeading
+      }))
+      emailSurveyElement.appendChild(span)
+      window.GOVUK.modules.start(emailSurveyElement)
+    },
+
     setURLSurveyEventHandlers: function (survey) {
       var $emailSurveyCancel = document.getElementById('user-survey-cancel')
       var $takeSurvey = document.getElementById('take-survey')

From de80eeecd4d3e0708d14009b2b629602313391cd Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:56:49 +0100
Subject: [PATCH 3/4] Update tests

---
 app/assets/javascripts/surveys.js |  3 +-
 spec/javascripts/surveys.spec.js  | 49 ++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
index 0f912be0f..172a53147 100644
--- a/app/assets/javascripts/surveys.js
+++ b/app/assets/javascripts/surveys.js
@@ -327,7 +327,8 @@
       // The module is then started - the module will send data-ga4-auto object to the dataLayer.
       // Doing it this way prevents us from calling and having to maintaining GA4 JS/cookie consent in this repo.
       var emailSurveyHeading = document.getElementById('survey-title').textContent.trim()
-      var emailSurveyText = error ? document.getElementById('email-survey-post-failure') : document.getElementById('#email-survey-post-success')
+
+      var emailSurveyText = error ? document.getElementById('email-survey-post-failure') : document.getElementById('email-survey-post-success')
       emailSurveyText = emailSurveyText.textContent.trim()
       var span = document.createElement('span')
       span.setAttribute('data-module', 'ga4-auto-tracker')
diff --git a/spec/javascripts/surveys.spec.js b/spec/javascripts/surveys.spec.js
index 0812bbf72..4a24175e8 100644
--- a/spec/javascripts/surveys.spec.js
+++ b/spec/javascripts/surveys.spec.js
@@ -103,13 +103,26 @@ describe('Surveys', function () {
         var ga4LinkElement = surveyParent.querySelector('.survey-title + div')
 
         var expectedGa4Auto = { event_data: { event_name: 'element_visible', type: 'survey banner' } }
-        var expectedGa4Event = { event_name: 'select_content', type: 'survey banner', action: 'closed' }
+        var expectedGa4Event = { event_name: 'select_content', type: 'survey banner', action: 'closed', section: 'Tell us what you think of GOV.UK' }
         var expectedGa4Link = { event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1 }
+        var expectedGa4Form = {
+          event_name: 'form_submit',
+          type: 'survey banner',
+          action: 'submit',
+          section: 'Tell us what you think of GOV.UK',
+          text: 'Send me the survey',
+          tool_name: 'Tell us what you think of GOV.UK'
+        }
 
         expect(JSON.parse(ga4AutoElement.getAttribute('data-ga4-auto'))).toEqual(expectedGa4Auto)
         expect(JSON.parse(ga4EventElement.getAttribute('data-ga4-event'))).toEqual(expectedGa4Event)
         expect(JSON.parse(ga4LinkElement.getAttribute('data-ga4-link'))).toEqual(expectedGa4Link)
 
+        if (survey === emailSurvey) {
+          var ga4FormElement = surveyParent.querySelector('#email-survey-form')
+          expect(JSON.parse(ga4FormElement.getAttribute('data-ga4-form'))).toEqual(expectedGa4Form)
+        }
+
         expect(ga4LinkElement.hasAttribute('data-ga4-track-links-only')).toEqual(true)
       }
     })
@@ -829,6 +842,23 @@ describe('Surveys', function () {
             expect(surveys.trackEvent).toHaveBeenCalledWith(emailSurvey.identifier, 'email_survey_taken', 'Email survey taken')
             expect(surveys.trackEvent).toHaveBeenCalledWith(emailSurvey.identifier, 'banner_taken', 'User taken survey')
           })
+
+          it('adds the GA4 form complete <span>', function () {
+            window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
+            // For some reason the submit event triggers twice in tests, so we have to get the second <span>.
+            var span = document.querySelectorAll('#email-survey-form span[data-ga4-auto]')[1]
+
+            var expectedGa4Auto = {
+              event_name: 'form_complete',
+              action: 'complete',
+              type: 'survey banner',
+              text: 'Thanks, we’ve sent you an email with a link to the survey.',
+              section: 'Tell us what you think of GOV.UK',
+              tool_name: 'Tell us what you think of GOV.UK'
+            }
+            expect(span.getAttribute('data-module')).toEqual('ga4-auto-tracker')
+            expect(span.getAttribute('data-ga4-auto')).toEqual(JSON.stringify(expectedGa4Auto))
+          })
         })
 
         describe('but submitting it results in an error', function () {
@@ -858,6 +888,23 @@ describe('Surveys', function () {
             window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
             expect(surveys.trackEvent).not.toHaveBeenCalled()
           })
+
+          it('adds the GA4 form complete <span>', function () {
+            window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
+            // For some reason the submit event triggers twice in tests, so we have to get the second <span>.
+            var span = document.querySelectorAll('#email-survey-form span[data-ga4-auto]')[1]
+
+            var expectedGa4Auto = {
+              event_name: 'form_complete',
+              action: 'complete',
+              type: 'survey banner',
+              text: 'Sorry, we’re unable to send you an email right now. Please try again later.',
+              section: 'Tell us what you think of GOV.UK',
+              tool_name: 'Tell us what you think of GOV.UK'
+            }
+            expect(span.getAttribute('data-module')).toEqual('ga4-auto-tracker')
+            expect(span.getAttribute('data-ga4-auto')).toEqual(JSON.stringify(expectedGa4Auto))
+          })
         })
 
         it("hides the email form when clicking 'No thanks'", function () {

From 5c4566a70d240648c2e10751c6b3eaa6a168f5cb Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Wed, 27 Sep 2023 10:09:22 +0100
Subject: [PATCH 4/4] Add section value to link tracker

---
 app/assets/javascripts/surveys.js | 2 +-
 spec/javascripts/surveys.spec.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
index 172a53147..091e259e9 100644
--- a/app/assets/javascripts/surveys.js
+++ b/app/assets/javascripts/surveys.js
@@ -28,7 +28,7 @@
             '\'>Close</a>' +
       '    <h2 class="survey-title" id="survey-title">{{title}}</h2>' +
           '<div data-module="ga4-link-tracker" data-ga4-track-links-only ' +
-                'data-ga4-link=\'' + JSON.stringify({ event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1 }) + '\'>' +
+                'data-ga4-link=\'' + JSON.stringify({ event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1, section: '{{title}}' }) + '\'>' +
             children +
           '</div>' +
       '  </div>' +
diff --git a/spec/javascripts/surveys.spec.js b/spec/javascripts/surveys.spec.js
index 4a24175e8..1491799ae 100644
--- a/spec/javascripts/surveys.spec.js
+++ b/spec/javascripts/surveys.spec.js
@@ -104,7 +104,7 @@ describe('Surveys', function () {
 
         var expectedGa4Auto = { event_data: { event_name: 'element_visible', type: 'survey banner' } }
         var expectedGa4Event = { event_name: 'select_content', type: 'survey banner', action: 'closed', section: 'Tell us what you think of GOV.UK' }
-        var expectedGa4Link = { event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1 }
+        var expectedGa4Link = { event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1, section: 'Tell us what you think of GOV.UK' }
         var expectedGa4Form = {
           event_name: 'form_submit',
           type: 'survey banner',