Allow custom text for scroll tracker

- allows text of headings and markers to be overridden using a custom `data-ga4-text` attribute

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Allow custom text for GA4 scroll tracker ([PR #3896](https://github.com/alphagov/govuk_publishing_components/pull/3896))
+
 ## 37.5.1
 
 * Remove GA4 callout tracking from govspeak component ([PR #3889](https://github.com/alphagov/govuk_publishing_components/pull/3889))

app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-scroll-tracker.js

@@ -164,7 +164,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           bottom: pos.bottom + document.documentElement.scrollTop,
           eventData: {
             type: type,
-            text: heading.textContent.replace(/\s+/g, ' ').trim(),
+            text: heading.getAttribute('data-ga4-text') || heading.textContent.replace(/\s+/g, ' ').trim(),
             index_section: i + 1,
             index_section_count: totalHeadings
           }

docs/analytics-ga4/ga4-scroll-tracker.md

@@ -61,6 +61,14 @@ When tracking headings, the following data will be pushed to the dataLayer.
 }
 ```
 
+If you need custom text when tracking a specific heading, a data attribute can be added to the element for this purpose.
+
+```HTML
+<h2 data-ga4-text="this text will be recorded in the event">
+  This text will be ignored
+</h2>
+```
+
 ### Track markers
 
 Sometimes only certain elements on a page should be tracked. This can be done by adding a marker to the required elements and configuring as shown.
@@ -81,7 +89,7 @@ Sometimes only certain elements on a page should be tracked. This can be done by
 
 Any element that a marker is attached to should be short in both height and text content to be tracked well, because:
 
-- the `text` attribute collects the full text of the element with the marker
+- the `text` attribute collects the full text of the element with the marker (or the `data-ga4-text` attribute can be applied, as for heading tracking)
 - scroll tracking only happens when the marked element is fully visible to the user
 
 When tracking markers, the following data will be pushed to the dataLayer.

spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-scroll-tracker.spec.js

@@ -80,7 +80,7 @@ describe('GA4 scroll tracker', function () {
       var extremeHeight = window.innerHeight + 1000
       var FIXTURE =
         '<main style="position: absolute; top: 0px;">' +
-          '<h1>Heading 1</h1>' +
+          '<h1 data-ga4-text="Alternative heading 1 text">Heading 1</h1>' +
           '<div style="height:' + extremeHeight + 'px">' +
             '<h2 style="display: none;">Heading 2</h2>' +
             '<h3 style="margin-top: ' + extremeHeight + 'px;">Heading 3</h3>' +
@@ -104,8 +104,8 @@ describe('GA4 scroll tracker', function () {
     })
 
     it('should send a tracking event on initialisation for headings that are already visible', function () {
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
     })
@@ -118,8 +118,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track headings on scroll and ignore already tracked headings', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -137,8 +137,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track newly visible headings on scroll and ignore already tracked headings', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -156,8 +156,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track when the body height changes', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -177,8 +177,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should not track headings wrapped in ignored elements', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -291,7 +291,7 @@ describe('GA4 scroll tracker', function () {
       var extremeHeight = window.innerHeight + 1000
       var FIXTURE =
         '<main style="position: absolute; top: 0px;">' +
-          '<h1 data-ga4-scroll-marker>Heading 1</h1>' +
+          '<h1 data-ga4-scroll-marker data-ga4-text="Alternative heading 1 text">Heading 1</h1>' +
           '<div style="height:' + extremeHeight + 'px">' +
             '<h2 data-ga4-scroll-marker style="display: none;">Heading 2</h2>' +
             '<h3 data-ga4-scroll-marker style="margin-top: ' + extremeHeight + 'px;">Heading 3</h3>' +
@@ -315,8 +315,8 @@ describe('GA4 scroll tracker', function () {
     })
 
     it('should send a tracking event on initialisation for headings that are already visible', function () {
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
     })
@@ -329,8 +329,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track headings on scroll and ignore already tracked headings', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -348,8 +348,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track newly visible headings on scroll and ignore already tracked headings', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -367,8 +367,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should track when the body height changes', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)
 
@@ -388,8 +388,8 @@ describe('GA4 scroll tracker', function () {
 
     it('should not track headings wrapped in ignored elements', function () {
       expect(window.dataLayer.length).toEqual(1)
-      expected.event_data.text = 'Heading 1'
-      expected.event_data.section = 'Heading 1'
+      expected.event_data.text = 'Alternative heading 1 text'
+      expected.event_data.section = 'Alternative heading 1 text'
       expected.event_data.index.index_section = '1'
       expect(window.dataLayer[0]).toEqual(expected)