govuk_publishing_components 30.1.0 → 30.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98ffd65de2a6ab2a76338534b51c8a25a9c45bbf7c15ea2eb59363067929846f
-  data.tar.gz: 7b0e8e36604bd2666bfe8171b1e06334af902135028115afdbc59838d36ebb94
+  metadata.gz: 4aee02160c93679a75c8418c7b1f0da2ed3908a6016f4437f06dfa0091b61096
+  data.tar.gz: 629859a537593a4f5547cbfa45e866bde739b616ef0598f2428ea07bc0f0af26
 SHA512:
-  metadata.gz: cbd879810fbb5845aeb9ad610b1afe41dd4324ed9148895bfe5da773599e87f593c606ffd364fb54623cde60f6e340689eab3168aebf229e210e8fc4612c0b49
-  data.tar.gz: 4c179f7d646a332d7ea36c6383bd8d808a001590280ba40c747e248a62ed29ece82580331ab6b0f509c99835ef3fcfd72d31ccb1cccf91fc1d39fa688b328172
+  metadata.gz: 043a2bed5b586217a53aea43f53b9a43219b6f8947aaa90776d00a86ebb1f78c410131085401a2b0802a450426d85be2e22f986447e9e99c4d2afee76f95cbbb
+  data.tar.gz: a52358d241fd9539a21fd7cb47c4d54fd2e402e0441758ec7348eb9b14c64444cfeaca9c54e03c34e8051c10bcac4c7c0f00999898f3586b5007f320ba9a5d86

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-click-tracking.js → ga4-event-tracker.js}

@@ -5,16 +5,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   'use strict'
 
