govuk_publishing_components 30.7.0 → 30.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 932b483ebc824de1a71b97e465fe66919e6adc1d95e95948e0fefa71cc094fe4
-  data.tar.gz: 22584814d289f173d79f6ea9f9bf9e2d7368daa59b681772cb6a45ebaf381a24
+  metadata.gz: 3c7f16760ab4f91b2f86e6dda6f9066d33f3e1dc305170a0a7aca313df2fbf63
+  data.tar.gz: 7484fc85aad02f15bdb4de512979855520517a7cff39b6f8c7365be85666f176
 SHA512:
-  metadata.gz: 21a4d08ff321e2ef0e112e44a98ff1cd7da84991a5b650fc0e881355baee7162da644c2cc2b96e774951b5d64482ee293861b28cb1ebc7bdd0ee39ecdef1a30c
-  data.tar.gz: b2b47fe59365c766b0511d609830aa082a1892f0ce939e7ddc6fc8da659ba2edd338ed363e5d802322e866cde20ca49c4ee06f9a847cfe44a42c6f31d9b7bb7e
+  metadata.gz: 19878d148ec4971e70494e929eb372e1c83411ca86e14435afba05929feb01d793c3300152150f11fe94370ae98997b30c2759a1b5c84dff4e81d7013446631a
+  data.tar.gz: 9e29ae1795f429a733a63da7da96382318a9a590e767086222e47802c075a0a6b510d511e57205a95d63a0528e03b6458d9e4266ca092e617134b71d8db58387

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

