Merge pull request #333 from reuters-graphics/feat/GTM-Move

GTM Container support - Removal of charbeat and GA

.changeset/gentle-guests-wonder.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Updates analytics scripts to work with GDPR-compliant GTM container

src/components/Analytics/Analytics.svelte

@@ -1,6 +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';
+  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';
 
@@ -34,3 +38,21 @@
     chartbeat(authors);
   });
 </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) -->

src/components/Analytics/providers/chartbeat.ts

@@ -1,20 +1,6 @@
 // Reuters Chartbeat UID
 const UID = 52639;
 
-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);
-};
-
 export default (authors: { name: string }[]) => {
   window._sf_async_config = {
     uid: UID,
@@ -26,12 +12,6 @@ export default (authors: { name: string }[]) => {
     authors: authors.map((a) => a?.name || '').join(','),
     ...(window._sf_async_config || {}),
   };
-
-  try {
-    attachScript();
-  } catch (e) {
-    console.warn(`Error initialising Chartbeat Analytics: ${e}`);
-  }
 };
 
 export const registerPageview = () => {

src/components/Analytics/providers/ga.ts

@@ -1,25 +1,10 @@
 // Reuters Google Tag ID
 const GOOGLE_TAG_ID = 'G-WBSR7WLTGD';
 
-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);
-};
-
 export default () => {
   try {
     window.dataLayer = window.dataLayer || [];
     if (!window.gtag) {
-      attachScript();
       /** @type {Gtag.Gtag} */
       window.gtag = function () {
         // eslint-disable-next-line prefer-rest-params