Merge pull request #10122 from alphagov/add-index-section-client-side

Add JavaScript to populate `ga4-index-section` client-side

Author: gtvj

app/assets/javascripts/admin/analytics-modules/ga4-index-section-setup.js

@@ -0,0 +1,23 @@
+'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules =
+  window.GOVUK.analyticsGa4.analyticsModules || {}
+;(function (Modules) {
+  Modules.Ga4IndexSectionSetup = {
+    init: function () {
+      const moduleElements = document.querySelectorAll(
+        "[data-module~='ga4-index-section-setup']"
+      )
+
+      moduleElements.forEach(function (moduleElement) {
+        const indexedElements = moduleElement.querySelectorAll(
+          'select, input:not([data-module~="select-with-search"] input)'
+        )
+        indexedElements.forEach((element, index) => {
+          element.dataset.ga4IndexSection = index
+        })
+      })
+    }
+  }
+})(window.GOVUK.analyticsGa4.analyticsModules)

app/assets/javascripts/application.js

@@ -16,6 +16,7 @@
 //= require components/miller-columns
 //= require components/select-with-search
 
+//= require admin/analytics-modules/ga4-index-section-setup.js
 //= require admin/analytics-modules/ga4-button-setup.js
 //= require admin/analytics-modules/ga4-link-setup.js
 //= require admin/analytics-modules/ga4-visual-editor-event-handlers.js

app/views/admin/corporate_information_pages/_standard_fields.html.erb

@@ -12,7 +12,6 @@
       include_blank: true,
       ga_data: {
         document_type: "#{action_name}-#{controller_name}",
-        index_section: 1,
         section: "Type",
       },
       options: corporate_information_page_types(@organisation).map do |type, value|

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

@@ -25,7 +25,6 @@
           options: taggable_detailed_guides_container(edition.related_detailed_guide_ids),
           ga_data: {
             document_type: "#{action_name}-#{controller_name}",
-            index_section: 3,
             section: "Related guides",
           },
           select: {

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

@@ -10,7 +10,6 @@
         error_items: errors_for(social_media_account.errors, :social_media_service_id),
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 1,
           section: "Service (required)",
         },
         options: SocialMediaService.all.map do |service|

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

@@ -8,7 +8,6 @@
     options: taggable_ministerial_role_appointments_container(edition.role_appointment_ids),
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 14,
       section: "Ministers",
     },
     select: {

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

@@ -31,7 +31,6 @@
         heading_size: "s",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 2,
           section: "Author",
         },
         options: admin_author_filter_options(current_user).map do |name, id|
@@ -52,7 +51,6 @@
         heading_size: "s",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 3,
           section: "Organisation",
         },
         grouped_options: admin_organisation_filter_options(@filter.options[:organisation]),
@@ -67,7 +65,6 @@
         heading_size: "s",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 4,
           section: "World location",
         },
         options: admin_world_location_filter_options(current_user).map do |name, id|
@@ -88,7 +85,6 @@
         heading_size: "s",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 5,
           section: "Document type",
         },
         grouped_options: filter_edition_type_opt_groups(current_user, @filter.options[:type]),
@@ -103,7 +99,6 @@
         heading_size: "s",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 6,
           section: "State",
         },
         options: admin_state_filter_options.map do |text, value|

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

@@ -26,7 +26,6 @@
           include_blank: true,
           ga_data: {
             document_type: "#{action_name}-#{controller_name}",
-            index_section: 2,
             section: "Document language",
           },
           errors: errors_for(edition.errors, :primary_locale),

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

@@ -7,7 +7,6 @@
   include_blank: true,
   ga_data: {
     document_type: "#{action_name}-#{controller_name}",
-    index_section: 1,
     section: "Field of operation (required)",
   },
   options: OperationalField.all.map do |operation|

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

@@ -18,7 +18,6 @@
               include_blank: true,
               ga_data: {
                 document_type: "#{action_name}-#{controller_name}",
-                index_section: "#{index + 17}",
                 section: "Lead organisation #{index + 1}",
               },
               options: taggable_organisations_container([lead_organisation_id]),
