govuk_publishing_components 35.11.0 → 35.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc2a2a38c6182ba05ad0863d7f1b4d47bda4c31726559b42d3e9095fc7d984a7
-  data.tar.gz: 5bfaa98a5688a6e4d6c7f37a3f1b9099bbdb96e051dd83371da64f67040a723a
+  metadata.gz: d923b79189269417363dd2c12781e9ee9644a03bf2c514b21e24d71efe0c07c7
+  data.tar.gz: ce1f69cdb8ef0eaf3fcf836e359311e8b38a0f401bb931a3e8bfc27c1b568f56
 SHA512:
-  metadata.gz: cee017c867881cb78d2c39357c94a6400d4abf6bd725cd8a2449c44044460ab260d6bd7fab87c6246e4ca8340417e04c1855108ad32329bca72d1e846801aaa1
-  data.tar.gz: 917e293b5ae5ae0b228f7b66bbae838913213fb8fe4eccf82d92a0d2ae87344b85328e9f2f83296c9de13d22a24c72829e60158c64366dddb8b8d2d4e0332dea
+  metadata.gz: bffc7c115facd8c323182b04f089ecae6b5b2a6991ebed42aea17fc748b1a95bcbf1093f75e238291819bb9d821152b7f4ef3f2b95f0a4b2b1b14021ccbb5a14
+  data.tar.gz: 03c818b7b4f9731f3075020ad5273256a30c3cdef0862f92892edea1dd6cd19e0e65ea781d8c9bb7fb2c87403c5478503442453c68ff80a2deea73ba820e3721

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -30,32 +30,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       firstScript.parentNode.insertBefore(newScript, firstScript)
     },
 
-    ensureIndexesArePopulated: function (data) {
-      if (!data.event_data) {
-        return data
-      }
-
-      if (!data.event_data.index) {
-        return data
-      }
-
-      var indexKeys = ['index_link', 'index_section', 'index_section_count']
-
-      for (var i = 0; i < indexKeys.length; i++) {
-        var indexKey = indexKeys[i]
-
-        // If the index key isn't in the object, populate it. However if it's set to 0, leave it as 0. 0 is falsy so we have to add this extra check.
-        if (!data.event_data.index[indexKey] && data.event_data.index[indexKey] !== 0) {
-          data.event_data.index[indexKey] = undefined
-        }
-      }
-
-      return data
-    },
-
     sendData: function (data) {
-      data = this.ensureIndexesArePopulated(data)
-
       data.govuk_gem_version = this.getGemVersion()
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {
@@ -274,29 +249,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         }
       },
 
-      addAttributesToElements: function (selector, dataAttributes) {
-        var targetElements = document.querySelectorAll(selector)
-
-        for (var i = 0; i < targetElements.length; i++) {
-          var element = targetElements[i]
-
-          for (var j = 0; j < dataAttributes.length; j++) {
-            var key = dataAttributes[j].key
-            var value = dataAttributes[j].value
-
-            // value must check for undefined only as it would return false on an empty string, the number 0, etc.
-            if (key && value !== undefined) {
-              var existingAttributeValue = element.getAttribute(key)
-
-              if (key === 'data-module' && existingAttributeValue) {
-                // Combines values to prevent replacing any existing data-module values.
-                element.setAttribute(key, existingAttributeValue + ' ' + value)
-              } else {
-                element.setAttribute(key, value)
-              }
-            }
-          }
-        }
+      applyRedactionIfRequired: function (PIIRemover, element, data) {
+        return element.closest('[data-ga4-do-not-redact]') ? data : PIIRemover.stripPIIWithOverride(data, true, true)
       }
     },
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js

@@ -45,6 +45,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var formData = this.getInputValues(formInputs)
       data.text = data.text || (this.combineGivenAnswers(formData) || 'No answer given')
 
+      if (data.action === 'search') {
+        data.text = data.text.toLowerCase()
+        data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(data.text)
+      }
+
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')
       window.GOVUK.analyticsGa4.core.sendData(schema)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js