-  function GtmClickTracking (module) {
+  function GA4EventTracker (module) {
     this.module = module
     this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
-  GtmClickTracking.prototype.init = function () {
+  GA4EventTracker.prototype.init = function () {
     this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
-  GtmClickTracking.prototype.trackClick = function (event) {
+  GA4EventTracker.prototype.trackClick = function (event) {
     if (window.dataLayer) {
       var target = this.findTrackingAttributes(event.target)
       if (target) {
@@ -58,12 +58,25 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           var openAttribute = detailsElement.getAttribute('open')
           schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
         }
+
+        /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
+        var tabElement = event.target.closest('.gem-c-tabs')
+        if (tabElement) {
+          var aTag = event.target.closest('a')
+          if (aTag) {
+            var href = aTag.getAttribute('href')
+            if (href) {
+              schema.event_data.url = href
+            }
+          }
+        }
+
         window.dataLayer.push(schema)
       }
     }
   }
 
-  GtmClickTracking.prototype.findTrackingAttributes = function (clicked) {
+  GA4EventTracker.prototype.findTrackingAttributes = function (clicked) {
     if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
       return clicked
     } else {
@@ -72,7 +85,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // check if an attribute exists or contains the attribute
-  GtmClickTracking.prototype.getClosestAttribute = function (clicked, attribute) {
+  GA4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
     var isAttributeOnElement = clicked.getAttribute(attribute)
     var containsAttribute = clicked.querySelector('[' + attribute + ']')
 
@@ -83,5 +96,5 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Modules.GtmClickTracking = GtmClickTracking
+  Modules.GA4EventTracker = GA4EventTracker
 })(window.GOVUK.Modules)

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

@@ -0,0 +1,153 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
+
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+
+  GOVUK.analyticsGA4.linkTracker = {
+    trackLinkClicks: function () {
+      if (window.dataLayer) {
+        this.internalLinksDomain = 'www.gov.uk/'
+        this.internalLinksDomainWithoutWww = 'gov.uk/'
+        this.handleClick = this.handleClick.bind(this)
+        this.handleMousedown = this.handleMousedown.bind(this)
+        document.querySelector('body').addEventListener('click', this.handleClick)
+        document.querySelector('body').addEventListener('contextmenu', this.handleClick)
+        document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
+      }
+    },
+
+    stopTracking: function () {
+      document.querySelector('body').removeEventListener('click', this.handleClick)
+      document.querySelector('body').removeEventListener('contextmenu', this.handleClick)
+      document.querySelector('body').removeEventListener('mousedown', this.handleMousedown)
+    },
+
+    handleClick: function (event) {
+      var element = event.target
+
+      if (element.tagName !== 'A') {
+        element = element.closest('a')
+      }
+
+      if (!element) {
+        return
+      }
+
+      var clickData = {}
+      var href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+
+      if (this.isMailToLink(href)) {
+        clickData.type = 'email'
+        clickData.external = 'true'
+      } else if (this.isDownloadLink(href)) {
+        clickData.type = 'download'
+        clickData.external = 'false'
+      } else if (this.isExternalLink(href)) {
+        clickData.type = 'generic link'
+        clickData.external = 'true'
+      }
+
+      if (Object.keys(clickData).length > 0) {
+        clickData.event_name = 'navigation'
+        clickData.text = element.textContent.trim()
+        clickData.url = href
+        clickData.link_method = this.getClickType(event)
+
+        var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
+        schema.event = 'analytics'
+
+        // get attributes from the clickData object to send to GA
+        // only allow it if it already exists in the schema
+        for (var property in clickData) {
+          if (property in schema.event_data) {
+            schema.event_data[property] = clickData[property]
+          }
+        }
+
+        window.dataLayer.push(schema)
+      }
+    },
+
+    getClickType: function (event) {
+      switch (event.type) {
+        case 'click':
+          if (event.ctrlKey) {
+            return 'ctrl click'
+          } else if (event.metaKey) {
+            return 'command/win click'
+          } else {
+            return 'primary click'
+          }
+        case 'mousedown':
+          return 'middle click'
+        case 'contextmenu':
+          return 'secondary click'
+      }
+    },
+
+    handleMousedown: function (event) {
+      // 1 = middle mouse button
+      if (event.button === 1) {
+        this.handleClick(event)
+      }
+    },
+
+    isMailToLink: function (href) {
+      return href.substring(0, 7) === 'mailto:'
+    },
+
+    isDownloadLink: function (href) {
+      var assetsDomain = 'assets.publishing.service.gov.uk/'
+      var uploadsPath = '/government/uploads/'
+
+      if (this.hrefPointsToDomain(href, assetsDomain)) {
+        return true
+      }
+
+      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
+      if (isInternalLink && href.indexOf(uploadsPath) !== -1) {
+        return true
+      }
+
+      // Checks relative links to the uploadsPath
+      if (this.stringStartsWith(href, uploadsPath)) {
+        return true
+      }
+    },
+
+    isExternalLink: function (href) {
+      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
+      if (!isInternalLink && !this.hrefIsRelative(href)) {
+        return true
+      }
+    },
+
+    hrefPointsToDomain: function (href, domain) {
+      var httpDomain = 'http://' + domain
+      var httpsDomain = 'https://' + domain
+      var schemaRelativeDomain = '//' + domain
+      return this.stringStartsWith(href, domain) ||
+      this.stringStartsWith(href, httpDomain) ||
+      this.stringStartsWith(href, httpsDomain) ||
+      this.stringStartsWith(href, schemaRelativeDomain)
+    },
+
+    stringStartsWith: function (string, stringToFind) {
+      return string.substring(0, stringToFind.length) === stringToFind
+    },
+
+    hrefIsRelative: function (href) {
+      // Checks that a link is relative, but is not a protocol relative url
+      return href[0] === '/' && href[1] !== '/'
+    }
+  }
+
+  global.GOVUK = GOVUK
+})(window)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-page-views.js → ga4-page-views.js}

@@ -2,8 +2,9 @@
   'use strict'
 
   var GOVUK = global.GOVUK || {}
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
 
-  GOVUK.Gtm = {
+  GOVUK.analyticsGA4.pageViewTracker = {
     PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: null,
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/{gtm-schemas.js → ga4-schemas.js}

@@ -20,7 +20,8 @@
         index_total: this.null,
         section: this.null,
         action: this.null,
-        external: this.null
+        external: this.null,
+        link_method: this.null
       }
     }
   }

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

@@ -1,7 +1,9 @@
 // The following modules are imported in a specific order
-//= require ./analytics-ga4/gtm-schemas
+//= require ./analytics-ga4/ga4-schemas
 //= require ./analytics-ga4/pii-remover
-//= require ./analytics-ga4/gtm-page-views
-//= require ./analytics-ga4/gtm-click-tracking
+//= require ./analytics-ga4/ga4-page-views
+//= require ./analytics-ga4/ga4-link-tracker
+//= require ./analytics-ga4/ga4-event-tracker
 
-window.GOVUK.Gtm.sendPageView() // this will need integrating with cookie consent before production
+window.GOVUK.analyticsGA4.pageViewTracker.sendPageView() // this will need integrating with cookie consent before production
+window.GOVUK.analyticsGA4.linkTracker.trackLinkClicks()

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -150,7 +150,7 @@ module GovukPublishingComponents
     end
 
     def clean_file_path(file)
-      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/]
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z+.]+/]
     end
 
     def clean_file_name(name)

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -7,6 +7,10 @@
 
 <%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example", margin_top: 0 %>
 
