From 1103a872821d1e9624073d4b644d771f855c06fe Mon Sep 17 00:00:00 2001
From: Paul Alexandrescu <paul.alexandrescu@thomsonreuters.com>
Date: Tue, 15 Jul 2025 22:53:06 -0400
Subject: [PATCH] feat(GTM): add GTM container with early head injection

  - Add GTM script injection via <svelte:head> for early loading
  - Include GTM noscript iframe fallback for non-JS users
  - Configure Reuters GTM container ID (GTM-P9TTSWG2)
  - Update GA and Chartbeat providers to allow loading via GTM container
---
 src/components/Analytics/Analytics.svelte     | 27 +++++++++++++++++++
 .../Analytics/providers/chartbeat.ts          |  9 +------
 src/components/Analytics/providers/ga.ts      |  9 +------
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/Analytics/Analytics.svelte b/src/components/Analytics/Analytics.svelte
index 7c85d2aa..da35ded2 100644
--- a/src/components/Analytics/Analytics.svelte
+++ b/src/components/Analytics/Analytics.svelte
@@ -1,5 +1,10 @@
 <!-- @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';
+</script>
+
 <script module>
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
@@ -8,6 +13,7 @@
   function registerPageview() {
     registerChartbeatPageview();
     registerGAPageview();
+    
   }
 
   export { registerPageview };
@@ -34,3 +40,24 @@
     chartbeat(authors);
   });
 </script>
+
+<svelte:head>
+  <!-- Google Tag Manager -->
+  {@html `<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}');</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"
+  ></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->
diff --git a/src/components/Analytics/providers/chartbeat.ts b/src/components/Analytics/providers/chartbeat.ts
index aedea3a0..2db1b357 100644
--- a/src/components/Analytics/providers/chartbeat.ts
+++ b/src/components/Analytics/providers/chartbeat.ts
@@ -5,14 +5,7 @@ const URL = '//static.chartbeat.com/js/chartbeat.js';
 
 const attachScript = () => {
   // If script is already attached, skip
-  if (document.querySelector(`script[src="${URL}"]`)) return;
-  // ... else attach it.
-  const e = document.createElement('script');
-  const n = document.getElementsByTagName('script')[0];
-  e.type = 'text/javascript';
-  e.async = true;
-  e.src = URL;
-  n.parentNode!.insertBefore(e, n);
+  // loaded via GTM Container 
 };
 
 export default (authors: { name: string }[]) => {
diff --git a/src/components/Analytics/providers/ga.ts b/src/components/Analytics/providers/ga.ts
index 6bd02d1d..745352ac 100644
--- a/src/components/Analytics/providers/ga.ts
+++ b/src/components/Analytics/providers/ga.ts
@@ -5,14 +5,7 @@ const URL = `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG_ID}`;
 
 const attachScript = () => {
   // If script is already attached, skip
-  if (document.querySelector(`script[src="${URL}"]`)) return;
-  // ... else attach it.
-  const e = document.createElement('script');
-  const n = document.getElementsByTagName('script')[0];
-  e.type = 'text/javascript';
-  e.async = true;
-  e.src = URL;
-  n.parentNode!.insertBefore(e, n);
+  // loaded via GTM Container
 };
 
 export default () => {