Merge pull request #826 from trade-tariff/HMRC-580-Update-GTM-Impleme…

…ntation HMRC-580-Update-GTM-Implementation
trade-tariff · Jan 29, 2025 · acf06b8 · acf06b8
2 parents 9ebc83b + af15756
commit acf06b8
Show file tree

Hide file tree

Showing 18 changed files with 154 additions and 45 deletions.
diff --git a/.env.development b/.env.development
@@ -1,5 +1,6 @@
 API_SERVICE_BACKEND_URL_OPTIONS={"uk":"http://localhost:3000/","xi":"http://localhost:3000/xi"}
 DUTY_CALCULATOR_HOST=http://localhost:3002
+GOOGLE_TAG_MANAGER_CONTAINER_ID=GTM-XXXXXXX
 PORT=3002
 ROUTE_THROUGH_FRONTEND=false
 TRADE_TARIFF_FRONTEND_URL="http://localhost:3001/"

diff --git a/.env.test b/.env.test
@@ -1,3 +1,4 @@
 API_SERVICE_BACKEND_URL_OPTIONS={"uk":"https://dev.trade-tariff.service.gov.uk","xi":"https://dev.trade-tariff.service.gov.uk/xi"}
 FRONTEND_HOST=http://test.host
+GOOGLE_TAG_MANAGER_CONTAINER_ID=GTM-XXXXXXX
 TRADE_TARIFF_FRONTEND_URL='https://dev.trade-tariff.service.gov.uk'
diff --git a/app/helpers/service_helper.rb b/app/helpers/service_helper.rb
@@ -68,6 +68,10 @@ def referred_service
     params_referred_service.presence || session_referred_service.presence || DEFAULT_REFERRED_SERVICE
   end
 
+  def google_tag_manager_container_id
+    @google_tag_manager_container_id ||= ENV.fetch('GOOGLE_TAG_MANAGER_CONTAINER_ID', '')
+  end
+
   private
 
   def service_url_for(path)

diff --git a/app/views/layouts/_google_tag_manager.html.erb b/app/views/layouts/_google_tag_manager.html.erb
diff --git a/app/views/layouts/_google_tag_manager_no_script.html.erb b/app/views/layouts/_google_tag_manager_no_script.html.erb
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,7 +8,6 @@
   <%= tag :meta, name: 'viewport', content: 'width=device-width, initial-scale=1' %>
   <%= tag :meta, property: 'og:image', content: asset_pack_path('media/images/govuk-opengraph-image.png') %>
   <%= tag :meta, name: 'theme-color', content: '#0b0c0c' %>
-  <%= render partial: 'layouts/google_tag_manager' %>
   <%= favicon_link_tag asset_pack_path('media/images/favicon.ico'), sizes: '48x48' %>
   <%= favicon_link_tag asset_pack_path('media/images/favicon.svg'), sizes: 'any' %>
   <%= favicon_link_tag asset_pack_path('media/images/govuk-icon-mask.svg'), rel: 'mask-icon', type: 'image/svg', color: "#0b0c0c" %>
@@ -18,9 +17,11 @@
 </head>
 
 <body class="govuk-template__body ">
-  <%= render partial: 'layouts/google_tag_manager_no_script' %>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%= google_tag_manager_container_id %>"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <%= javascript_tag nonce: true do -%>
   document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
+  window.googleTagManagerContainerId = "<%= google_tag_manager_container_id %>";
   <% end -%>
 
   <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>

diff --git a/app/webpacker/packs/application.js b/app/webpacker/packs/application.js
@@ -4,5 +4,8 @@ import '../styles/application.scss';
 import Rails from 'rails-ujs';
 import { initAll } from 'govuk-frontend/dist/govuk/govuk-frontend.min.js';
 
+require('../src/javascripts/google-tag-manager-loader.js');
+require('../src/javascripts/cookie-manager.js');
+
 Rails.start();
 initAll();
