EL-1751: form_submission event not firing in GA4 (#356)

- amend `id` for one of the questions - remove `novalidate` in form - adjust the JS and run only when cookies are allowed - remove other redundant inline JS
ministryofjustice · Sep 27, 2024 · 434aaae · 434aaae
1 parent c161882
commit 434aaae
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 62 deletions.
diff --git a/fala/assets-src/scripts/google_tag_manager_data_layer.js b/fala/assets-src/scripts/google_tag_manager_data_layer.js
@@ -0,0 +1,30 @@
+const fala_form = document.querySelector('#fala_questions');
+
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+  return null;
+}
+
+const cookie_value = getCookie('cookiePermission') === 'Allowed';
+
+if (fala_form && cookie_value) {
+    fala_form.addEventListener('submit', function(e){
+
+    // variables for postcode and organisation name
+    const postcode = document.querySelector("#id_postcode").value;
+    const organisation = document.querySelector("#id_name").value;    
+
+    // variables for checkbox
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+    const selected = Array.from(checkboxes).map(x => x.value);
+
+    window.dataLayer.push({
+      'event': "formSubmission",
+      'postcode': postcode,
+      'organisation': organisation,
+      'checkbox': selected,
+    });
+  });
+};
diff --git a/fala/templates/adviser/search.html b/fala/templates/adviser/search.html
@@ -29,7 +29,7 @@ <h1 class="govuk-heading-xl"> Find a legal aid adviser or family mediator </h1>
       <div class="govuk-grid-column-full">
         <div class="laa-fala__grey-box">
 
-          <form action="search" id="fala_questions" novalidate>
+          <form action="search" id="fala_questions">
             {% set errorMessage = {'err': ""} %}
 
             {% if form.errors %}
@@ -88,7 +88,7 @@ <h1 class="govuk-heading-xl"> Find a legal aid adviser or family mediator </h1>
                 },
                 'value': form.name.value(),
                 'errorMessage': { 'text': form.errors['name'][0] },
-                'id': 'name',
+                'id': 'id_name',
                 'classes': 'govuk-!-width-one-third',
                 'name': "name"
               }) }}
@@ -102,7 +102,7 @@ <h1 class="govuk-heading-xl"> Find a legal aid adviser or family mediator </h1>
                    'maxLength': 100,
                 },
                 'value': form.name.value(),
-                'id': 'name',
+                'id': 'id_name',
                 'classes': 'govuk-!-width-one-third',
                 'name': "name"
               }) }}

diff --git a/fala/templates/base.html b/fala/templates/base.html
@@ -17,18 +17,17 @@
     </style>
   {% endif %}
   <script nonce="{{request.csp_nonce}}">
-  function tagMan() {  // Activate Google Tag Manager
-    window.dataLayer = window.dataLayer || [];
-    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-WDJLHSKL');
-  }
+    function tagMan() {  // Activate Google Tag Manager
+      window.dataLayer = window.dataLayer || [];
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','GTM-WDJLHSKL');
+    }
   </script>
-
   {% if (request.COOKIES.get('cookiePermission') == 'Allowed') %}
-  <script nonce="{{request.csp_nonce}}">tagMan();</script>
+    <script nonce="{{request.csp_nonce}}">tagMan();</script>
   {% endif %}
 {% endblock %}
 
@@ -91,7 +90,7 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-7">
 {% endblock %}
 
 {% block after_main_js %}
-  <script  nonce="{{request.csp_nonce}}">
+  <script nonce="{{request.csp_nonce}}">
     function googleTranslateElementInit() {
       new google.translate.TranslateElement(
         {
@@ -102,32 +101,4 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-7">
     }
   </script>
   <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-  <script  nonce="{{request.csp_nonce}}">
-    function errorScroll(s,f) {
-      document.getElementById(s).scrollIntoView();
-      document.getElementById(f).focus();
-    }
-  </script>
-  <script nonce="{{request.csp_nonce}}">
-    const fala_form = document.querySelector('#fala_questions');
-    if (fala_form) {
-      fala_form.addEventListener('submit', function(e){
-
-      // variables for postcode and organisation name
-      const postcode = document.querySelector("#id_postcode").value;
-      const organisation = document.querySelector("#id_name").value;
-
-      // variables for checkbox
-      const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
-      const selected = Array.from(checkboxes).map(x => x.value);
-
-      window.dataLayer.push({
-        'event': "formSubmission",
-        'postcode': postcode,
-        'organisation': organisation,
-        'checkbox': selected,
-      });
-    });
-  };
-  </script>
 {% endblock %}
diff --git a/fala/templates/macros/forms.html b/fala/templates/macros/forms.html
@@ -137,26 +137,6 @@
   {% endif %}
 {% endmacro %}
 
-{% macro render_field_errors_for_summary(field, id) %}
-  {% if field and field.errors %}
-    {% set errors = field.errors.values() if field.errors is mapping else field.errors %}
-    {% for error in errors %}
-      {% if error is string or error == error|string %}
-        <li>
-          <a href="#id_{{ field.name }}" onclick='errorScroll("fala_questions","id_{{ field.name }}");return false;'>{{ error }}</a>
-        </li>
-      {% else %}
-        {% for line in error %}
-           <li>
-            <a href="#id_{{ field.name }}" onclick='errorScroll("fala_questions","id_{{ field.name }}");return false;'>{{ line }}</a>
-          </li>
-        {% endfor %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-{% endmacro %}
-
-
 {#
   Renders form fieldset. Used as container for form fields.
   Fieldset have `legend` element with optional `label` for single input

diff --git a/gulpfile.js b/gulpfile.js
@@ -9,6 +9,7 @@ const { src, parallel, dest} = require('gulp');
 // FALA js & GOVUK js - copying over both if we ever want to add custom js
 const jsPath = [
   'fala/assets-src/scripts/cookies.js',
+  'fala/assets-src/scripts/google_tag_manager_data_layer.js',
   'node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js'
 ];