@@ -81,12 +81,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
-      data.text = this.PIIRemover.stripPIIWithOverride(data.text, true, true)
+      data.text = window.GOVUK.analyticsGa4.core.trackFunctions.applyRedactionIfRequired(this.PIIRemover, element, data.text)
       if (!data.text && (element.querySelector('img') || element.querySelector('svg') || element.tagName === 'IMG' || element.closest('svg'))) {
         data.text = 'image'
       }
       var url = data.url || this.findLink(event.target).getAttribute('href')
-      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(this.PIIRemover.stripPIIWithOverride(url, true, true))
+      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.applyRedactionIfRequired(this.PIIRemover, element, window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(url))
       data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
       data.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(data.url)
       data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js

@@ -16,7 +16,11 @@
         type: this.undefined,
         url: this.undefined,
         text: this.undefined,
-        index: this.undefined,
+        index: {
+          index_link: this.undefined,
+          index_section: this.undefined,
+          index_section_count: this.undefined
+        },
         index_total: this.undefined,
         section: this.undefined,
         action: this.undefined,
@@ -24,7 +28,8 @@
         method: this.undefined,
         link_domain: this.undefined,
         link_path_parts: this.undefined,
-        tool_name: this.undefined
+        tool_name: this.undefined,
+        percent_scrolled: this.undefined
       }
     }
   }
@@ -45,19 +50,60 @@
     }
   }
 
