Merge pull request #3082 from alphagov/ga4-refactor-accordion

Simplify the way ga4 tracking is added to accordions

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
 

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')
       }
 

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

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]
 

app/views/govuk_publishing_components/components/docs/accordion.yml

@@ -181,21 +181,33 @@ examples:
                     <a class="govuk-link" href="#">Retiring your service</a>
                   </li>
               </ul>'
+  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: <p class="govuk-body">This is the content for Writing well for the web.</p>
+        - heading:
+            text: Writing well for specialists
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   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:

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
-  }
-%>
 <div data-module="ga4-event-tracker">
   <%= render 'govuk_publishing_components/components/accordion', {
-    data_attributes_show_all: {
-      "ga4": ga4_attributes.to_json
-    },
+    ga4_tracking: true,
     items: []
   } %>
 </div>
@@ -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
   }
 }
 ```

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: "<p>Content 1.</p>" },
+        },
+      ],
+    }
+
+    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",

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' }))
   })
 })

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 =
         '<div data-ga4-event=\'' + JSON.stringify(attributes) + '\'' +
-          'class="gem-c-accordion"' +
+          'data-ga4-expandable' +
         '>' +
           '<button aria-expanded="false">Show</button>' +
         '</div>'
@@ -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()