diff --git a/CHANGELOG.md b/CHANGELOG.md index 35a1eb7f..22989f73 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/example/config/tech-docs.yml b/example/config/tech-docs.yml index 09bb9195..2f7792cc 100644 --- a/example/config/tech-docs.yml +++ b/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 diff --git a/lib/assets/javascripts/_modules/cookie-banner.js b/lib/assets/javascripts/_modules/cookie-banner.js new file mode 100644 index 00000000..5017457f --- /dev/null +++ b/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) diff --git a/lib/assets/javascripts/_start-modules.js b/lib/assets/javascripts/_start-modules.js index dcf4b08e..5f945f77 100644 --- a/lib/assets/javascripts/_start-modules.js +++ b/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 diff --git a/lib/assets/stylesheets/_govuk_tech_docs.scss b/lib/assets/stylesheets/_govuk_tech_docs.scss index 47e784ca..a3379756 100644 --- a/lib/assets/stylesheets/_govuk_tech_docs.scss +++ b/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"; diff --git a/lib/source/layouts/_analytics_head.erb b/lib/source/layouts/_analytics_ga4_gtag.erb similarity index 97% rename from lib/source/layouts/_analytics_head.erb rename to lib/source/layouts/_analytics_ga4_gtag.erb index 21da87bd..2a0cf508 100644 --- a/lib/source/layouts/_analytics_head.erb +++ b/lib/source/layouts/_analytics_ga4_gtag.erb @@ -7,4 +7,4 @@ gtag('js', new Date()); gtag('config', '<%= config[:tech_docs][:ga4_tracking_id] %>'); -<% end %> \ No newline at end of file +<% end %> diff --git a/lib/source/layouts/_analytics_ga4_gtm.erb b/lib/source/layouts/_analytics_ga4_gtm.erb new file mode 100644 index 00000000..b14aca23 --- /dev/null +++ b/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? %> + + + +<% end %> diff --git a/lib/source/layouts/_cookie_banner.erb b/lib/source/layouts/_cookie_banner.erb new file mode 100644 index 00000000..3ee13b01 --- /dev/null +++ b/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? %> +
+<% end %> diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb index 7240b7d5..b9caa900 100644 --- a/lib/source/layouts/core.erb +++ b/lib/source/layouts/core.erb @@ -1,7 +1,8 @@ - <%= partial 'layouts/analytics_head' %> + <%= partial 'layouts/analytics_ga4_gtag' %> + <%= partial 'layouts/analytics_ga4_gtm' %> @@ -51,6 +52,7 @@