Merge pull request #2471 from alphagov/fix-tracking-attributes

Fix single page notification button data attributes for tracking

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Update search component ([PR #2462](https://github.com/alphagov/govuk_publishing_components/pull/2462))
 * Fix link to Crown Copyright in footer ([PR #2475](https://github.com/alphagov/govuk_publishing_components/pull/2475))
+* Fix single page notification button data attributes for tracking ([PR #2471](https://github.com/alphagov/govuk_publishing_components/pull/2471))
 
 ## 27.14.1
 

app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -26,9 +26,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           var html = document.createElement('div')
           html.innerHTML = newButton
           // test that the html returned contains the button component; if yes, swap the button for the updated version
-          var responseHasButton = html.querySelector('form.gem-c-single-page-notification-button .gem-c-single-page-notification-button__submit')
-          if (responseHasButton) {
-            this.$module.outerHTML = newButton
+          var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
+          if (responseButtonContainer) {
+            this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
           }
         }
       }

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

@@ -2,16 +2,18 @@
   component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
+  wrapper_classes = %w(govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
 %>
 <% button_text = capture do %>
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
-  <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
-  <%= content_tag(:button, button_text, {
-    class: "govuk-body-s gem-c-single-page-notification-button__submit",
-    type: "submit",
-  }) %>
+<%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
+  <%= tag.form class: "gem-c-single-page-notification-button", action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+    <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
+    <%= content_tag(:button, button_text, {
+      class: "govuk-body-s gem-c-single-page-notification-button__submit",
+      type: "submit",
+    }) %>
+  <% end %>
 <% end if component_helper.base_path %>

lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb

@@ -14,15 +14,12 @@ def initialize(local_assigns)
       end
 
       def data
-        module_names = %w[gem-track-click]
-        module_names << "single-page-notification-button" if js_enhancement
-
-        @data_attributes[:label] = base_path
+        @data_attributes[:track_label] = base_path
         # data-action for tracking should have the format of e.g. "Unsubscribe-button-top", or "Subscribe-button-bottom"
         # when button_location is not present data-action will fall back to "Unsubscribe-button"/"Subscribe-button"
-        @data_attributes[:action] = [button_type, "button", button_location].compact.join("-")
-        @data_attributes[:module] = module_names.join(" ")
-        @data_attributes[:category] = "Single-page-notification-button"
+        @data_attributes[:track_action] = [button_type, "button", button_location].compact.join("-")
+        @data_attributes[:module] = "single-page-notification-button" if js_enhancement
+        @data_attributes[:track_category] = "Single-page-notification-button"
         # This attribute is passed through to the personalisation API to ensure when a new button is returned from the API, it has the same button_location
         @data_attributes[:button_location] = button_location
         @data_attributes

spec/components/single_page_notification_button_spec.rb

@@ -31,62 +31,64 @@ def component_name
     assert_select ".gem-c-single-page-notification-button[data-custom-attribute='kaboom!']"
   end
 
-  it "sets a default bottom margin" do
+  it "sets a default bottom margin to its wrapper" do
     render_component({ base_path: "/the-current-page" })
-    assert_select '.gem-c-single-page-notification-button.govuk-\!-margin-bottom-3'
+    assert_select 'div.govuk-\!-margin-bottom-3 .gem-c-single-page-notification-button'
   end
 
-  it "adds bottom margin if margin_bottom is specified" do
+  it "adds bottom margin to its wrapper if margin_bottom is specified" do
     render_component({ base_path: "/the-current-page", margin_bottom: 9 })
-    assert_select '.gem-c-single-page-notification-button.govuk-\!-margin-bottom-9'
+    assert_select 'div.govuk-\!-margin-bottom-9 .gem-c-single-page-notification-button'
   end
 
   it "has a data-module attribute for JavaScript, if the js-enhancement flag is present" do
     render_component({ base_path: "/the-current-page", js_enhancement: true })
-    dom = Nokogiri::HTML(rendered)
-    form_data_module = dom.xpath("//form")[0].attr("data-module")
+    assert_select ".gem-c-single-page-notification-button[data-module='single-page-notification-button']"
+  end
 
-    expect(form_data_module).to include("single-page-notification-button")
+  it "does not have a data-module attribute if the js-enhancement flag is not present" do
+    render_component({ base_path: "/the-current-page" })
+    assert_select ".gem-c-single-page-notification-button[data-module='single-page-notification-button']", false
   end
 
   it "has correct attributes for tracking by default" do
     render_component({ base_path: "/the-current-page" })
-    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Subscribe-button'][data-label='/the-current-page']"
+    assert_select ".gem-c-single-page-notification-button[data-track-category='Single-page-notification-button'][data-track-action='Subscribe-button'][data-track-label='/the-current-page']"
   end
 
   it "has correct attributes for tracking when already_subscribed is true" do
     render_component({ base_path: "/the-current-page", already_subscribed: true })
 
-    assert_select ".gem-c-single-page-notification-button[data-category='Single-page-notification-button'][data-action='Unsubscribe-button'][data-label='/the-current-page']"
+    assert_select ".gem-c-single-page-notification-button[data-track-category='Single-page-notification-button'][data-track-action='Unsubscribe-button'][data-track-label='/the-current-page']"
   end
 
-  it "has the correct default data-action for tracking when button_location is top" do
+  it "has the correct default data-track-action for tracking when button_location is top" do
     render_component({ base_path: "/the-current-page", button_location: "top" })
 
-    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-top']"
+    assert_select ".gem-c-single-page-notification-button[data-track-action='Subscribe-button-top']"
   end
 
-  it "has the correct data-action for tracking when button_location is top and already_subscribed is true" do
+  it "has the correct data-track-action for tracking when button_location is top and already_subscribed is true" do
     render_component({ base_path: "/the-current-page", button_location: "top", already_subscribed: true })
 
-    assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-top']"
+    assert_select ".gem-c-single-page-notification-button[data-track-action='Unsubscribe-button-top']"
   end
 
-  it "has the correct default data-action for tracking when button_location is bottom" do
+  it "has the correct default data-track-action for tracking when button_location is bottom" do
     render_component({ base_path: "/the-current-page", button_location: "bottom" })
 
-    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-bottom']"
+    assert_select ".gem-c-single-page-notification-button[data-track-action='Subscribe-button-bottom']"
   end
 
-  it "has the correct data-action for tracking when button_location is bottom and already_subscribed is true" do
+  it "has the correct data-track-action for tracking when button_location is bottom and already_subscribed is true" do
     render_component({ base_path: "/the-current-page", button_location: "bottom", already_subscribed: true })
 
-    assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-bottom']"
+    assert_select ".gem-c-single-page-notification-button[data-track-action='Unsubscribe-button-bottom']"
   end
 
-  it "has the correct data-action for tracking when button_location has an invalid value" do
+  it "has the correct data-track-action for tracking when button_location has an invalid value" do
     render_component({ base_path: "/the-current-page", button_location: "this is unacceptable" })
 
-    assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button']"
+    assert_select ".gem-c-single-page-notification-button[data-track-action='Subscribe-button']"
   end
 end