@@ -6,14 +6,44 @@ window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {};
 
   var core = {
     load: function () {
-      /* eslint-disable */
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=' + window.GOVUK.analyticsGA4.vars.auth + '&gtm_preview=' + window.GOVUK.analyticsGA4.vars.preview + '&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer',window.GOVUK.analyticsGA4.vars.id);
-      window.dataLayer.push({ 'gtm.blocklist' : ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
-      /* eslint-enable */
+      if (window.GOVUK.analyticsGA4.vars.gtag_id) {
+        // initialise gtag
+        window.dataLayer = window.dataLayer || []
+        function gtag() { dataLayer.push(arguments) }
+        gtag('js', new Date())
+        gtag('config', window.GOVUK.analyticsGA4.vars.gtag_id)
+
+        var firstScript = document.getElementsByTagName('script')[0]
+        var newScript = document.createElement('script')
+        var dl = 'dataLayer' != 'dataLayer' ? '&l=' + 'dataLayer' : ''
+
+        newScript.async = true
+        newScript.src = '//www.googletagmanager.com/gtag/js?id=' + window.GOVUK.analyticsGA4.vars.gtag_id + dl
+        firstScript.parentNode.insertBefore(newScript, firstScript)
+      } else {
+        // initialise GTM
+        window.dataLayer = window.dataLayer || []
+        window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+
+        var firstScript = document.getElementsByTagName('script')[0]
+        var newScript = document.createElement('script')
+        var dl = 'dataLayer' != 'dataLayer' ? '&l=' + 'dataLayer' : ''
+
+        var auth = window.GOVUK.analyticsGA4.vars.auth || ''
+        var preview = window.GOVUK.analyticsGA4.vars.preview || ''
+        if (auth) {
+          auth = '&gtm_auth=' + auth
+        }
+        if (preview) {
+          preview = '&gtm_preview=' + preview + '&gtm_cookies_win=x'
+        }
+
+        newScript.async = true
+        this.googleSrc = 'https://www.googletagmanager.com/gtm.js?id=' + window.GOVUK.analyticsGA4.vars.id + dl + auth + preview
+        newScript.src = this.googleSrc
+        firstScript.parentNode.insertBefore(newScript, firstScript)
+        window.dataLayer.push({ 'gtm.blocklist' : ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
+      }
     },
 
     sendData: function (data) {

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

@@ -7,15 +7,23 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
   'use strict'
 
   var Ga4LinkTracker = {
-    init: function () {
+    init: function (config) {
       if (window.dataLayer) {
-        this.internalLinksDomain = 'www.gov.uk/'
-        this.internalLinksDomainWithoutWww = 'gov.uk/'
+        config = config || {}
+        this.internalDomains = config.internalDomains || []
+        this.internalDomains.push(this.getHostname())
+        this.appendDomainsWithoutWWW(this.internalDomains)
+        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/']
+        this.dedicatedDownloadDomains = config.dedicatedDownloadDomains || ['assets.publishing.service.gov.uk']
+        this.appendDomainsWithoutWWW(this.dedicatedDownloadDomains)
         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)
+
+        if (!config.disableListeners) {
+          document.querySelector('body').addEventListener('click', this.handleClick)
+          document.querySelector('body').addEventListener('contextmenu', this.handleClick)
+          document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
+        }
       }
     },
 
@@ -43,25 +51,52 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
         return
       }
 
-      if (this.isMailToLink(href)) {
+      var linkAttributes = element.getAttribute('data-ga4-link')
+      if (linkAttributes) {
+        linkAttributes = JSON.parse(linkAttributes)
+        clickData = window.GOVUK.extendObject(clickData, linkAttributes)
+
+        /* Since external links can't be determined in the template, we use populated-via-js as a signal
+        for our JavaScript to determine this value. */
+        if (clickData.external === 'populated-via-js' && clickData.url) {
+          clickData.external = this.isExternalLink(clickData.url) ? 'true' : 'false'
+        }
+
+        if (clickData.link_method === 'populated-via-js') {
+          clickData.link_method = this.getClickType(event)
+        }
+
+        if (clickData.index) {
+          clickData.index = parseInt(linkAttributes.index)
+        }
+
+        if (clickData.index_total) {
+          clickData.index_total = parseInt(linkAttributes.index_total)
+        }
+      } else if (this.isMailToLink(href)) {
         clickData.event_name = 'navigation'
         clickData.type = 'email'
         clickData.external = 'true'
+        clickData.url = href
+        clickData.text = element.textContent.trim()
+        clickData.link_method = this.getClickType(event)
       } else if (this.isDownloadLink(href)) {
         clickData.event_name = 'file_download'
         clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
-        clickData.external = 'true'
+        clickData.external = this.isExternalLink(href) ? 'true' : 'false'
+        clickData.url = href
+        clickData.text = element.textContent.trim()
+        clickData.link_method = this.getClickType(event)
       } else if (this.isExternalLink(href)) {
         clickData.event_name = 'navigation'
         clickData.type = 'generic link'
         clickData.external = 'true'
-      }
-
-      if (Object.keys(clickData).length > 0) {
-        clickData.text = element.textContent.trim()
         clickData.url = href
+        clickData.text = element.textContent.trim()
         clickData.link_method = this.getClickType(event)
+      }
 
+      if (Object.keys(clickData).length > 0) {
         var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
         schema.event = 'event_data'
 
@@ -77,6 +112,17 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
       }
     },
 
+    appendDomainsWithoutWWW: function (domainsArrays) {
+      // Add domains with www. removed, in case site hrefs are marked up without www. included.
+      for (var i = 0; i < domainsArrays.length; i++) {
+        var domain = domainsArrays[i]
+        if (this.stringStartsWith(domain, 'www.')) {
+          var domainWithoutWww = domain.replace('www.', '')
+          domainsArrays.push(domainWithoutWww)
+        }
+      }
+    },
+
     getClickType: function (event) {
       switch (event.type) {
         case 'click':
@@ -84,6 +130,8 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
             return 'ctrl click'
           } else if (event.metaKey) {
             return 'command/win click'
+          } else if (event.shiftKey) {
+            return 'shift click'
           } else {
             return 'primary click'
           }
@@ -106,29 +154,36 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
     },
 
     isDownloadLink: function (href) {
-      var assetsDomain = 'assets.publishing.service.gov.uk/'
-      var uploadsPath = '/government/uploads/'
-
-      if (this.hrefPointsToDomain(href, assetsDomain)) {
+      if (this.isInternalLink(href) && this.hrefPointsToDownloadPath(href)) {
         return true
       }
 
-      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
-      if (isInternalLink && href.indexOf(uploadsPath) !== -1) {
-        return true
+      var result = false
+      for (var i = 0; i < this.dedicatedDownloadDomains.length; i++) {
+        var downloadDomain = this.dedicatedDownloadDomains[i]
+        if (this.hrefPointsToDomain(href, downloadDomain)) {
+          result = true
+        }
       }
+      return result
+    },
 
-      // Checks relative links to the uploadsPath
-      if (this.stringStartsWith(href, uploadsPath)) {
+    isInternalLink: function (href) {
+      if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
         return true
       }
+      var result = false
+      for (var i = 0; i < this.internalDomains.length; i++) {
+        var internalDomain = this.internalDomains[i]
+        if (this.hrefPointsToDomain(href, internalDomain)) {
+          result = true
+        }
+      }
+      return result
     },
 
     isExternalLink: function (href) {
-      var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
-      if (!isInternalLink && !this.hrefIsRelative(href) && !this.hrefIsAnchor(href)) {
-        return true
-      }
+      return !this.isInternalLink(href)
     },
 
     isPreviewLink: function (href) {
@@ -144,6 +199,19 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
     },
 
     hrefPointsToDomain: function (href, domain) {
+      /* Add a trailing slash to prevent an edge case such
+      as the href www.gov.uk.domain.co.uk being detected as an internal link,
+      if we were checking for 'www.gov.uk' instead of 'www.gov.uk/' */
+      if (domain.substring(domain.length) !== '/') {
+        domain = domain + '/'
+      }
+
+      /* If the href doesn't end in a slash, we add one.
+      This fixes an edge case where the <a href> is exactly `https://www.gov.uk`
+      but these checks would only look for `https://www.gov.uk/` */
+      if (href.substring(href.length) !== '/') {
+        href = href + '/'
+      }
       var httpDomain = 'http://' + domain
       var httpsDomain = 'https://' + domain
       var schemaRelativeDomain = '//' + domain
@@ -153,6 +221,17 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
       this.stringStartsWith(href, schemaRelativeDomain)
     },
 
+    hrefPointsToDownloadPath: function (href) {
+      var result = false
+      for (var i = 0; i < this.internalDownloadPaths.length; i++) {
+        var internalDownloadPath = this.internalDownloadPaths[i]
+        if (href.indexOf(internalDownloadPath) !== -1) {
+          result = true
+        }
+      }
+      return result
+    },
+
     stringStartsWith: function (string, stringToFind) {
       return string.substring(0, stringToFind.length) === stringToFind
     },
@@ -164,6 +243,10 @@ window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analytics
 
     hrefIsAnchor: function (href) {
       return href[0] === '#'
+    },
+
+    getHostname: function () {
+      return window.location.hostname
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -30,7 +30,10 @@
     _gid: 'usage',
     _gat: 'usage',
     'JS-Detection': 'usage',
-    TLSversion: 'usage'
+    TLSversion: 'usage',
+    _ga_VBLT2V3FZR: 'usage', // gtag cookie used to persist the session state, integration
+    _ga_P1DGM6TVYF: 'usage', // staging
+    _ga_S5RQ7FTGVR: 'usage' // production
   }
 
   /*

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

@@ -2,6 +2,7 @@
   links ||= []
   title ||= false
   track_as_sharing ||= false
+  track_as_follow ||= false
   stacked ||= false
   columns ||= false
 
@@ -23,7 +24,7 @@
     <% end %>
 
     <ul class="gem-c-share-links__list">
-      <% links.each do |link| %>
+      <% links.each_with_index do |link, index| %>
         <% link_text = capture do %>
           <span class="govuk-visually-hidden">
             <% if link[:hidden_text] %>
@@ -42,6 +43,26 @@
                 'socialNetwork': link[:icon],
                 'socialTarget': link[:href]
               }
+              ga4_link_data = {
+                'event_name': 'share',
+                'type': 'share this page',
+                'index': index + 1,
+                'index_total': links.length,
+                'text': link[:icon],
+                'link_method': 'populated-via-js'
+              }
+            end
+            if track_as_follow
+              ga4_link_data = {
+                'event_name': 'navigation',
+                'type': 'follow us',
+                'index': index + 1,
+                'index_total': links.length,
+                'text': link[:text],
+                'external': 'populated-via-js',
+                'url': link[:href],
+                'link_method': 'populated-via-js'
+              }
             end
           %>
           <%= link_to link[:href],
@@ -50,7 +71,8 @@
             data: {
               'track-category': 'social media',
               'track-action': link[:icon],
-              'track-options': track_options
+              'track-options': track_options,
+              'ga4-link': ga4_link_data
             },
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">

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

@@ -45,7 +45,7 @@ examples:
     context:
       right_to_left: true
   track_as_sharing_links:
-    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions). If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call.
+    description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
     data:
       track_as_sharing: true
       links: [
@@ -53,7 +53,28 @@ examples:
           href: 'share',
           text: 'Share on Facebook',
           icon: 'facebook'
-        }
+        },
+        {
+          href: 'share',
+          text: 'Share on Twitter',
+          icon: 'twitter'
+        },
+      ]
+  track_as_follow_links:
+    description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
+    data:
+      track_as_follow: true
+      links: [
+        {
+          href: 'follow',
+          text: 'Follow us on Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: 'follow',
+          text: 'Follow us on Twitter',
+          icon: 'twitter'
+        },
       ]
   with_title:
     data:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.7.0".freeze
+  VERSION = "30.7.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 30.7.0
+  version: 30.7.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-09-20 00:00:00.000000000 Z
+date: 2022-09-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config