From c90f379342c89dce1672ac096ed4164061a60fa3 Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Tue, 22 Nov 2022 12:26:31 +0000 Subject: [PATCH] Simplify the way ga4 tracking is added to accordions Previously we were passing a GTM object to each accordions render statement inside of a frontend app. Instead, it's simpler to just pass a boolean in the frontend apps, and then we handle the GTM object inside of govuk_publishing_components. This gives us the benefit of only having to maintain our GTM code in one repo. The old show_all_attributes took a JSON which contained JSONS, and appended each one as a data-attribute to the 'Show all link'. This broke the refactored accordion tracking, as we now only pass through one JSON, not a JSON which contains JSONs. The old show_all_attributes is no longer needed for GA4, but we can't modify the code for it as it is now being used for UA. Therefore I've separated the new ga4 functionality out, which as a side effect gives us a more accurate data attribute name, 'data-ga4-show-all-attributes'. --- CHANGELOG.md | 1 + .../analytics-ga4/ga4-event-tracker.js | 4 +-- .../components/accordion.js | 13 ++++++- .../components/_accordion.html.erb | 15 +++++++- .../components/docs/accordion.yml | 18 ++++++++-- docs/analytics-ga4/ga4-event-tracker.md | 34 +++++-------------- spec/components/accordion_spec.rb | 21 +++++++++++- spec/javascripts/components/accordion-spec.js | 9 +++++ .../analytics-ga4/ga4-event-tracker.spec.js | 6 ++-- 9 files changed, 84 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88c21a6712..99d5e63a9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * Update to LUX 304 ([PR #3070](https://github.com/alphagov/govuk_publishing_components/pull/3070)) * Set attributes for single page notification button based on Account API response ([PR #3071](https://github.com/alphagov/govuk_publishing_components/pull/3071)) * Support custom text for the single page notification button component ([PR #2935](https://github.com/alphagov/govuk_publishing_components/pull/2935)) +* Simplify the way ga4 tracking is added to accordions ([PR #3082](https://github.com/alphagov/govuk_publishing_components/pull/3082)) ## 32.1.0 diff --git a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js index a8d29e627e..274d7cf6b2 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +++ b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js @@ -51,8 +51,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } } - /* Ensure it only tracks aria-expanded in an accordion or element with data-ga4-expandable on it. */ - if (target.closest('.gem-c-accordion') || target.closest('[data-ga4-expandable]')) { + /* Ensure it only tracks aria-expanded in an element with data-ga4-expandable on it. */ + if (target.closest('[data-ga4-expandable]')) { var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded') } diff --git a/app/assets/javascripts/govuk_publishing_components/components/accordion.js b/app/assets/javascripts/govuk_publishing_components/components/accordion.js index 1841335d83..472fb82bfe 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/accordion.js +++ b/app/assets/javascripts/govuk_publishing_components/components/accordion.js @@ -43,9 +43,10 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion; // look for data attributes to put onto the 'show/hide all' link var showAllAttributes = this.$module.getAttribute('data-show-all-attributes') + var showAll if (showAllAttributes) { try { - var showAll = this.$module.querySelector(this.showAllControls) + showAll = this.$module.querySelector(this.showAllControls) var values = JSON.parse(showAllAttributes) var keys = Object.keys(values) for (var i = 0; i < keys.length; i++) { @@ -55,6 +56,16 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion; console.error('Could not read accordion data attributes error: ' + e.message, window.location) } } + + // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker + var dataModule = this.$module.getAttribute('data-module') + var isGa4Enabled = dataModule ? dataModule.indexOf('ga4-event-tracker') !== -1 : false + if (isGa4Enabled) { + var indexTotal = this.$module.querySelectorAll('.govuk-accordion__section').length + var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index: 0, index_total: indexTotal } + showAll = this.$module.querySelector(this.showAllControls) + showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4)) + } } // Navigate to and open accordions with anchored content on page load if a hash is present diff --git a/app/views/govuk_publishing_components/components/_accordion.html.erb b/app/views/govuk_publishing_components/components/_accordion.html.erb index 6cef2f5a11..7a0318d0d5 100644 --- a/app/views/govuk_publishing_components/components/_accordion.html.erb +++ b/app/views/govuk_publishing_components/components/_accordion.html.erb @@ -23,10 +23,12 @@ data_attributes ||= {} ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip! + ga4_tracking ||= false + data_attributes[:module] << " ga4-event-tracker" if ga4_tracking + data_attributes[:ga4_expandable] = '' if ga4_tracking data_attributes[:anchor_navigation] = anchor_navigation data_attributes[:track_show_all_clicks] = track_show_all_clicks data_attributes[:track_sections] = track_sections - data_attributes_show_all ||= nil data_attributes[:show_all_attributes] = data_attributes_show_all if data_attributes_show_all @@ -57,6 +59,17 @@ item[:data_attributes] ||= nil + if ga4_tracking + item[:data_attributes] ||= {} + item[:data_attributes][:ga4_event] = { + event_name: "select_content", + type: "accordion", + text: item[:heading][:text], + index: index, + index_total: items.length + }.to_json + end + section_classes = %w(govuk-accordion__section) section_classes << 'govuk-accordion__section--expanded' if item[:expanded] diff --git a/app/views/govuk_publishing_components/components/docs/accordion.yml b/app/views/govuk_publishing_components/components/docs/accordion.yml index f00af4cf4c..87c8d9337b 100644 --- a/app/views/govuk_publishing_components/components/docs/accordion.yml +++ b/app/views/govuk_publishing_components/components/docs/accordion.yml @@ -181,21 +181,33 @@ examples: Retiring your service ' + with_ga4_tracking: + description: | + Allows you to add GA4 tracking to an accordion. This will add a data module and data-attributes with JSONs to the accordion. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information. + data: + ga4_tracking: true + items: + - heading: + text: Writing well for the web + content: + html:

This is the content for Writing well for the web.

+ - heading: + text: Writing well for specialists + content: + html:

This is the content for Writing well for specialists.

with_data_attributes: description: | Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added. The `data_attributes` option applies attributes to the outermost element in the accordion. Each item can also have a `data_attributes` hash, which are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion. - Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). More details on how this can be used with the GA4 event tracking can be found in the 'Advanced' section of the [event tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md). + Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). Currently, this is only used for tracking with Universal Analytics. If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked. data: data_attributes: custom_data_attr: custom-data-attr-accordion data_attributes_show_all: - custom_data_attr-event-name: example - custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }" tracking-options: "{ 'dimension114': 1 }" items: - heading: diff --git a/docs/analytics-ga4/ga4-event-tracker.md b/docs/analytics-ga4/ga4-event-tracker.md index 5cc6be2668..49c6d6ec88 100644 --- a/docs/analytics-ga4/ga4-event-tracker.md +++ b/docs/analytics-ga4/ga4-event-tracker.md @@ -46,21 +46,12 @@ Many components already accept data attributes in this way (see the [component g ### Overview -To track clicks on the 'Show/hide all sections' accordion link, pass data to the accordion using the `data_attributes_show_all` option as shown. +To track clicks on the 'Show/hide all sections' accordion link, use the `ga4_tracking` option as shown. ```erb -<% - ga4_attributes = { - event_name: "select_content", - type: "accordion", - # other attributes - } -%>
<%= render 'govuk_publishing_components/components/accordion', { - data_attributes_show_all: { - "ga4": ga4_attributes.to_json - }, + ga4_tracking: true, items: [] } %>
@@ -72,16 +63,13 @@ In some situations we want to track dynamic elements like the 'Show/hide all sec It is also complicated by the fact that the JavaScript that creates this element is imported from `govuk-frontend` and therefore can't be modified directly. In order to get attributes onto this link, we have to do the following. -- pass attributes to the accordion for the 'Show/hide all' link using the `data_attributes_show_all` option - - this should contain an object with one or many keys, each with a value converted into JSON - - this is appended to the main component element as `data-show-all-attributes` -- the 'Show/hide all' link is created by govuk-frontend JavaScript -- the accordion JavaScript reads `data-show-all-attributes` - - it creates a `data-` attribute on the 'Show/hide all' link for each key in the JSON - - in the example above, the result will be `data-ga4-event="{ "event_name": "select_content", "type": "accordion" }"` -- wrap the accordion in the event tracking script +- Enable tracking for an accordion using the `ga4_tracking` option +- the 'Show/hide all' link is created by `govuk-frontend` JavaScript +- the accordion JavaScript checks for `ga4-event-tracker` + - it adds `data-ga4-event` with the relevant GTM JSON to the 'Show/hide all' link + - in the example above, the result will be `data-ga4-event="{ "event_name": "select_content", "type": "accordion", index: "0", index_total: "0" }"` - tracking will be activated by clicks on elements with a `data-ga4-event` attribute - - it checks for an `aria-expanded` attribute if the clicked element or parent element contains a `data-ga4-expandable` value or the `gem-c-accordion` class. If it detects one of those, it sets the `action` of the GA data accordingly. + - it checks for an `aria-expanded` attribute, as the accordion will contain a `data-ga4-expandable` value. This sets the `action` property of the `event_data` object accordingly. - the current text of the clicked element is also recorded (this can be overridden to a non-dynamic value by including `text` in the attributes if required) When a user clicks 'Show all sections' the following information is pushed to the dataLayer. @@ -92,13 +80,10 @@ When a user clicks 'Show all sections' the following information is pushed to th 'event_data': { 'event_name': 'select_content', 'type': 'accordion', - 'url': null, 'text': 'Show all sections', 'index': '0', 'index-total': '5', - 'section': null, 'action': 'opened', - 'external': null } } ``` @@ -111,13 +96,10 @@ When a user clicks 'Hide all sections' the following information is pushed to th 'event_data': { 'event_name': 'select_content', 'type': 'accordion', - 'url': null, 'text': 'Hide all sections', 'index': '0', 'index-total': '5', - 'section': null, 'action': 'closed', - 'external': null } } ``` diff --git a/spec/components/accordion_spec.rb b/spec/components/accordion_spec.rb index 02bb41d55b..3366c9c07e 100644 --- a/spec/components/accordion_spec.rb +++ b/spec/components/accordion_spec.rb @@ -174,7 +174,7 @@ def component_name assert_select "[data-gtm='google-tag-manager']", count: 2 end - it "data attributes for show all link are present when required" do + it "universal analytics data attributes for show all link are present when required" do test_data = { id: "test-for-data-attributes", data_attributes_show_all: { @@ -194,6 +194,25 @@ def component_name assert_select ".govuk-accordion[data-show-all-attributes='{\"module\":\"example\",\"track_action\":\"click\"}']" end + it "ga4 data attributes are present when required" do + test_data = { + id: "test-for-data-attributes", + ga4_tracking: true, + items: [ + { + heading: { text: "Heading 1" }, + content: { html: "

Content 1.

" }, + }, + ], + } + + render_component(test_data) + + assert_select ".govuk-accordion[data-ga4-expandable]" + assert_select '.govuk-accordion[data-module="govuk-accordion gem-accordion ga4-event-tracker"]' + assert_select '.govuk-accordion__section-heading[data-ga4-event=\'{"event_name":"select_content","type":"accordion","text":"Heading 1","index":1,"index_total":1}\']' + end + it '`data-module="govuk-accordion"` attribute is present when no custom data attributes given' do test_data = { id: "test-for-module-data-attributes", diff --git a/spec/javascripts/components/accordion-spec.js b/spec/javascripts/components/accordion-spec.js index 92c4054e7a..fcdd1d0dec 100644 --- a/spec/javascripts/components/accordion-spec.js +++ b/spec/javascripts/components/accordion-spec.js @@ -104,10 +104,19 @@ describe('Accordion component', function () { dimensionExample: 'Example value' }) } + var ga4Object = { + event_name: 'select_content', + type: 'accordion', + index: 0, + index_total: 3 + } accordion.setAttribute('data-show-all-attributes', JSON.stringify(wrappingObject)) + accordion.setAttribute('data-module', accordion.getAttribute('data-module') + ' ga4-event-tracker') startAccordion() + expect(document.querySelector('.govuk-accordion__show-all').getAttribute('data-custom-data-attr-event-name')).toEqual('example') expect(document.querySelector('.govuk-accordion__show-all').getAttribute('data-show-all-attributes')).toEqual(JSON.stringify(object)) + expect(document.querySelector('.govuk-accordion__show-all').getAttribute('data-ga4-event')).toEqual(JSON.stringify(ga4Object)) expect(document.querySelector('.govuk-accordion__show-all').getAttribute('data-track-options')).toEqual(JSON.stringify({ dimensionExample: 'Example value' })) }) }) diff --git a/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js b/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js index b1bb830027..5fcb896212 100644 --- a/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js +++ b/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js @@ -175,7 +175,7 @@ describe('Google Analytics event tracking', function () { var attributes = { text: 'some text' } - element.classList.add('gem-c-accordion') + element.setAttribute('data-ga4-expandable', '') element.setAttribute('data-ga4-event', JSON.stringify(attributes)) element.setAttribute('aria-expanded', 'false') document.body.appendChild(element) @@ -250,7 +250,7 @@ describe('Google Analytics event tracking', function () { } element.innerHTML = '
' + '' + '
' @@ -259,7 +259,7 @@ describe('Google Analytics event tracking', function () { }) it('includes the expanded state in the ga4 attributes', function () { - var clickOn = element.querySelector('.gem-c-accordion') + var clickOn = element.querySelector('[data-ga4-expandable]') clickOn.click() expected = new GOVUK.analyticsGa4.Schemas().eventSchema()