Track select interactions in Whitehall

app/assets/javascripts/admin/analytics-modules/ga4-select-tracker.js

@@ -0,0 +1,35 @@
+'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules =
+  window.GOVUK.analyticsGa4.analyticsModules || {}
+;(function (Modules) {
+  Modules.Ga4SelectSetup = {
+    init: function () {
+      const moduleElements = document.querySelectorAll(
+        "[data-module~='ga4-select-setup'] select:not([data-module~='select-with-search'] select)"
+      )
+
+      moduleElements.forEach(function (moduleElement) {
+        moduleElement.addEventListener('change', function (event) {
+          const eventData = {
+            event: 'event_data',
+            event_data: {
+              event_name: 'select_component',
+              type: event.target.dataset.ga4DocumentType,
+              index: {
+                index_section_count: `${event.target.selectedIndex}`,
+                index_section: event.target.dataset.ga4IndexSection
+              },
+              text: event.target[event.target.selectedIndex].label,
+              section: event.target.dataset.ga4Section,
+              action: 'select'
+            }
+          }
+
+          window.GOVUK.analyticsGa4.core.sendData(eventData, 'event_data')
+        })
+      })
+    }
+  }
+})(window.GOVUK.analyticsGa4.analyticsModules)

app/assets/javascripts/application.js

@@ -22,6 +22,7 @@
 //= require admin/analytics-modules/ga4-page-view-tracking.js
 //= require admin/analytics-modules/ga4-paste-tracker.js
 //= require admin/analytics-modules/ga4-select-with-search-tracker.js
+//= require admin/analytics-modules/ga4-select-tracker.js
 
 //= require admin/modules/document-history-paginator
 //= require admin/modules/locale-switcher

app/components/admin/editions/document_history_tab_component.html.erb

@@ -18,6 +18,11 @@
     label: "Show",
     heading_size: "s",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 1,
+      ga4_section: "Show",
+    },
     options: [
       {
         text: "Everything",

app/components/admin/editions/history_mode_form_controls.erb

@@ -20,6 +20,11 @@
           name: "edition[government_id]",
           label: "Change the associated government:",
           id: "edition_government_id",
+          data_attributes: {
+            ga4_document_type: "#{action_name}-#{controller_name}",
+            ga4_index_section: 3,
+            ga4_section: "Change the associated government",
+          },
           options:,
         }) : "",
       },

app/views/admin/attachments/_hoc_reference_fields.html.erb

@@ -45,6 +45,11 @@
     heading_size: heading_size,
     options: options,
     hint: "Choose the right Parliamentary session",
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 3,
+      ga4_section: "Choose the right Parliamentary session",
+    },
     error_message: errors_for_input(attachment.errors, :parliamentary_session),
   } %>
 </div>

app/views/admin/attachments/_reference_fields.html.erb

@@ -16,6 +16,11 @@
       name: "attachment[locale]",
       heading_level: 2,
       heading_size: heading_size,
+      data_attributes: {
+        ga4_document_type: "#{action_name}-#{controller_name}",
+        ga4_index_section: 2,
+        ga4_section: "Display language",
+      },
       options: locale_options,
       hint: "This determines the translations of the publication that the attachment will appear in.",
     } %>

app/views/admin/bulk_republishing/new_by_type.html.erb

@@ -8,6 +8,11 @@
       <%= render "govuk_publishing_components/components/select", {
         id: "content_type",
         label: "Choose a content type",
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 1,
+          ga4_section: "Choose a content type",
+        },
         options: @republishable_content_types_select_options,
       } %>
       <%= render "govuk_publishing_components/components/button", {

app/views/admin/contact_translations/index.html.erb

@@ -18,6 +18,11 @@
         hint: "This is the first step before creating a translated version of this content",
         heading_size: "l",
         full_width: true,
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 1,
+          ga4_section: "Select language",
+        },
         options: options_for_locales(@contact.missing_translations).map do |language, value|
           {
             text: language,

app/views/admin/contacts/_form_fields.html.erb

@@ -88,6 +88,11 @@
         label: "Country",
         full_width: true,
         heading_size: "m",
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 6,
+          ga4_section: "Country",
+        },
         error_message: errors_for_input(contact_form.object.errors, :country_id),
         options: options,
       } %>

app/views/admin/edition_translations/new.html.erb