-  // get attributes from the data attribute to send to GA
+  // merge data attributes data into the event schema
   // only allow it if it already exists in the schema
   Schemas.prototype.mergeProperties = function (data, eventAttribute) {
     var schema = this.eventSchema()
     schema.event = eventAttribute
+    // exceptions should be inserted without checking for sub parameters
+    // exceptions should only come from code, not directly from data attributes
+    // e.g. link_path_parts is generated by JS and contains potentially non-unique
+    // sub parameter names i.e. '1', '2'
+    var exceptions = ['link_path_parts']
+
     for (var property in data) {
-      if (property in schema.event_data) {
-        schema.event_data[property] = data[property]
+      // some passed data might be undefined, don't want it to overwrite e.g. the index sub parameters
+      if (data[property] !== undefined) {
+        if (exceptions.indexOf(property) >= 0 || !this.isAnObject(data[property])) {
+          schema.event_data = this.addToObject(schema.event_data, property, data[property])
+        } else {
+          // we check for one level of nesting in the data attributes data
+          // this check can be removed once nesting is removed from all data attributes
+          for (var subproperty in data[property]) {
+            schema.event_data = this.addToObject(schema.event_data, subproperty, data[property][subproperty])
+          }
+        }
       }
     }
     return schema
   }
 
+  // might be easier to check if it's not a string or a number?
+  Schemas.prototype.isAnObject = function (item) {
+    if (typeof item === 'object' && !Array.isArray(item) && item !== null) {
+      return true
+    }
+  }
+
+  // given an object and a key, insert a value into that object for that key
+  // we check for one level of nesting in the object
+  Schemas.prototype.addToObject = function (obj, key, value) {
+    if (key in obj) {
+      obj[key] = value
+      return obj
+    } else {
+      for (var property in obj) {
+        if (this.isAnObject(obj[property])) {
+          if (key in obj[property]) {
+            obj[property][key] = value
+            return obj
+          }
+        }
+      }
+    }
+    return obj
+  }
+
   GOVUK.analyticsGa4 = GOVUK.analyticsGa4 || {}
   GOVUK.analyticsGa4.Schemas = Schemas
 

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

@@ -0,0 +1,225 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function Ga4ScrollTracker ($module) {
+    this.$module = $module
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.trackedNodes = []
+    this.config = {
+      allowHeadingsInside: ['main'],
+      percentages: [20, 40, 60, 80, 100],
+      scrollTimeoutDelay: 20,
+      resizeTimeoutDelay: 100,
+      pageHeightTimeoutDelay: 500,
+      markerAttribute: 'data-ga4-scroll-marker'
+    }
+  }
+
+  Ga4ScrollTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
+
+  Ga4ScrollTracker.prototype.startModule = function () {
+    if (window.GOVUK.analyticsGa4.vars.scrollTrackerStarted) {
+      return
+    }
+
+    this.trackType = this.$module.getAttribute('data-ga4-track-type')
+    window.GOVUK.analyticsGa4.vars.scrollTrackerStarted = true
+
+    if (this.trackType === 'headings') {
+      this.track = new Ga4ScrollTracker.Heading(this.config)
+    } else if (this.trackType === 'markers') {
+      this.config.trackMarkers = true
+      this.track = new Ga4ScrollTracker.Heading(this.config)
+    } else {
+      this.track = new Ga4ScrollTracker.Percentage(this.config)
+    }
+
+    this.getWindowDetails()
+    // if the URL has a hash we want to prevent tracking on initial page load
+    // until the browser jumps down the page, at which point a scroll event
+    // will happen and tracking will continue normally
+    var windowHash = window.location.hash
+    var dontTrackOnLoad = windowHash && document.getElementById(windowHash.substring(1))
+    if (!dontTrackOnLoad) {
+      this.trackVisibleNodes()
+    }
+
+    if (this.trackedNodes.length) {
+      // store event listener functions as variables so they can be removed if needed
+      this.scrollEvent = this.onScroll.bind(this)
+      window.addEventListener('scroll', this.scrollEvent)
+      this.resizeEvent = this.onResize.bind(this)
+      window.addEventListener('resize', this.resizeEvent)
+
+      // check if the page height changes e.g. accordion opened
+      this.interval = window.setInterval(function () {
+        var pageHeight = document.querySelector('body').clientHeight
+        if (pageHeight !== this.pageHeight) {
+          this.pageHeight = pageHeight
+          this.getWindowDetails()
+          this.trackVisibleNodes()
+        }
+      }.bind(this), this.config.pageHeightTimeoutDelay)
+    }
+  }
+
+  Ga4ScrollTracker.prototype.onScroll = function () {
+    clearTimeout(this.scrollTimeout)
+    this.scrollTimeout = setTimeout(function () {
+      this.trackVisibleNodes()
+    }.bind(this), this.config.scrollTimeoutDelay)
+  }
+
+  Ga4ScrollTracker.prototype.onResize = function () {
+    clearTimeout(this.resizeTimeout)
+    this.resizeTimeout = setTimeout(function () {
+      this.getWindowDetails()
+      this.trackVisibleNodes()
+    }.bind(this), this.config.resizeTimeoutDelay)
+  }
+
+  Ga4ScrollTracker.prototype.getWindowDetails = function () {
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.windowHeight = window.innerHeight
+    this.trackedNodes = this.track.getTrackingNodes(this.trackedNodes)
+  }
+
+  Ga4ScrollTracker.prototype.trackVisibleNodes = function () {
+    var data = {
+      event_name: 'scroll',
+      action: 'scroll',
+      type: this.config.type
+    }
+    for (var i = 0; i < this.trackedNodes.length; i++) {
+      var node = this.trackedNodes[i]
+      if (this.isVisible(node.top, node.bottom) && !node.alreadySeen) {
+        node.alreadySeen = true
+        // we store whether a heading has been tracked or not on the heading
+        // because if headings appear/disappear (e.g. inside an accordion)
+        // the order changes, so we can't refer to the previous trackedNodes
+        // as we do with percentages
+        if (node.element) {
+          node.element.setAttribute('data-ga4-scrolltracker-already-seen', true)
+        }
+
+        data.type = node.eventData.type
+        // following will be undefined if tracking percentages
+        data.text = node.eventData.text
+        data.index = node.eventData.index
+        // following will be undefined if tracking headings
+        data.percent_scrolled = node.eventData.percent_scrolled
+
+        var schemas = new window.GOVUK.analyticsGa4.Schemas()
+        var schema = schemas.mergeProperties(data, 'event_data')
+        window.GOVUK.analyticsGa4.core.sendData(schema)
+      }
+    }
+  }
+
+  Ga4ScrollTracker.prototype.isVisible = function (top, bottom) {
+    var scroll = window.scrollY || document.documentElement.scrollTop // IE fallback
+    return scroll <= top && (scroll + this.windowHeight) >= bottom
+  }
+
+  Ga4ScrollTracker.Heading = function (config) {
+    this.config = config
+  }
+
+  Ga4ScrollTracker.Heading.prototype.getTrackingNodes = function () {
+    var headingsDetails = []
+    var headingsFound = this.findAllowedHeadings()
+    var totalHeadings = headingsFound.length
+
+    for (var i = 0; i < totalHeadings; i++) {
+      var heading = headingsFound[i]
+      var type = this.config.trackMarkers ? 'marker' : 'heading'
+      // only track headings that are visible i.e. not inside display: none
+      if (this.visible(heading)) {
+        var pos = heading.getBoundingClientRect()
+        headingsDetails.push({
+          element: heading,
+          alreadySeen: heading.getAttribute('data-ga4-scrolltracker-already-seen'),
+          top: pos.top + document.documentElement.scrollTop,
+          bottom: pos.bottom + document.documentElement.scrollTop,
+          eventData: {
+            type: type,
+            text: heading.textContent.replace(/\s+/g, ' ').trim(),
+            index: {
+              index_section: i + 1,
+              index_section_count: totalHeadings
+            }
+          }
+        })
+      }
+    }
+    return headingsDetails
+  }
+
+  // check heading is inside allowed elements, generally ignores everything outside of page content
+  Ga4ScrollTracker.Heading.prototype.findAllowedHeadings = function () {
+    var headingsFound = []
+    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    if (this.config.trackMarkers) {
+      headings = ['[' + this.config.markerAttribute + ']']
+    }
+
+    // this is a loop that only happens once as we currently only have one
+    // allowed element for headings to be in - 'main'
+    for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
+      var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
+      for (var e = 0; e < insideElements.length; e++) {
+        var found = insideElements[e].querySelectorAll(headings)
+        for (var f = 0; f < found.length; f++) {
+          headingsFound.push(found[f])
+        }
+      }
+    }
+    return headingsFound
+  }
+
+  // this is bit more verbose than checking offsetParent !== null but more reliable for IE10+
+  Ga4ScrollTracker.Heading.prototype.visible = function (el) {
+    return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+  }
+
+  Ga4ScrollTracker.Percentage = function (config) {
+    this.config = config
+  }
+
+  Ga4ScrollTracker.Percentage.prototype.getTrackingNodes = function (trackedNodes) {
+    var body = document.body
+    var html = document.documentElement
+    var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+
+    var percentDetails = []
+
+    for (var i = 0; i < this.config.percentages.length; i++) {
+      var percent = this.config.percentages[i]
+      // subtract 1 pixel to solve a bug where 100% can't be reached in some cases
+      var pos = ((pageHeight / 100) * percent) - 1
+      var alreadySeen = false
+      if (trackedNodes.length) {
+        alreadySeen = trackedNodes[i].alreadySeen
+      }
+      percentDetails.push({
+        alreadySeen: alreadySeen,
+        top: pos,
+        bottom: pos,
+        eventData: { type: 'percent', percent_scrolled: String(percent) }
+      })
+    }
+    return percentDetails
+  }
+
+  Modules.Ga4ScrollTracker = Ga4ScrollTracker
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js