+<% code_example = capture do %>
+  <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
+<% end %>
+
 <div class="component-show">
   <div class="component-doc">
     <div class="component-markdown">
@@ -19,6 +23,6 @@
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
     <h2 class="component-doc-h2">How to call this example</h2>
-    <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>
+    <%= code_example %>
   </div>
 </div>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -74,8 +74,11 @@
           <div class="component-markdown">
             <%= raw(example.html_description) %>
           </div>
+          <% code_example = capture do %>
+            <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
+          <% end %>
           <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
-          <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %>
+          <%= code_example %>
         </div>
       <% end %>
     </div>

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

@@ -22,7 +22,7 @@
   locales = {}
 
   data_attributes ||= {}
-  data_attributes[:module] = 'govuk-accordion gem-accordion'
+  ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip!
   data_attributes[:anchor_navigation] = anchor_navigation
   data_attributes[:track_show_all_clicks] = track_show_all_clicks
   data_attributes[:track_sections] = track_sections

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

@@ -6,7 +6,7 @@
   margin_top ||= 3
   margin_bottom ||= 3
 
-  data_attributes[:module] = require_js ? "print-link" : "button"
+  ((data_attributes[:module] ||= "") << " " << (require_js ? "print-link" : "button")).strip!
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
     margin_top: margin_top,

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

@@ -187,16 +187,15 @@ examples:
 
       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 click tracking can be found in the 'Advanced' section of the [click tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-gtm/gtm-click-tracking.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). 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-gtm/ga4-event-tracker.md).
 
       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:
-        gtm: gtm-accordion
-        ga: ga-accordion
+        custom_data_attr: custom-data-attr-accordion
       data_attributes_show_all:
-        gtm-event-name: example
-        gtm-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
+        custom_data_attr-event-name: example
+        custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
         tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:
@@ -204,25 +203,39 @@ examples:
           content:
             html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           data_attributes:
-            gtm: gtm-accordion-item-1
+            custom_data_attr: custom-data-attr-accordion-item-1
         - heading:
             text: Writing well for specialists
           content:
             html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
           data_attributes:
-            gtm: gtm-accordion-item-2
+            custom_data_attr: custom-data-attr-accordion-item-2
         - heading:
             text: Know your audience
           content:
             html: <p class="govuk-body">This is the content for Know your audience.</p>
           data_attributes:
-            gtm: gtm-accordion-item-3
+            custom_data_attr: custom-data-attr-accordion-item-3
         - heading:
             text: How people read
           content:
             html: <p class="govuk-body">This is the content for How people read.</p>
           data_attributes:
-            gtm: gtm-accordion-item-4
+            custom_data_attr: custom-data-attr-accordion-item-4
+  with_custom_data_module:
+    description: The component includes its own `data-module` but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own `data-module`.
+    data:
+      data_attributes:
+        module: gem-track-click
+      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>
   different_heading_level:
     description: This will alter the level of the heading, not the appearance of the heading.
     data:

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

@@ -26,6 +26,11 @@ examples:
         track-category: "printButton"
         track-action: "clicked"
         track-label: "Print this page"
+  with_custom_data_module:
+    description: The component includes its own `data-module` but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own `data-module`.
+    data:
+      data_attributes:
+        module: "gem-track-click"
   with_custom_margins:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin level `3` on top and bottom.
     data:

data/config/locales/hr.yml

@@ -16,7 +16,6 @@ hr:
       order_a_copy: Naručite kopiju
       page:
         few:
-        many:
         one: 1 stranica
         other: "%{count} stranice"
       reference: 'Referenca: %{reference}'

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.1.0".freeze
+  VERSION = "30.2.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 30.1.0
+  version: 30.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-08-05 00:00:00.000000000 Z
+date: 2022-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -436,9 +436,10 @@ files:
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-page-views.js
-- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-schemas.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
@@ -1936,7 +1937,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.19
+rubygems_version: 3.3.20
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications