govuk_publishing_components 35.11.0 → 35.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc2a2a38c6182ba05ad0863d7f1b4d47bda4c31726559b42d3e9095fc7d984a7
-  data.tar.gz: 5bfaa98a5688a6e4d6c7f37a3f1b9099bbdb96e051dd83371da64f67040a723a
+  metadata.gz: b6417c1bd3d66d89500aac39c49427caa95791623fe26f1ee4844c025ef3f3c7
+  data.tar.gz: d21986e9895007dc2560b4aacd1eb28ff7f43251519029672b85d13d91211d94
 SHA512:
-  metadata.gz: cee017c867881cb78d2c39357c94a6400d4abf6bd725cd8a2449c44044460ab260d6bd7fab87c6246e4ca8340417e04c1855108ad32329bca72d1e846801aaa1
-  data.tar.gz: 917e293b5ae5ae0b228f7b66bbae838913213fb8fe4eccf82d92a0d2ae87344b85328e9f2f83296c9de13d22a24c72829e60158c64366dddb8b8d2d4e0332dea
+  metadata.gz: 7ca4a123db1c519256eb7ee46ff97e940d69c161f687611fb3b46915acee3454b995f2793e763ed82f5d87ae8a32d2df074b4c72587ca5c0a3c02ee858026a79
+  data.tar.gz: b1cc9c87e984de69229d5b6807d81eca27802b35a3be15caaaea249388fc0ce9934be7a4d75006e2a93c5374fc48738d9f8e8dbbc624955b2a14da78a01df8a8

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
+    // remove 20px from the calculated page height to allow for a possible horizontal scrollbar
+    var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) - 20
+
+    var percentDetails = []
+
+    for (var i = 0; i < this.config.percentages.length; i++) {
+      var percent = this.config.percentages[i]
+      var pos = ((pageHeight / 100) * percent)
+      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/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -25,7 +25,9 @@
 
 .gem-c-document-list--no-underline {
   .gem-c-document-list__item-title {
-    text-decoration: none;
+    .govuk-link {
+      text-decoration: none;
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -110,6 +110,10 @@ $large-input-size: 50px;
   border: 0;
   cursor: pointer;
   border-radius: 0;
+  // render a border in high contrast mode
+  outline: $govuk-border-width-form-element solid transparent;
+  // Ensure outline appears outside of the element
+  outline-offset: 0;
   position: relative;
   padding: 0;
   width: $input-size;
@@ -124,8 +128,6 @@ $large-input-size: 50px;
   &:focus {
     z-index: 2;
     outline: $govuk-focus-width solid $govuk-focus-colour;
-    // Ensure outline appears outside of the element
-    outline-offset: 0;
     // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
     // Also, `outline` cannot be utilised
     // here as it is already used for the yellow focus state.
@@ -161,6 +163,10 @@ $large-input-size: 50px;
 
   .gem-c-search__input {
     border-width: 0;
+    // Render a border in high contrast mode
+    outline: $govuk-border-width-form-element solid transparent;
+    // Ensure outline appears outside of the element
+    outline-offset: 0;
 
     // no need for black outline as there is enough contrast
     // with the blue background

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -14,7 +14,6 @@ module GovukPublishingComponents
         government-frontend
         govspeak-preview
         info-frontend
-        licence-finder
         release
         search-admin
         signon
@@ -49,7 +48,9 @@ module GovukPublishingComponents
 
       application_dirs.each do |application|
         application_path = [path, application].join("/")
-        app = AuditApplications.new(application_path, application)
+        dir = application
+        dir = Rails.application.class.module_parent_name.underscore.dasherize unless ENV["MAIN_COMPONENT_GUIDE"]
+        app = AuditApplications.new(application_path, application, dir)
         applications_found += 1 if app.data[:application_found]
         results << app.data
       end

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -2,7 +2,7 @@ module GovukPublishingComponents
   class AuditApplications
     attr_reader :data
 
-    def initialize(path, name)
+    def initialize(path, name, dir)
       @path = path
       application_found = application_exists(path)
       components_found = []
@@ -59,6 +59,7 @@ module GovukPublishingComponents
         # applications might not have all of these things for all components
         options = {
           application_name: name,
+          application_dir: dir,
           templates_path: "app/views/components",
           stylesheets_path: "app/assets/stylesheets/components",
           javascripts_path: "app/assets/javascripts/components/",
@@ -72,6 +73,7 @@ module GovukPublishingComponents
 
       @data = {
         name: name,
+        dir: dir,
         application_found: application_found,
         components_found: components_found,
         gem_style_references: @gem_style_references.flatten.uniq.sort,

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -12,7 +12,6 @@ module GovukPublishingComponents
           frontend
           government-frontend
           info-frontend
-          licence-finder
           service-manual-frontend
           smart-answers
           whitehall
@@ -93,6 +92,7 @@ module GovukPublishingComponents
 
           data << {
             name: result[:name],
+            dir: result[:dir],
             application_found: result[:application_found],
             uses_static: application_uses_static,
             summary: summary,

data/app/models/govuk_publishing_components/audit_components.rb

@@ -13,6 +13,7 @@ module GovukPublishingComponents
       @helpers_path = options[:helpers_path] || "lib/govuk_publishing_components/presenters"
 
       @application_name = options[:application_name] || "govuk_publishing_components"
+      @application_dir = options[:application_dir] || "govuk_publishing_components"
       @all_templates = Dir["#{path}/#{@templates_path}/*.erb"].sort
       @templates_full_path = "#{path}/#{@templates_path}/"
 
@@ -57,7 +58,7 @@ module GovukPublishingComponents
       component_templates.each do |component|
         component_detail = {}
         component_detail[:name] = component
-        component_detail[:application] = @application_name
+        component_detail[:application] = @application_dir
         component_detail[:link] = get_component_link(component) unless @auditing_an_application
         file_details = [
           {
@@ -214,7 +215,7 @@ module GovukPublishingComponents
 
     def get_asset_link(a_thing, component)
       url = "https://github.com/alphagov"
-      repo = @application_name
+      repo = @application_dir
       blob = "blob/main"
       link = nil
       link = "#{url}/#{repo}/#{blob}/#{@templates_path}/_#{component.gsub(' ', '_')}.html.erb" if a_thing == "template"

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -9,6 +9,7 @@ This component uses the component wrapper helper. It accepts the following optio
 - `aria` - accepts a hash of aria attributes
 - `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
 - `role` - accepts a space separated string of roles
+- `lang` - accepts a language attribute value
       "
     end
   end

data/app/views/govuk_publishing_components/audit/_applications.html.erb

@@ -34,7 +34,7 @@
 
     <% accordion_content = capture do %>
       <% if application[:application_found] %>
-        <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
+        <% github_link = 'https://github.com/alphagov/' + application[:dir] + '/blob/main/' %>
 
         <% if @other_applications %>
           <% if application[:uses_individual_asset_model] %>

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 %>