@@ -8,11 +8,6 @@ var initFunction = function () {
     window.GOVUK.analyticsGa4.vars.internalDomains = []
     window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
     window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
-    var attachmentLinkData = [
-      { key: 'data-module', value: 'ga4-link-tracker' },
-      { key: 'data-ga4-track-links-only', value: '' },
-      { key: 'data-ga4-link', value: JSON.stringify({ event_name: 'navigation', type: 'attachment' }) }]
-    window.GOVUK.analyticsGa4.core.trackFunctions.addAttributesToElements('[data-ga4-attachment-link]', attachmentLinkData)
     window.GOVUK.analyticsGa4.core.load()
 
     var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js

@@ -10,4 +10,5 @@
 //= require ./analytics-ga4/ga4-form-tracker
 //= require ./analytics-ga4/ga4-auto-tracker
 //= require ./analytics-ga4/ga4-smart-answer-results-tracker
+//= require ./analytics-ga4/ga4-scroll-tracker
 //= require ./analytics-ga4/init-ga4

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -43,13 +43,15 @@
       "HTML",
       class: "gem-c-attachment__attribute",
     )
+    data_attributes[:module] ? data_attributes[:module] << " ga4-link-tracker" : data_attributes[:module] = "ga4-link-tracker"
+    data_attributes[:ga4_link] = { "event_name": "navigation", "type": "attachment" }.to_json
   when "external"
     attributes << tag.span(
       attachment.url,
       class: "gem-c-attachment__attribute",
     )
   end
