Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix single page notification button data attributes for tracking #2471

Merged
merged 3 commits into from
Nov 25, 2021
Merged

Fix single page notification button data attributes for tracking #2471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5789c5a
Fix single page notification button data attrs
danacotoran Nov 24, 2021
6495067
update CHANGELOG
danacotoran Nov 24, 2021
2dc71b5
Apply track click attribute to wrapper
danacotoran Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions ...ets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}
}
Expand Down
16 changes: 9 additions & 7 deletions app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
11 changes: 4 additions & 7 deletions lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
40 changes: 21 additions & 19 deletions spec/components/single_page_notification_button_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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