@@ -34,7 +33,6 @@
         include_blank: true,
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 21,
           section: "Supporting organisations",
         },
         label: "Supporting organisations",

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

@@ -10,7 +10,6 @@
     heading_size: "m",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: index,
       section: "Roles" + "#{' (required)' if required}",
     },
     options: taggable_roles_container(edition.role_ids),

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

@@ -8,7 +8,6 @@
     options: taggable_statistical_data_sets_container(edition.statistical_data_set_document_ids),
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "Statistical data sets",
     },
     select: {

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

@@ -7,7 +7,6 @@
     heading_size: "m",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 15,
       section: "Topical events",
     },
     options: TopicalEvent.order(:name).map do |topical_event|

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

@@ -1,5 +1,4 @@
 <% required = false unless defined?(required) %>
-<% index = "1" unless defined?(index) %>
 
 <% cache_if edition.world_location_ids.empty?, "#{taggable_world_locations_cache_digest}-design-system" do %>
   <%= render "components/select_with_search", {
@@ -9,7 +8,6 @@
     label: "World locations" + "#{' (required)' if required}",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: index,
       section: "World locations" + "#{' (required)' if required}",
     },
     heading_size: "m",

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

@@ -1,5 +1,4 @@
 <% required = false unless defined?(required) %>
-<% index = "1" unless defined?(index) %>
 
 <% cache_if edition.worldwide_organisation_document_ids.empty?, "#{taggable_worldwide_organisations_cache_digest}-design-system" do %>
   <%= render "components/select_with_search", {
@@ -9,7 +8,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: index,
       section: "Worldwide organisations" + "#{' (required)' if required}",
     },
     label: "Worldwide organisations" + "#{' (required)' if required}",

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

@@ -24,7 +24,6 @@
         heading_size: "l",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 2,
           section: "Political parties (required)",
         },
         options: PoliticalParty.all.map do |party|

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

@@ -13,7 +13,6 @@
           heading_size: "l",
           ga_data: {
             document_type: "#{action_name}-#{controller_name}",
-            index_section: 1,
             section: "Select associated user needs",
           },
           options: taggable_needs_container(@document.need_ids),

app/views/admin/news_articles/_news_article_type_fields.html.erb

@@ -9,7 +9,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "News article type (required)",
     },
     options: NewsArticleType.all.map do |type|

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

@@ -7,7 +7,6 @@
   include_blank: true,
   ga_data: {
     document_type: "#{action_name}-#{controller_name}",
-    index_section: 1,
     section: "Reason for closure (required)",
   },
   options: [
@@ -57,7 +56,6 @@
   heading_size: "m",
   ga_data: {
     document_type: "#{action_name}-#{controller_name}",
-    index_section: 2,
     section: "Superseding organisations",
   },
   options: (Organisation.with_translations(:en) - [organisation]).map do |org|

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

@@ -46,7 +46,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 4,
       section: "Logo crest (required)",
     },
     options: OrganisationLogoType.all.map do |logo_type|
@@ -86,7 +85,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 6,
       section: "Brand colour",
     },
     options: OrganisationBrandColour.all.map do |brand_colour|
@@ -136,7 +134,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 7,
       section: "Organisation type (required)",
     },
     options: OrganisationType.in_listing_order.map do |type|
@@ -259,7 +256,6 @@
       label: "Sponsoring organisations",
       ga_data: {
         document_type: "#{action_name}-#{controller_name}",
-        index_section: 15,
         section: "Sponsoring organisations",
       },
       heading_size: "m",
@@ -293,7 +289,6 @@
         include_blank: true,
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 1,
           section: "Topical Event #{topical_event_organisation.ordering + 1}",
         },
         options: TopicalEvent.all.map do |topical_event|

app/views/admin/publications/_publication_type_fields.html.erb

