diff --git a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
index 027da23ec3..c0aedc7557 100644
--- a/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
+++ b/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
@@ -1,31 +1,17 @@
<%
- page ||= ''
- data_attributes ||= {}
- base_path ||= nil
- local_assigns[:margin_bottom] ||= 3
- already_subscribed ||= false
- js_enhancement ||= false
- text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
-
+ 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 << shared_helper.get_margin_bottom
- classes = "govuk-body-s gem-c-single-page-notification-button__submit"
- module_names = %w(gem-track-click)
- module_names << "single-page-notification-button" if js_enhancement
-
- data_attributes[:module] = module_names.join(" ")
- data_attributes[:category] = "Single-page-notification-button"
- data_attributes[:action] = already_subscribed ? "Unsubscribe button" : "Subscribe button"
- data_attributes[:label] = base_path if base_path
%>
<% button_text = capture do %>
- <%= text %>
+ <%= component_helper.button_text %>
<% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: data_attributes do %>
-
+<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+
<%= content_tag(:button, button_text, {
- class: classes,
+ class: "govuk-body-s gem-c-single-page-notification-button__submit",
type: "submit",
}) %>
-<% end if base_path.presence %>
+<% end if component_helper.base_path %>
diff --git a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml b/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
index f5eca9cf57..fc0f8b7d56 100644
--- a/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
+++ b/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml
@@ -24,7 +24,7 @@ examples:
data:
base_path: '/current-page-path'
data_attributes:
- category: fancyButtons
+ test_attribute: "testing"
with_margin_bottom:
description: |
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 15px.
@@ -37,3 +37,13 @@ examples:
data:
base_path: '/current-page-path'
js_enhancement: true
+ with_button_location:
+ description: |
+ When there is more than one button on a page, we should specify their location so that Analytics can differentiate between them.
+
+ The location should have one of two values: "top-of-page" or "bottom-of-page".
+
+ When this parameter is passed, its value is reflected in the `data-action` attribute (i.e "Unsubscribe-button-top-of-page"). When the flag is not present, `data-action` defaults to "Subscribe button" or "Unsubscribe button", depending on the state of the button.
+ data:
+ base_path: '/current-page-path'
+ button_location: 'top-of-page'
diff --git a/lib/govuk_publishing_components.rb b/lib/govuk_publishing_components.rb
index feb8ddc854..27258dfc23 100644
--- a/lib/govuk_publishing_components.rb
+++ b/lib/govuk_publishing_components.rb
@@ -33,6 +33,7 @@
require "govuk_publishing_components/presenters/organisation_logo_helper"
require "govuk_publishing_components/presenters/highlight_boxes_helper"
require "govuk_publishing_components/presenters/taxonomy_list_helper"
+require "govuk_publishing_components/presenters/single_page_notification_button_helper"
require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
require "govuk_publishing_components/app_helpers/table_helper"
diff --git a/spec/components/single_page_notification_button_spec.rb b/spec/components/single_page_notification_button_spec.rb
index a6c1525117..f38041b24c 100644
--- a/spec/components/single_page_notification_button_spec.rb
+++ b/spec/components/single_page_notification_button_spec.rb
@@ -51,12 +51,42 @@ def component_name
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-category='Single-page-notification-button'][data-action='Subscribe-button'][data-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-category='Single-page-notification-button'][data-action='Unsubscribe-button'][data-label='/the-current-page']"
+ end
+
+ it "has the correct default data-action for tracking when button_location is top-of-page" do
+ render_component({ base_path: "/the-current-page", button_location: "top-of-page" })
+
+ assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-top-of-page']"
+ end
+
+ it "has the correct data-action for tracking when button_location is top-of-page and already_subscribed is true" do
+ render_component({ base_path: "/the-current-page", button_location: "top-of-page", already_subscribed: true })
+
+ assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-top-of-page']"
+ end
+
+ it "has the correct default data-action for tracking when button_location is bottom-of-page" do
+ render_component({ base_path: "/the-current-page", button_location: "bottom-of-page" })
+
+ assert_select ".gem-c-single-page-notification-button[data-action='Subscribe-button-bottom-of-page']"
+ end
+
+ it "has the correct data-action for tracking when button_location is bottom-of-page and already_subscribed is true" do
+ render_component({ base_path: "/the-current-page", button_location: "bottom-of-page", already_subscribed: true })
+
+ assert_select ".gem-c-single-page-notification-button[data-action='Unsubscribe-button-bottom-of-page']"
+ end
+
+ it "has the correct data-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']"
end
end