Merge pull request #3612 from alphagov/ga4-cookie-banner-fix

Ensure cookie banner isn't tracked as visible when it is hidden via JS

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Remove option select GA4 attributes ([PR #3625](https://github.com/alphagov/govuk_publishing_components/pull/3625))
 * Fix various bugs with the GA4 pageview tracker ([PR #3626](https://github.com/alphagov/govuk_publishing_components/pull/3626))
 * Add 'ga4-browse-topic' meta tag to track the mainstream browse topic ([PR #3628](https://github.com/alphagov/govuk_publishing_components/pull/3628))
+* Ensure cookie banner isn't tracked as visible when it is hidden via JS ([PR #3612](https://github.com/alphagov/govuk_publishing_components/pull/3612))
 
 ## 35.16.0
 

app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -57,8 +57,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
             phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined,
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
-            cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined,
-            intervention: this.getInterventionPresence(),
+            cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
+            intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
             query_string: this.getQueryString(),
             search_term: this.getSearchTerm()
           }
@@ -167,18 +167,18 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       return (withdrawn === 'withdrawn') ? 'true' : 'false'
     },
 
-    getInterventionPresence: function () {
+    getBannerPresence: function (bannerSelector) {
       /* If the user hides the banner using JS, a cookie is set to hide it on future page loads.
-       * Therefore we need to start the intervention banner early so that it hides if this cookie exists.
+       * Therefore we need to start the banner module early so that it hides if this cookie exists.
        * Without this, our pageview object will track the banner as visible before it gets hidden. */
 
-      var intervention = document.querySelector('[data-ga4-intervention-banner]')
+      var banner = document.querySelector(bannerSelector)
 
-      if (intervention) {
-        window.GOVUK.modules.start(intervention)
-        var interventionHidden = intervention.getAttribute('hidden') === '' || intervention.getAttribute('hidden')
+      if (banner) {
+        window.GOVUK.modules.start(banner)
+        var bannerHidden = banner.getAttribute('hidden') === '' || banner.getAttribute('hidden')
 
-        if (interventionHidden) {
+        if (bannerHidden) {
           return undefined
         }
         return 'true'

spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.spec.js

@@ -488,7 +488,7 @@ describe('Google Tag Manager page view tracking', function () {
     document.body.removeChild(div)
   })
 
-  it('correctly sets the cookie_banner parameter', function () {
+  it('correctly sets the cookie_banner parameter when the banner exists and no cookie exists', function () {
     var div = document.createElement('div')
     div.setAttribute('data-ga4-cookie-banner', '')
     document.body.appendChild(div)
@@ -498,6 +498,17 @@ describe('Google Tag Manager page view tracking', function () {
     document.body.removeChild(div)
   })
 
+  it('doesn\'t set the cookie parameter when the banner is hidden via the cookie', function () {
+    var div = document.createElement('div')
+    div.setAttribute('data-ga4-cookie-banner', '')
+    div.setAttribute('data-module', 'cookie-banner')
+    window.GOVUK.setCookie('cookies_policy', '{"essential":true,"settings":false,"usage":false,"campaigns":false}')
+    expected.page_view.cookie_banner = undefined
+    GOVUK.analyticsGa4.analyticsModules.PageViewTracker.init()
+    expect(window.dataLayer[0]).toEqual(expected)
+    window.GOVUK.setCookie('cookie_policy', '')
+  })
+
   describe('intervention banner', function () {
     var div
     beforeEach(function () {