Merge pull request #436 from alphagov/cookie-banner

[PP-7355] Support Google Tag Manager

Author: yndajas

CHANGELOG.md

@@ -1,3 +1,9 @@
+## Unreleased
+
+### New features
+
+- [Support using Google Tag Manager for Google Analytics 4](https://github.com/alphagov/tech-docs-gem/pull/436)
+
 ## 5.1.1
 
 ### Fixes

example/config/tech-docs.yml

@@ -19,10 +19,12 @@ footer_links:
   Accessibility: /hidden-page.html
   Hidden Page: /hidden-page.html
 
-# Tracking ID (if using GA4 e.g G-XXXXXX)
+# Tracking IDs
+# Google Analytics 4 using gtag.js (e.g G-XXXXXX)
 ga4_tracking_id:
-
-# Tracking ID from Google Universal Analytics (e.g. UA-XXXX-Y)
+# Google Analytics 4 using Google Tag Manager (e.g GTM-XXXXXXXX)
+ga4_gtm_tracking_id:
+# Google Universal Analytics (e.g. UA-XXXX-Y)
 ga_tracking_id:
 
 # Enable multipage navigation in the sidebar

lib/assets/javascripts/_modules/cookie-banner.js

@@ -0,0 +1,39 @@
+(function ($, Modules) {
+  'use strict'
+
+  Modules.CookieBanner = function () {
+    let $cookieBanner
+
+    this.start = function ($element) {
+      $cookieBanner = $element
+
+      if ($cookieBanner && getCookie('cookies_preferences_set') !== 'true') {
+        $('#cookie-banner__accept').on('click', acceptCookies)
+        $('#cookie-banner__reject').on('click', rejectCookies)
+
+        $cookieBanner.removeAttr('hidden')
+      }
+    }
+
+    function acceptCookies () {
+      document.cookie = 'cookies_preferences_set=true'
+      document.cookie = 'cookies_policy={"usage":true}'
+
+      $cookieBanner.attr('hidden', 'hidden')
+    }
+
+    function rejectCookies () {
+      document.cookie = 'cookies_preferences_set=true'
+      document.cookie = 'cookies_policy={"usage":false}'
+
+      $cookieBanner.attr('hidden', 'hidden')
+    }
+
+    function getCookie (name) {
+      return document.cookie
+        .split('; ')
+        .find(cookie => cookie.split('=')[0] === name)
+        ?.split('=')[1]
+    }
+  }
+})(jQuery, window.GOVUK.Modules)

lib/assets/javascripts/_start-modules.js

@@ -1,5 +1,6 @@
 //= require _govuk/modules
 //= require _modules/anchored-headings
+//= require _modules/cookie-banner
 //= require _modules/in-page-navigation
 //= require _modules/navigation
 //= require _modules/page-expiry

lib/assets/stylesheets/_govuk_tech_docs.scss

@@ -17,6 +17,7 @@ $govuk-new-link-styles: true;
 @import "govuk/core/index";
 @import "govuk/objects/index";
 
+@import "govuk/components/cookie-banner/index";
 @import "govuk/components/footer/index";
 @import "govuk/components/header/index";
 @import "govuk/components/inset-text/index";

lib/source/layouts/_analytics_head.erb renamed to lib/source/layouts/_analytics_ga4_gtag.erb

@@ -7,4 +7,4 @@
     gtag('js', new Date());
     gtag('config', '<%= config[:tech_docs][:ga4_tracking_id] %>');
   </script>
-<% end %>
+<% end %>

lib/source/layouts/_analytics_ga4_gtm.erb

@@ -0,0 +1,18 @@
+<% if config[:tech_docs][:ga4_gtm_tracking_id].is_a?(String) && !config[:tech_docs][:ga4_gtm_tracking_id].empty? %>
+  <!-- Google Tag Manager -->
+  <script>
+    const cookies_policy_cookie = document.cookie
+      .split('; ')
+      .find(cookie => cookie.split('=')[0] === 'cookies_policy')
+      ?.split('=')[1]
+
+    if (cookies_policy_cookie && JSON.parse(cookies_policy_cookie).usage) {
+      (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;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','<%= config[:tech_docs][:ga4_gtm_tracking_id] %>');
+    }
+  </script>
+  <!-- End Google Tag Manager -->
+<% end %>

lib/source/layouts/_cookie_banner.erb

@@ -0,0 +1,24 @@
+<% if config[:tech_docs][:ga4_gtm_tracking_id].is_a?(String) && !config[:tech_docs][:ga4_gtm_tracking_id].empty? %>
+  <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on <%= config[:tech_docs][:service_name] %>" hidden="hidden" data-module="cookie-banner">
+    <div class="govuk-cookie-banner__message govuk-width-container">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+            Cookies on <%= config[:tech_docs][:service_name] %>
+          </h2>
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+      <div class="govuk-button-group">
+        <button id="cookie-banner__accept" type="button" class="govuk-button" data-module="govuk-button">
+          Accept analytics cookies
+        </button>
+        <button id="cookie-banner__reject" type="button" class="govuk-button" data-module="govuk-button">
+          Reject analytics cookies
+        </button>
+      </div>
+    </div>
+  </div>
+<% end %>

lib/source/layouts/core.erb

@@ -1,7 +1,8 @@
 <!doctype html>
 <html lang="en" class="govuk-template <%= config[:tech_docs][:show_govuk_logo] ? 'govuk-template--rebranded ' : '' %>no-js">
   <head>
-    <%= partial 'layouts/analytics_head' %>
+    <%= partial 'layouts/analytics_ga4_gtag' %>
+    <%= partial 'layouts/analytics_ga4_gtm' %>
 
     <meta content="IE=edge" http-equiv="X-UA-Compatible">
     <meta charset="utf-8">
@@ -51,6 +52,7 @@
     <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
 
     <div class="app-pane">
+      <%= partial 'layouts/cookie_banner' %>
       <div class="app-pane__header toc-open-disabled">
         <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>