From 6cf47dc7eef9d006b95b4d9f80d30cd28a7c4c8e Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 17 Sep 2025 17:14:07 +0100
Subject: [PATCH] improves Google Tag Manager implementation

---
 src/components/Analytics/Analytics.svelte | 25 +++----------------
 src/components/Analytics/GTM.svelte       | 30 +++++++++++++++++++++++
 2 files changed, 33 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Analytics/GTM.svelte

diff --git a/src/components/Analytics/Analytics.svelte b/src/components/Analytics/Analytics.svelte
index 75afbe74..1a2cfcb5 100644
--- a/src/components/Analytics/Analytics.svelte
+++ b/src/components/Analytics/Analytics.svelte
@@ -1,10 +1,5 @@
 <!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
-
 <script module>
-  // GTM configuration
-  const GTM_ID = 'GTM-P9TTSWG2';
-  const GTM_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','${GTM_ID}');`;
-
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
 
@@ -24,6 +19,8 @@
 
   import { onMount } from 'svelte';
   import { ga, chartbeat } from './providers';
+  import GoogleTagManager from './GTM.svelte';
+
   interface Props {
     /**
      * Used to associate a page with its author(s) in Chartbeat.
@@ -39,20 +36,4 @@
   });
 </script>
 
-<svelte:head>
-  <!-- Google Tag Manager -->
-  {@html `<${'script'}>${GTM_SCRIPT}</script>`}
-  <!-- End Google Tag Manager -->
-</svelte:head>
-
-<!-- Google Tag Manager (noscript) -->
-<noscript>
-  <iframe
-    src="https://www.googletagmanager.com/ns.html?id={GTM_ID}"
-    height="0"
-    width="0"
-    style="display:none;visibility:hidden"
-    title=""
-  ></iframe>
-</noscript>
-<!-- End Google Tag Manager (noscript) -->
+<GoogleTagManager />
diff --git a/src/components/Analytics/GTM.svelte b/src/components/Analytics/GTM.svelte
new file mode 100644
index 00000000..a00fdcbe
--- /dev/null
+++ b/src/components/Analytics/GTM.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  const GTM_ID = 'GTM-P9TTSWG2';
+</script>
+
+<svelte:head>
+  <!-- Google Tag Manager -->
+  <link href="https://www.googletagmanager.com" rel="preconnect" />
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      'gtm.start': new Date().getTime(),
+      event: 'gtm.js',
+    });
+  </script>
+  <script async src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}>
+  </script>
+  <!-- End Google Tag Manager -->
+</svelte:head>
+
+<!-- Google Tag Manager (noscript) -->
+<noscript>
+  <iframe
+    src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+    height="0"
+    width="0"
+    style="display:none;visibility:hidden"
+    title=""
+  ></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->