@@ -21,6 +21,11 @@
         id: "translation_locale",
         label: "Choose language",
         full_width: true,
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 1,
+          ga4_section: "Choose language",
+        },
         options: options_for_locales(@edition.missing_translations).map do |language, value|
           {
             text: language,

app/views/admin/editions/_accessible_attachment_field.html.erb

@@ -9,7 +9,7 @@
         If the email address you need isn’t here, it should be added to the relevant Department or Agency
       </div>
 
-      <select name="edition[alternative_format_provider_id]" id="edition_alternative_format_provider_id" class="govuk-select" aria-describedby="alternative-format-provider-hint">
+      <select name="edition[alternative_format_provider_id]" id="edition_alternative_format_provider_id" class="govuk-select" aria-describedby="alternative-format-provider-hint" data-ga4-document-type="<%= ga_data[:document_type] %>" data-ga4-index-section="<%= ga_data[:index_section] %>" data-ga4-section="<%= ga_data[:section] %>">
         <option></option>
         <%
           taggable_alternative_format_providers_container.each do |hash|

app/views/admin/editions/_settings_fields.html.erb

@@ -5,7 +5,14 @@
         margin_bottom: 6,
     } %>
 
-    <%= render "accessible_attachment_field", form: form, edition: edition %>
+    <%= render "accessible_attachment_field",
+               form: form,
+               edition: edition,
+               ga_data: {
+                 document_type: "#{action_name}-#{controller_name}",
+                 index_section: 24,
+                 section: "Email address for ordering attachment files in an alternative format",
+               } %>
     <%= render "access_limiting_fields", form: form, edition: edition %>
     <%= render "scheduled_publication_fields", form: form, edition: edition %>
     <%= render "review_reminder_fields", form: form, review_reminder: edition.document.review_reminder %>

app/views/admin/offsite_links/_form.html.erb

@@ -29,6 +29,11 @@
     error_message: errors_for_input(offsite_link.errors, :link_type),
     heading_size: "l",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 3,
