TRG-317: Provide support for Google Tag Manager

grahampaulcook · eddgrant · commit 8f41ea95eafb · 2024-06-21T13:41:40.000+01:00
This is a cherry-pick of 63b2a30 from grahampaulcook/tech-docs-gem which introduces support for Google Tag Manager. A pull request has been raised to include this change: alphagov#187 however GDS have not yet picked it up, so we're pulling it in here for use at HMRC in the meantime. (cherry picked from commit 671dd75)
diff --git a/lib/source/layouts/_google_tag_manager_js.erb b/lib/source/layouts/_google_tag_manager_js.erb
@@ -0,0 +1,12 @@
+<% if config[:tech_docs][:gtm_id].is_a?(String) && !config[:tech_docs][:gtm_id].empty? %>
+  <script>
+    (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][:gtm_id] %>');
+  </script>
+<% end %>
diff --git a/lib/source/layouts/_google_tag_manager_non_js.erb b/lib/source/layouts/_google_tag_manager_non_js.erb
@@ -0,0 +1,4 @@
+<% if config[:tech_docs][:gtm_id].is_a?(String) && !config[:tech_docs][:gtm_id].empty? %>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%= config[:tech_docs][:gtm_id] %>"
+                    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<% end %>
diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb
@@ -19,10 +19,12 @@
       <%= tag :meta, property: property, content: content %>
     <% end %>
 
+    <%= partial 'layouts/google_tag_manager_js' %>
     <%= yield_content :head %>
   </head>
 
   <body class="govuk-template__body">
+    <%= partial 'layouts/google_tag_manager_non_js' %>
     <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
 
     <div class="app-pane">