@@ -9,7 +9,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "Publication type (required)",
     },
     grouped_options: [

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

@@ -5,7 +5,6 @@
   name: "role_appointment[person_id]",
   ga_data: {
     document_type: "#{action_name}-#{controller_name}",
-    index_section: 1,
     section: "Person (required)",
   },
   options:

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

@@ -36,7 +36,6 @@
     name: "role[organisation_ids][]",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 3,
       section: "Organisations",
     },
     options: Organisation.with_translations(:en).map do |org|

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

@@ -10,7 +10,6 @@
           include_blank: true,
           ga_data: {
             document_type: "#{action_name}-#{controller_name}",
-            index_section: 1,
             section: "Service (required)",
           },
           error_items: errors_for(social_media_account.errors, :social_media_service_id),

app/views/admin/speeches/_speaker_select_field.html.erb

@@ -5,7 +5,6 @@
     label: "",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "Edition role appointment ID",
     },
     error_items: errors_for(edition.errors, :role_appointment_id),

app/views/admin/speeches/_speech_type_fields.html.erb

@@ -9,7 +9,6 @@
     include_blank: true,
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "Speech type",
     },
     options: SpeechType.primary.map do |type|

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

@@ -22,7 +22,6 @@
       heading_size: "s",
       ga_data: {
         document_type: "#{action_name}-#{controller_name}",
-        index_section: 1,
         section: "Organisation",
       },
       grouped_options: admin_organisation_filter_options(@filter.options[:organisation_id]),

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

@@ -58,7 +58,6 @@
     name: "statistics_announcement[organisation_ids][]",
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 4,
       section: "Organisations (required)",
     },
     options: Organisation.with_translations.order("organisation_translations.name").map do |org|

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

@@ -13,7 +13,6 @@
         heading_size: "l",
         ga_data: {
           document_type: "#{action_name}-#{controller_name}",
-          index_section: 1,
           section: "Locations",
         },
         options: WorldLocation.all.map do |l|

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

@@ -13,7 +13,6 @@
       include_blank: true,
       ga_data: {
         document_type: "#{action_name}-#{controller_name}",
-        index_section: 1,
         section: "Type",
       },
       options: corporate_information_page_types(@worldwide_organisation).map do |type, value|

app/views/components/_select_with_search.html.erb

@@ -31,6 +31,6 @@
   <% if multiple %>
     <%= hidden_field_tag name, nil %>
   <% end %>
-  <%= select_tag name, select_helper.options_html, id: id, class: select_helper.select_classes, multiple:, aria: select_helper.aria, "data-ga4-document-type": ga_data[:document_type], "data-ga4-index-section": ga_data[:index_section], "data-ga4-section": ga_data[:section] %>
+  <%= select_tag name, select_helper.options_html, id: id, class: select_helper.select_classes, multiple:, aria: select_helper.aria, "data-ga4-document-type": ga_data[:document_type], "data-ga4-section": ga_data[:section] %>
 
 <% end %>

app/views/layouts/design_system.html.erb

@@ -22,7 +22,7 @@
 
   <%= render partial: "shared/header" %>
 
-  <div class="govuk-width-container" data-module="ga4-event-tracker ga4-paste-tracker ga4-link-setup ga4-link-tracker ga4-button-setup ga4-select-with-search-setup">
+  <div class="govuk-width-container" data-module="ga4-event-tracker ga4-paste-tracker ga4-link-setup ga4-link-tracker ga4-button-setup ga4-select-with-search-setup ga4-index-section-setup">
     <%= render "shared/phase_banner", {
       show_feedback_banner: t("admin.feedback.show_banner"),
     } %>

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/index/filter_options_component.html.erb

@@ -53,7 +53,6 @@
               options: options_for_lead_organisation([@filters[:lead_organisation]]),
               ga_data: {
                 document_type: "#{action_name}-#{controller_name}",
-                index_section: 3,
                 section: "Lead organisation",
               },
             }

lib/engines/content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb

@@ -35,7 +35,6 @@
     options: taggable_organisations_container([@form.content_block_edition.edition_organisation&.organisation_id]),
     ga_data: {
       document_type: "#{action_name}-#{controller_name}",
-      index_section: 1,
       section: "Lead organisation",
     },
     select: {