+      ga4_section: "Type (required)",
+    },
     options: [{ text: "", value:"" }] + OffsiteLink::LinkTypes.all.map do |type|
       {
         text: type.humanize,

app/views/admin/organisation_translations/index.html.erb

@@ -65,6 +65,11 @@
           name: "translation_locale",
           label: "Select Language",
           heading_size: "l",
+          data_attributes: {
+            ga4_document_type: "#{action_name}-#{controller_name}",
+            ga4_index_section: 1,
+            ga4_section: "Select Language",
+          },
           options: @organisation.missing_translations.map do |locale|
             {
               value: locale.code,

app/views/admin/organisations/_form.html.erb

@@ -353,6 +353,11 @@
         heading_size: "m",
         full_width: true,
         error_message: errors_for_input(@organisation.errors, :ocpa_regulated),
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 3,
+          ga4_section: "OCPA Regulated",
+        },
         options: [
           {
             text: "",
@@ -378,6 +383,11 @@
         heading_size: "m",
         full_width: true,
         error_message: errors_for_input(@organisation.errors, :public_meetings),
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 4,
+          ga4_section: "Public Meetings",
+        },
         options: [
           {
             text: "",
@@ -403,6 +413,11 @@
         heading_size: "m",
         full_width: true,
         error_message: errors_for_input(@organisation.errors, :public_minutes),
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 5,
+          ga4_section: "Public Minutes",
+        },
         options: [
           {
             text: "",
@@ -428,6 +443,11 @@
         heading_size: "m",
         full_width: true,
         error_message: errors_for_input(@organisation.errors, :regulatory_function),
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 6,
+          ga4_section: "Regulatory Function",
+        },
         options: [
           {
             text: "",

app/views/admin/role_translations/index.html.erb

@@ -45,6 +45,11 @@
           name: "translation_locale",
           label: "Select Language",
           heading_size: "l",
+          data_attributes: {
+            ga4_document_type: "#{action_name}-#{controller_name}",
+            ga4_index_section: 1,
+            ga4_section: "Select Language",
+          },
           options: @role.missing_translations.map do |locale|
             {
               value: locale.code,

app/views/admin/roles/_form.html.erb

@@ -16,6 +16,11 @@
     heading_size: "l",
     name: "role[role_type]",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 2,
+      ga4_section: "Role type (required)",
+    },
     options:
       [{ value: nil, text: nil }] + role_type_options.map { |group, name_vs_type|
         name_vs_type.map do |name, type|
@@ -57,6 +62,11 @@
     heading_size: "l",
     name: "role[whip_organisation_id]",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 2,
+      ga4_section: "Whip Organisation",
+    },
     options: ([nil] + Whitehall::WhipOrganisation.all).map do |whip_organisation|
         {
           text: whip_organisation&.label,
@@ -72,6 +82,11 @@
     heading_size: "l",
     name: "role[role_payment_type_id]",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 5,
+      ga4_section: "Payment options",
+    },
     options: ([nil] + RolePaymentType.all).map do |role_payment_type|
       {
         text: role_payment_type&.name,
@@ -87,6 +102,11 @@
     heading_size: "l",
     name: "role[attends_cabinet_type_id]",
     full_width: true,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 6,
+      ga4_section: "Attends cabinet options",
+    },
     options: ([nil] + RoleAttendsCabinetType.all).map do |role_attends_cabinet_type|
       {
         text: role_attends_cabinet_type&.name,

app/views/admin/statistics_announcements/_filter_options.html.erb

@@ -34,6 +34,11 @@
       name: "dates",
       heading_size: "s",
       full_width: true,
+      data_attributes: {
+        ga4_document_type: "#{action_name}-#{controller_name}",
+        ga4_index_section: 3,
+        ga4_section: "Release date",
+      },
       options: [
         {
           text: "All announcements",

app/views/admin/topical_events/_social_media_account_fields.html.erb

@@ -4,6 +4,11 @@
     label: "Service (required)",
     name: "topical_event[social_media_accounts_attributes][#{index}][social_media_service_id]",
     heading_size: "s",
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: "#{index}",
+      ga4_section: "Service (required)",
+    },
     options: [{ text: "", value: "" }] +
       SocialMediaService.all.map do |social_media|
         {

app/views/admin/world_location_news/edit.html.erb

@@ -22,6 +22,11 @@
             name: "world_location_news[world_location_attributes][world_location_type]",
             label: "Type (required)",
             heading_size: "l",
+            data_attributes: {
+              ga4_document_type: "#{action_name}-#{controller_name}",
+              ga4_index_section: 1,
+              ga4_section: "Type (required)",
+            },
             options: WorldLocation.world_location_types.keys.map do |location_type|
               {
                 text: I18n.t("world_location.type.#{location_type}", count: 1),

app/views/admin/world_location_news_translations/index.html.erb

@@ -66,6 +66,11 @@
             name: "translation_locale",
             label: "Select Language",
             heading_size: "m",
+            data_attributes: {
+              ga4_document_type: "#{action_name}-#{controller_name}",
+              ga4_index_section: 1,
+              ga4_section: "Role type (required)",
+            },
             options: @world_location_news.missing_translations.map do |missing_trans|
               {
                 text: missing_trans.native_and_english_language_name,

app/views/admin/worldwide_office_translations/index.html.erb

@@ -12,6 +12,11 @@
         hint: "This is the first step before creating a translated version of this content",
         heading_size: "l",
         full_width: true,
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 1,
+          ga4_section: "Select language",
+        },
         options: @contact.missing_translations.map do |locale|
           {
             value: locale.code,

app/views/admin/worldwide_offices/_form.html.erb

@@ -34,6 +34,11 @@
     full_width: true,
     heading_size: "l",
     options: options,
+    data_attributes: {
+      ga4_document_type: "#{action_name}-#{controller_name}",
+      ga4_index_section: 2,
+      ga4_section: "Office type (required)",
+    },
     error_message: errors_for_input(office_form.object.errors, :worldwide_office_type_id),
   } %>
 

app/views/admin/worldwide_organisation_page_translations/index.html.erb

@@ -12,6 +12,11 @@
         hint: "This is the first step before creating a translated version of this content",
         heading_size: "l",
         full_width: true,
+        data_attributes: {
+          ga4_document_type: "#{action_name}-#{controller_name}",
+          ga4_index_section: 1,
+          ga4_section: "Select language",
+        },
         options: @worldwide_page.missing_translations.map do |locale|
           {
             value: locale.code,

app/views/admin/worldwide_organisations_main_offices/show.erb

@@ -30,6 +30,11 @@
             full_width: true,
             heading_size: "xl",
             is_page_heading: true,
+            data_attributes: {
+              ga4_document_type: "#{action_name}-#{controller_name}",
+              ga4_index_section: 2,
+              ga4_section: "Set main office",
+            },
             options: @worldwide_organisation.offices.sort_by(&:title).map do |office|
               {
                 value: office.id,