chore: refactor analytics

src/components/analytics/index.tsx → src/components/analytics-ga/index.tsx

@@ -8,21 +8,13 @@ import {
   GoogleTagManagerId
 } from '../../types/enums';
 
-const Analytics: FC = () => {
+const AnalyticsGA: FC = () => {
   const { hostname, pathname, search } = location;
 
-  const isFellesDatakatalog = [
-    'data.norge.no',
-    'fellesdatakatalog.digdir.no'
-  ].includes(hostname);
   const isTransportPortal = ['data.transportportal.no'].includes(hostname);
   const isLocalhost = ['localhost'].includes(hostname);
 
   const configureAnalytics = () => {
-    if (isFellesDatakatalog) {
-      ReactGA.initialize(GoogleAnalyticsTrackingId.FELLESDATAKATALOG);
-    }
-
     if (isTransportPortal) {
       ReactGA.initialize(GoogleAnalyticsTrackingId.TRANSPORTPORTAL);
       GoogleTagManager.initialize({
@@ -38,7 +30,7 @@ const Analytics: FC = () => {
   };
 
   const registerPageView = () => {
-    if (isFellesDatakatalog || isTransportPortal || isLocalhost) {
+    if (isTransportPortal || isLocalhost) {
       const page = `${pathname}${search}`;
 
       ReactGA.set({ page });
@@ -54,4 +46,4 @@ const Analytics: FC = () => {
   return null;
 };
 
-export default compose<FC>(memo)(Analytics);
+export default compose<FC>(memo)(AnalyticsGA);

src/components/analytics-monsido/index.tsx

@@ -0,0 +1,46 @@
+import { FC, useEffect } from 'react';
+
+const AnalyticsMonsido: FC = () => {
+  const { hostname } = location;
+  const isFellesDatakatalog = [
+    'data.norge.no',
+    'fellesdatakatalog.digdir.no'
+  ].includes(hostname);
+  const isTransportPortal = ['data.transportportal.no'].includes(hostname);
+
+  useEffect(() => {
+    const scriptInline = document.createElement('script');
+    const script = document.createElement('script');
+
+    scriptInline.type = 'text/javascript';
+    scriptInline.innerHTML = `
+            window._monsido = window._monsido || {
+              token: ${
+                isTransportPortal
+                  ? 'H7pMv_I-KwnWIR1nkiCXuw'
+                  : 'xAbTzhYnF9PHMK5X7XE-8g'
+              },
+              heatmap: { enabled: true }
+            };
+          `;
+
+    script.src = 'https://app-script.monsido.com/v2/monsido-script.js';
+    script.async = true;
+
+    if (isFellesDatakatalog || isTransportPortal) {
+      document.body.appendChild(scriptInline);
+      document.body.appendChild(script);
+    }
+
+    return () => {
+      if (isFellesDatakatalog || isTransportPortal) {
+        document.body.removeChild(scriptInline);
+        document.body.removeChild(script);
+      }
+    };
+  }, []);
+
+  return null;
+};
+
+export default AnalyticsMonsido;

src/components/analytics-siteimprove/index.tsx

@@ -0,0 +1,20 @@
+import { FC, useEffect } from 'react';
+
+const AnalyticsSiteImprove: FC = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+
+    script.src = 'https://siteimproveanalytics.com/js/siteanalyze_6255470.js';
+    script.async = true;
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return null;
+};
+
+export default AnalyticsSiteImprove;

src/entrypoints/main/bootstrap.tsx

@@ -16,7 +16,9 @@ import { getConfig } from '../../config';
 import { themeFDK, themeNAP } from '../../app/theme';
 import GlobalStyles from '../../app/styles';
 
-import Analytics from '../../components/analytics';
+import AnalyticsGA from '../../components/analytics-ga';
+import AnalyticsSiteImprove from '../../components/analytics-siteimprove';
+import AnalyticsMonsido from '../../components/analytics-monsido';
 import { store } from '../../redux/store';
 
 const client = new ApolloClient({
@@ -31,7 +33,9 @@ render(
     <GlobalStyles />
     <AuthProvider>
       <LoggingProvider>
-        <Analytics />
+        <AnalyticsGA />
+        <AnalyticsSiteImprove />
+        <AnalyticsMonsido />
         <ApolloProvider client={client}>
           <Provider store={store}>
             <BrowserRouter>

src/entrypoints/main/index.html

@@ -65,9 +65,6 @@
     />
     <script src="<%= webpackConfig.output.publicPath %>config.js"></script>
 
-    <!-- SiteImprove -->
-    <script async src=https://siteimproveanalytics.com/js/siteanalyze_6255470.js></script>
-
     <style>
       .screenreader-text {
         position: absolute;

src/entrypoints/publishing/app/index.tsx

@@ -10,12 +10,16 @@ import store from '../redux/store';
 import GlobalStyles from '../styles';
 import Router from '../router';
 
-import Analytics from '../../../components/analytics';
+import AnalyticsGA from '../../../components/analytics-ga';
+import AnalyticsMonsido from '../../../components/analytics-monsido';
+import AnalyticsSiteImprove from '../../../components/analytics-siteimprove';
 
 const App: FC = () => (
   <ThemeProvider>
     <GlobalStyles />
-    <Analytics />
+    <AnalyticsGA />
+    <AnalyticsMonsido />
+    <AnalyticsSiteImprove />
     <TranslationsProvider>
       <ReduxProvider store={store}>
         <Router />

src/entrypoints/publishing/index.html

@@ -34,8 +34,6 @@
     </script>
     <script src="<%= webpackConfig.output.publicPath %>config.js"></script>
 
-    <!-- SiteImprove -->
-    <script async src=https://siteimproveanalytics.com/js/siteanalyze_6255470.js></script>
   </head>
   <body>
     <div id="root"></div>