Add GA4 to nested contents item links

- include GA4 attributes for tracking on nested contents item links
- includes new code to calculate the index_total (total number of links) and the index_link value for each link
- note that where a contents list item is 'active' (i.e. not a link) this should not alter the overall index_total or index_link values, it is assumed that this non-link item is included in those counts

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Add GA4 to nested contents item links ([PR #3638](https://github.com/alphagov/govuk_publishing_components/pull/3638))
 * Change GA4 contents list type ([PR #3635](https://github.com/alphagov/govuk_publishing_components/pull/3635))
 * Change prev and next GA4 type ([PR #3631](https://github.com/alphagov/govuk_publishing_components/pull/3631))
 * Remove timestamps from GA4 video urls ([PR #3632](https://github.com/alphagov/govuk_publishing_components/pull/3632))

app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -14,9 +14,10 @@
 
   ga4_tracking ||= false
   ga4_data = {
-      event_name: "navigation",
-      type: "contents list",
-      section: t("components.contents_list.contents", locale: :en) || ""
+    event_name: "navigation",
+    type: "contents list",
+    section: t("components.contents_list.contents", locale: :en) || "",
+    index_total: cl_helper.get_index_total
   } if ga4_tracking
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -37,15 +38,15 @@
     <% end %>
 
     <ol class="gem-c-contents-list__list">
+      <% index_link = 1 if ga4_tracking %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
-             if ga4_tracking
+            if ga4_tracking
               ga4_data[:index] = {
-                  "index_link": position,
+                "index_link": index_link,
               }
-              ga4_data[:index_total] = contents.length
-             end
+            end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
@@ -59,11 +60,18 @@
               ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
             }
           %>
-
+          <% index_link += 1 if ga4_tracking %>
           <% if contents_item[:items] && contents_item[:items].any? %>
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
+                  <%
+                    if ga4_tracking
+                      ga4_data[:index] = {
+                        "index_link": index_link,
+                      }
+                    end
+                  %>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],
                     class: link_classes,
                     data: {
@@ -72,13 +80,15 @@
                       track_label: nested_contents_item[:href],
                       track_options: {
                         dimension29: nested_contents_item[:text]
-                      }
+                      },
+                      ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
                     }
                   %>
                 </li>
+                <% index_link += 1 if ga4_tracking %>
               <% end %>
             </ol>
-            <% end %>
+          <% end %>
         </li>
       <% end %>
     </ol>

app/views/govuk_publishing_components/components/docs/contents_list.yml

@@ -204,6 +204,7 @@ examples:
             text: 1. Nested Item
           - href: "#third-thing"
             text: 2. Nested Item
+            active: true
         - href: "#first-thing"
           text: 2. Second thing
           items:

lib/govuk_publishing_components/presenters/contents_list_helper.rb

@@ -40,6 +40,14 @@ def wrap_numbers_with_spans(content_item_link)
         end
       end
 
+      def get_index_total
+        total = @contents.length
+        @contents.each do |parent|
+          total += parent[:items].length if parent[:items]
+        end
+        total
+      end
+
     private
 
       def parent_modifier

spec/components/contents_list_spec.rb

@@ -27,6 +27,7 @@ def nested_contents_list
       items: [
         { href: "/nested-one", text: "Nested one" },
         { href: "/nested-two", text: "Nested two" },
+        { text: "Active", active: true },
         { href: "/nested-four", text: "4. Four" },
       ],
     }
@@ -126,7 +127,7 @@ def assert_tracking_link(name, value, total = 1)
   end
 
   it "ga4 tracking is added when ga4_tracking is true" do
-    render_component(contents: contents_list_with_active_item, ga4_tracking: true)
+    render_component(contents: nested_contents_list, ga4_tracking: true)
 
     expected_ga4_json = {
       event_name: "navigation",
@@ -135,26 +136,24 @@ def assert_tracking_link(name, value, total = 1)
     }
 
     # Parent element attributes
-
     assert_select ".gem-c-contents-list" do |contents_list|
       expect(contents_list.attr("data-module").to_s).to eq "gem-track-click ga4-link-tracker"
     end
 
     # Child link attributes
-
+    expected_ga4_json[:index_total] = 7
     expected_ga4_json[:index] = { index_link: 1 }
-    expected_ga4_json[:index_total] = 3
-
-    assert_select ".gem-c-contents-list__list-item:first-of-type a" do |contents_list|
-      expect(contents_list.attr("data-ga4-link").to_s).to eq expected_ga4_json.to_json
-    end
 
-    expected_ga4_json[:index] = { index_link: 3 }
+    contents_list_links = assert_select(".gem-c-contents-list__list-item a")
 
-    # Test the third link in the list. The 2nd list item is the active item, so it's just text. But the index position of that item should still be respected.
-    # Therefore the third link should still have an index of 3 even though there's only two <a> tags.
-    assert_select ".gem-c-contents-list__list-item:last-of-type a" do |contents_list|
-      expect(contents_list.attr("data-ga4-link").to_s).to eq expected_ga4_json.to_json
+    # Test the links in the list. The 6th list item is the active item, so it's just text, but the index position of that item
+    # should still be respected. Therefore the final link should still have an index of 7 even though there's only 6 <a> tags.
+    index_links = [1, 2, 3, 4, 5, 7]
+    texts = ["1. One", "2. Two", "3. Three", "Nested one", "Nested two", "4. Four"]
+    contents_list_links.each_with_index do |link, index|
+      expected_ga4_json[:index] = { index_link: index_links[index] }
+      expect(link.attr("data-ga4-link").to_s).to eq expected_ga4_json.to_json
+      expect(link).to have_text(texts[index])
     end
   end
 

spec/lib/govuk_publishing_components/components/contents_list_helper_spec.rb

@@ -74,6 +74,28 @@
       expected = '<a href="#run-an-effective-welfare-system">Run an effective welfare system part 1. Social Care</a>'
       expect(cl.wrap_numbers_with_spans(input)).to eql(expected)
     end
+
+    it "counts the number of links in the component" do
+      contents = [
+        {
+          text: "test1",
+          items: [
+            {
+              text: "test2",
+            },
+            {
+              text: "test3",
+              active: true,
+            },
+          ],
+        },
+        {
+          text: "test3",
+        },
+      ]
+      cl = GovukPublishingComponents::Presenters::ContentsListHelper.new({ contents: contents })
+      expect(cl.get_index_total).to eql(4)
+    end
   end
 
   def assert_split_number_and_text(number_and_text, number, text)