diff --git a/app/webpacker/src/javascripts/cookie-manager.js b/app/webpacker/src/javascripts/cookie-manager.js
@@ -0,0 +1,82 @@
+import Cookies from 'js-cookie';
+
+export default class CookieManager {
+  constructor() {
+    this.cookiesPolicyName = 'cookies_policy';
+    this.cookiesHideConfirmName = 'cookies_preferences_set';
+    this.cookiesTreeOpenClosedDefault = 'tree_open_close_default';
+    this.expiresInOneYear = 365;
+    this.expiresInTwentyEightDays = 28;
+  }
+
+  rememberSettings() {
+    const rememberSettings = this.getCookiesPolicy()?.remember_settings;
+    return rememberSettings === 'true' ? true : rememberSettings === 'false' ? false : rememberSettings || false;
+  }
+
+  usage() {
+    const usage = this.getCookiesPolicy()?.usage;
+    return usage === 'true' ? true : usage === 'false' ? false : usage || false;
+  }
+
+  shouldOpenTree() {
+    return this.getCookiesTreeOpenClosedDefault() === 'open';
+  }
+
+  showAcceptRejectCookiesBanner() {
+    return !this.getCookiesPolicy();
+  }
+
+  showHideConfirmCookiesBanner() {
+    return this.getCookiesHideConfirm() === null;
+  }
+
+  setCookiesPolicy(value = {usage: true, remember_settings: true}) {
+    this.#setCookie(this.cookiesPolicyName, value, this.expiresInOneYear);
+  }
+
+  getCookiesPolicy() {
+    return this.#getCookie(this.cookiesPolicyName);
+  }
+
+  setCookiesHideConfirm(value = {value: true}) {
+    this.#setCookie(this.cookiesHideConfirmName, value, this.expiresInOneYear);
+  }
+
+  getCookiesHideConfirm() {
+    return this.#getCookie(this.cookiesHideConfirmName);
+  }
+
+  setCookiesTreeOpenClosedDefault(value = {value: 'open'}) {
+    this.#setCookie(this.cookiesTreeOpenClosedDefault, value, this.expiresInTwentyEightDays);
+  }
+
+  getCookiesTreeOpenClosedDefault() {
+    return this.#getCookie(this.cookiesTreeOpenClosedDefault)?.value || 'open';
+  }
+
+  #setCookie(name, value, expires) {
+    const isSecureEnvironment = location.protocol === 'https:';
+    const encodedValue = JSON.stringify(value);
+
+    Cookies.set(name, encodedValue, {
+      expires: expires,
+      secure: isSecureEnvironment,
+      sameSite: 'Strict',
+    });
+  }
+
+  #getCookie(name) {
+    const candidateJson = Cookies.get(name);
+
+    if (!candidateJson) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(candidateJson);
+    } catch (e) {
+      return candidateJson;
+    }
+  }
+}
diff --git a/app/webpacker/src/javascripts/google-tag-manager-loader.js b/app/webpacker/src/javascripts/google-tag-manager-loader.js
@@ -0,0 +1,15 @@
+import CookieManager from './cookie-manager.js';
+
+const cookieManager = new CookieManager();
+
+if (cookieManager.usage()) {
+  (function(w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
+    const j = d.createElement(s);
+    const dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    document.head.insertBefore(j, document.head.firstChild);
+  })(window, document, 'script', 'dataLayer', window.googleTagManagerContainerId);
+}
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
@@ -8,7 +8,7 @@
     policy.font_src    :self, :data
     policy.img_src     :self, :data
     policy.object_src  :none
-    policy.script_src  :self
+    policy.script_src  :self, :https, 'https://www.googletagmanager.com'
     # policy.style_src   :self
     # Specify URI for violation reports
     policy.report_uri ENV['SENTRY_CSP_ENDPOINT'] if ENV['SENTRY_CSP_ENDPOINT'].present?

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "rails-ujs": "^5.2.8",
     "serialize-javascript": "^6.0.2",
     "set-value": "^4.1.0",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "js-cookie": "^3.0.5"
   },
   "license": "MIT"
 }