-  
+
 %>
 <%= tag.section class: class_names(container_class_names) do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>

data/app/views/govuk_publishing_components/components/_tabs.html.erb

@@ -7,22 +7,30 @@
   panel_css_classes << "gem-c-tabs__panel--no-border" if panel_border == false
   panel_css_classes = panel_css_classes.join(" ")
 
+  as_links ||= false
   ga4_tracking ||= false
-  data_module = "govuk-tabs"
-  data_module << " ga4-event-tracker" if ga4_tracking
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-tabs gem-c-tabs")
+  component_helper.add_data_attribute({ module: "govuk-tabs" }) unless as_links
+
+  if ga4_tracking
+    component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless as_links
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if as_links
+  end
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="<%= data_module %>">
+  <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="govuk-tabs__title">
       <%= t("components.tabs.contents") %>
     </h2>
     <ul class="govuk-tabs__list">
       <% tabs.each_with_index do |tab, index| %>
-      <li class="govuk-tabs__list-item">
+      <li class="govuk-tabs__list-item <%= "govuk-tabs__list-item--selected" if tab[:active] %>">
         <%
           tab[:tab_data_attributes] ||= {}
           if ga4_tracking
-            tab[:tab_data_attributes][:ga4_event] = {
+            ga4_attributes = {
               event_name: "select_content",
               type: "tabs",
               text: tab[:label],
@@ -31,24 +39,32 @@
                 index_section_count: tabs.length,
               },
             }
+            ga4_attributes[:event_name] = "navigation" if as_links
+            tab[:tab_data_attributes][:ga4_link] = ga4_attributes if as_links
+            tab[:tab_data_attributes][:ga4_event] = ga4_attributes unless as_links
           end
+
+          tab_link = "##{tab[:id]}"
+          tab_link = tab[:href] if as_links
         %>
         <%= link_to(tab[:label],
-                    "##{tab[:id]}",
+                    tab_link,
                     class: "govuk-tabs__tab",
                     data: tab[:tab_data_attributes]) %>
       </li>
       <% end %>
     </ul>
-    <% tabs.each do |tab| %>
-      <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
-        <% if tab[:title] %>
-          <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
-        <% end %>
-        <%= tab[:content] %>
-      </section>
+    <% unless as_links %>
+      <% tabs.each do |tab| %>
+        <section class="<%= panel_css_classes %>" id="<%= tab[:id] %>">
+          <% if tab[:title] %>
+            <h2 class="govuk-heading-l"><%= tab[:title] %></h2>
+          <% end %>
+          <%= tab[:content] %>
+        </section>
+      <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>
 <% if tabs.count == 1 %>
     <section id="<%= tabs[0][:id] %>">

data/app/views/govuk_publishing_components/components/docs/tabs.yml

@@ -30,6 +30,17 @@ examples:
           label: "Second section"
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+  as_links:
+    description: With this option the tabs operate as links, rather than switching between elements within a single page.
+    data:
+      as_links: true
+      tabs:
+        - href: "link1"
+          label: "Page one"
+          active: true
+        - href: "link2"
+          label: "Page two"
+          active: false
   without_panel_border:
     data:
       panel_border: false
@@ -84,8 +95,8 @@ examples:
             tracking: GTM-123AB
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
-  with_ga4_tracking:
-    description: Enables GA4 tracking. This will add the required data module and data attributes to the tabs. 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.
+  with_ga4_tracking_on_tabs:
+    description: Enables GA4 tracking by adding the event tracker and required data attributes to the tabs. 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
       tabs:
@@ -99,3 +110,15 @@ examples:
           title: "Second section"
           content: |
             <p class="govuk-body-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
+  with_ga4_tracking_on_tabs_as_links:
+    description: Enables GA4 tracking by adding the link tracker and required data attributes to the tabs. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      as_links: true
+      ga4_tracking: true
+      tabs:
+        - href: "/page1"
+          label: "Link 1"
+          active: true
+        - href: "/page2"
+          label: "Link 2"
+          active: false

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.11.0".freeze
+  VERSION = "35.12.0".freeze
 end