Merge pull request #3495 from alphagov/ga4-content-nav-fixes

GA4 content navigation fixes

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* GA4 content navigation fixes ([PR #3495](https://github.com/alphagov/govuk_publishing_components/pull/3495))
+
 ## 35.10.0
 
 * Add margin_bottom param to Attachment component ([PR #3475](https://github.com/alphagov/govuk_publishing_components/pull/3475))

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

@@ -13,20 +13,16 @@
   link_classes << "govuk-link--no-underline" unless underline_links
 
   ga4_tracking ||= false
-  ga4_data = nil
-  if ga4_tracking
-    ga4_data = {
+  ga4_data = {
       event_name: "navigation",
       type: "content",
       section: t("components.contents_list.contents", locale: :en) || ""
-    }.to_json
-  end
+  } if ga4_tracking
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
   component_helper.add_data_attribute({ module: "gem-track-click" })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if ga4_tracking
-  component_helper.add_data_attribute({ ga4_link: ga4_data, ga4_track_links_only: "" }) if ga4_tracking
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")
 -%>
@@ -44,8 +40,12 @@
       <% 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]
-             ga4_link_data = nil
-             ga4_link_data = { "index": { "index_link": position }, "index_total": contents.length }.to_json if ga4_tracking
+             if ga4_tracking
+              ga4_data[:index] = {
+                  "index_link": position,
+              }
+              ga4_data[:index_total] = contents.length
+             end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
@@ -56,7 +56,7 @@
               track_options: {
                 dimension29: contents_item[:text]
               },
-              ga4_link: ga4_link_data
+              ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
             }
           %>
 

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

@@ -23,7 +23,8 @@
   ga4_object = {
     event_name: "navigation",
     type: "content",
-    section: "Top"
+    section: "Top",
+    action: "opened"
   }.to_json
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>

spec/components/contents_list_spec.rb

@@ -128,34 +128,33 @@ def assert_tracking_link(name, value, total = 1)
   it "ga4 tracking is added when ga4_tracking is true" do
     render_component(contents: contents_list_with_active_item, ga4_tracking: true)
 
-    # Test component attributes
-
     expected_ga4_json = {
       event_name: "navigation",
       type: "content",
       section: "Contents",
-    }.to_json
+    }
+
+    # Parent element attributes
 
     assert_select ".gem-c-contents-list" do |contents_list|
-      expect(contents_list.attr("data-ga4-link").to_s).to eq expected_ga4_json
-      expect(contents_list.attr("data-ga4-track-links-only").to_s).to eq ""
-      expect(contents_list.attr("data-ga4-set-indexes").to_s).to eq ""
+      expect(contents_list.attr("data-module").to_s).to eq "gem-track-click ga4-link-tracker"
     end
 
-    # Test child link indexes
+    # Child link attributes
 
-    expected_ga4_json = { index: { index_link: 1 }, index_total: 3 }.to_json
+    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
+      expect(contents_list.attr("data-ga4-link").to_s).to eq expected_ga4_json.to_json
     end
 
-    expected_ga4_json = { index: { index_link: 3 }, index_total: 3 }.to_json
+    expected_ga4_json[:index] = { index_link: 3 }
 
     # 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
+      expect(contents_list.attr("data-ga4-link").to_s).to eq expected_ga4_json.to_json
     end
   end
 

spec/components/metadata_spec.rb

@@ -213,6 +213,7 @@ def component_name
       "event_name": "navigation",
       "type": "content",
       "section": "Top",
+      "action": "opened",
     }.to_json
 
     assert_select ".js-see-all-updates-link" do |see_all_updates_link|