diff --git a/terraform/README.md b/terraform/README.md
@@ -44,6 +44,7 @@ Terraform to deploy the service into AWS.
 | <a name="input_cpu"></a> [cpu](#input\_cpu) | CPU units to use. | `number` | n/a | yes |
 | <a name="input_docker_tag"></a> [docker\_tag](#input\_docker\_tag) | Image tag to use. | `string` | n/a | yes |
 | <a name="input_environment"></a> [environment](#input\_environment) | Deployment environment. | `string` | n/a | yes |
+| <a name="input_google_tag_manager_container_id"></a> [google\_tag\_manager\_container\_id](#input\_google\_tag\_manager\_container\_id) | Google Tag Manager container ID | `string` | n/a | yes |
 | <a name="input_max_capacity"></a> [max\_capacity](#input\_max\_capacity) | Largest number of tasks the service can scale-out to. | `number` | n/a | yes |
 | <a name="input_memory"></a> [memory](#input\_memory) | Memory to allocate in MB. Powers of 2 only. | `number` | n/a | yes |
 | <a name="input_min_capacity"></a> [min\_capacity](#input\_min\_capacity) | Smallest number of tasks the service can scale-in to. | `number` | n/a | yes |

diff --git a/terraform/config_development.tfvars b/terraform/config_development.tfvars
@@ -1,8 +1,9 @@
-region        = "eu-west-2"
-environment   = "development"
-base_domain   = "dev.trade-tariff.service.gov.uk"
-cpu           = 1024
-memory        = 2048
-service_count = 2
-min_capacity  = 1
-max_capacity  = 3
+region                          = "eu-west-2"
+environment                     = "development"
+base_domain                     = "dev.trade-tariff.service.gov.uk"
+cpu                             = 1024
+memory                          = 2048
+service_count                   = 2
+min_capacity                    = 1
+max_capacity                    = 3
+google_tag_manager_container_id = "GTM-T3DVNHRW"
diff --git a/terraform/config_production.tfvars b/terraform/config_production.tfvars
@@ -1,8 +1,9 @@
-region        = "eu-west-2"
-environment   = "production"
-base_domain   = "trade-tariff.service.gov.uk"
-cpu           = 1024
-memory        = 2048
-service_count = 3
-min_capacity  = 2
-max_capacity  = 5
+region                          = "eu-west-2"
+environment                     = "production"
+base_domain                     = "trade-tariff.service.gov.uk"
+cpu                             = 1024
+memory                          = 2048
+service_count                   = 3
+min_capacity                    = 2
+max_capacity                    = 5
+google_tag_manager_container_id = "GTM-KPM7NRDG"
diff --git a/terraform/config_staging.tfvars b/terraform/config_staging.tfvars
@@ -1,8 +1,9 @@
-region        = "eu-west-2"
-environment   = "staging"
-base_domain   = "staging.trade-tariff.service.gov.uk"
-cpu           = 1024
-memory        = 2048
-service_count = 3
-min_capacity  = 2
-max_capacity  = 5
+region                          = "eu-west-2"
+environment                     = "staging"
+base_domain                     = "staging.trade-tariff.service.gov.uk"
+cpu                             = 1024
+memory                          = 2048
+service_count                   = 3
+min_capacity                    = 2
+max_capacity                    = 5
+google_tag_manager_container_id = "GTM-M48MSVMQ"
diff --git a/terraform/main.tf b/terraform/main.tf
@@ -64,6 +64,10 @@ module "service" {
     {
       name  = "TRADE_TARIFF_FRONTEND_URL"
       value = "https://${var.base_domain}"
+    },
+    {
+      name  = "GOOGLE_TAG_MANAGER_CONTAINER_ID"
+      value = var.google_tag_manager_container_id
     }
   ]
 

diff --git a/terraform/variables.tf b/terraform/variables.tf
@@ -42,3 +42,8 @@ variable "memory" {
   description = "Memory to allocate in MB. Powers of 2 only."
   type        = number
 }
+
+variable "google_tag_manager_container_id" {
+  description = "Google Tag Manager container ID"
+  type        = string
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3640,6 +3640,11 @@ jest-worker@^26.5.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"