Merge pull request #2514 from alphagov/ga4-tracking-accordions

Add GA4 accordion tracking to manuals
alphagov · Aug 17, 2022 · f4204bb · f4204bb
2 parents c772986 + 3f631ae
commit f4204bb
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 15 deletions.
diff --git a/app/helpers/manuals_helper.rb b/app/helpers/manuals_helper.rb
@@ -0,0 +1,7 @@
+module ManualsHelper
+  def sanitize_manual_update_title(title)
+    return "" if title.nil?
+
+    strip_tags(title).gsub(I18n.t("manuals.updates_amendments"), "").gsub(/\s+/, " ").strip
+  end
+end
diff --git a/app/presenters/content_item/manual_updates.rb b/app/presenters/content_item/manual_updates.rb
@@ -42,7 +42,7 @@ def marked_up_date(date)
       formatted_date = I18n.l(date, format: "%-d %B %Y") if date
       updates_span = view_context.content_tag("span",
                                               I18n.t("manuals.updates_amendments"),
-                                              class: "visuallyhidden")
+                                              class: "govuk-visually-hidden")
 
       formatted_date = "#{formatted_date} #{updates_span}"
       view_context.sanitize(formatted_date)

diff --git a/app/views/content_items/manual_section.html.erb b/app/views/content_items/manual_section.html.erb
@@ -49,20 +49,45 @@
                 </div>
               <% end %>
             <% else %>
-              <%= render "govuk_publishing_components/components/accordion", {
-                anchor_navigation: true,
-                items: @content_item.main.map do |item|
+              <%
+                items = @content_item.main.each.with_index(1).map do |item, index|
                   rendered_content = render "govuk_publishing_components/components/govspeak", {} do
                     raw(item[:content])
                   end
 
                   {
+                    data_attributes: {
+                      module: "gtm-track-click",
+                      ga4: {
+                        event_name: "select_content",
+                        type: "accordion",
+                        text: item[:heading],
+                        index: index,
+                        index_total: @content_item.main.length,
+                      }
+                    },
                     heading: item[:heading],
                     content: {
                       html: rendered_content,
                     },
                   }
                 end
+              %>
+
+              <%
+                ga4_attributes = {
+                  event_name: "select_content",
+                  type: "accordion",
+                  index: 0,
+                  index_total: @content_item.main.length,
+                }
+              %>
+              <%= render "govuk_publishing_components/components/accordion", {
+                data_attributes_show_all: {
+                  "ga4": ga4_attributes.to_json
+                },
+                anchor_navigation: true,
+                items: items,
               } %>
             <% end %>
           <% end %>

diff --git a/app/views/content_items/manuals/_updates.html.erb b/app/views/content_items/manuals/_updates.html.erb
@@ -18,23 +18,45 @@
             font_size: "l"
           } %>
 
+          <%
+            show_all_attributes = {
+              event_name: "select_content",
+              type: "accordion",
+              index: 0,
+              index_total: updates_by_year.length,
+            }
+          %>
           <%= render "govuk_publishing_components/components/accordion", {
             heading_level: 3,
-            items: updates_by_year.map do |day, updated_documents|
+            data_attributes_show_all: {
+              "ga4": show_all_attributes.to_json
+            },
+            items: updates_by_year.each.with_index(1).map do |updated_documents, index|
               accordion_content = capture do %>
+                <% change_notes = updated_documents.last %>
                 <div class="govuk-!-margin-top-3">
-                  <% updated_documents.each do |_, change_notes| %>
-                    <% change_notes.each do |change_note| %>
-                      <p class="govuk-body"><%= link_to change_note["title"], change_note["base_path"], class: "govuk-link" %></p>
-                      <%= simple_format(change_note["change_note"], class: "govuk-body") %>
-                    <% end %>
+                  <% change_notes.each do |change_note_entry| %>
+                    <% change_note = change_note_entry.flatten.last %>
+                    <p class="govuk-body">
+                      <%= link_to change_note["title"], change_note["base_path"], class: "govuk-link" %>
+                    </p>
+                    <%= simple_format(change_note["change_note"], class: "govuk-body") %>
                   <% end %>
                 </div>
               <% end
-
               {
+                data_attributes: {
+                  module: "gtm-track-click",
+                  ga4: {
+                    event_name: 'select_content',
+                    type: 'accordion',
+                    text: sanitize_manual_update_title(updated_documents.first),
+                    index: index,
+                    index_total: updates_by_year.length,
+                  }
+                },
                 heading: {
-                  text: day,
+                  text: updated_documents.first,
                 },
                 content: {
                   html: accordion_content

diff --git a/test/helpers/manuals_helper_test.rb b/test/helpers/manuals_helper_test.rb
@@ -0,0 +1,33 @@
+require "test_helper"
+
+class ManualsHelperTest < ActionView::TestCase
+  test "it returns an empty string when given an empty string" do
+    expected = ""
+    actual = ""
+    assert_equal(expected, sanitize_manual_update_title(actual))
+  end
+
+  test "it returns an empty string when given nil" do
+    expected = ""
+    actual = nil
+    assert_equal(expected, sanitize_manual_update_title(actual))
+  end
+
+  test "it removes HTML from the title" do
+    expected = "Hello world"
+    actual = " <h1> Hello world </h1> "
+    assert_equal(expected, sanitize_manual_update_title(actual))
+  end
+
+  test "it removes the manuals.updates_amendments string from the title" do
+    expected = "Hello world"
+    actual = " <h1> Hello world </h1> <span> #{I18n.t('manuals.updates_amendments')} </span> "
+    assert_equal(expected, sanitize_manual_update_title(actual))
+  end
+
+  test "it only the unrequired elements from the title" do
+    expected = "Hello world ABC XYZ"
+    actual = " <h1> Hello world </h1> <span> ABC #{I18n.t('manuals.updates_amendments')} XYZ </span> "
+    assert_equal(expected, sanitize_manual_update_title(actual))
+  end
+end
diff --git a/test/presenters/content_item/manual_updates_test.rb b/test/presenters/content_item/manual_updates_test.rb
@@ -70,14 +70,14 @@ def initialize
         2014,
         [
           [
-            "6 October 2014 <span class=\"visuallyhidden\">#{I18n.t('manuals.updates_amendments')}</span>",
+            "6 October 2014 <span class=\"govuk-visually-hidden\">#{I18n.t('manuals.updates_amendments')}</span>",
             {
               (first_note["base_path"]).to_s => [first_note],
               (second_note["base_path"]).to_s => [second_note],
             },
           ],
           [
-            "6 August 2014 <span class=\"visuallyhidden\">#{I18n.t('manuals.updates_amendments')}</span>",
+            "6 August 2014 <span class=\"govuk-visually-hidden\">#{I18n.t('manuals.updates_amendments')}</span>",
             {
               (third_note["base_path"]).to_s => [third_note],
             },
@@ -88,7 +88,7 @@ def initialize
         2013,
         [
           [
-            "6 November 2013 <span class=\"visuallyhidden\">#{I18n.t('manuals.updates_amendments')}</span>",
+            "6 November 2013 <span class=\"govuk-visually-hidden\">#{I18n.t('manuals.updates_amendments')}</span>",
             {
               (fourth_note["base_path"]).to_s => [fourth_note],
             },