Google Tag Manager tracker

catalog/app/app.tsx

@@ -24,6 +24,7 @@ import { ExperimentsProvider } from 'components/Experiments'
 import * as Intercom from 'components/Intercom'
 import Placeholder from 'components/Placeholder'
 import App from 'containers/App'
+import GTMLoader from 'utils/gtm'
 import * as Auth from 'containers/Auth'
 import * as Errors from 'containers/Errors'
 import * as Notifications from 'containers/Notifications'
@@ -97,6 +98,7 @@ const render = () => {
       Notifications.Provider,
       [APIConnector.Provider, { fetch, middleware: [Auth.apiMiddleware] }],
       [Auth.Provider, { checkOn: LOCATION_CHANGE, storage }],
+      GTMLoader,
       [
         Intercom.Provider,
         {

catalog/app/utils/Config.ts

@@ -22,6 +22,7 @@ export interface ConfigJson {
   registryUrl: string
   s3Proxy: string
 
+  gtmId?: string
   intercomAppId?: string
   mixpanelToken: string
   sentryDSN?: string

catalog/app/utils/gtm.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+import cfg from 'constants/config'
+
+function loadScript(src: string) {
+  const s = window.document.createElement('script')
+  s.type = 'text/javascript'
+  s.async = true
+  s.src = src
+
+  const x = window.document.getElementsByTagName('script')[0]
+  x.parentNode?.insertBefore(s, x)
+}
+
+function addScript(content: string) {
+  const s = window.document.createElement('script')
+  s.type = 'text/javascript'
+  s.innerText = content
+  const x = window.document.getElementsByTagName('script')[0]
+  x.parentNode?.insertBefore(s, x)
+}
+
+interface GTMLoaderProps {
+  children: React.ReactNode
+}
+
+export default function GTMLoader({ children }: GTMLoaderProps) {
+  const gtmId = cfg.gtmId
+  React.useEffect(() => {
+    if (!gtmId) return
+    loadScript(`https://www.googletagmanager.com/gtag/js?id=${gtmId}`)
+    addScript(`
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${gtmId}');
+    `)
+  }, [gtmId])
+  return <>{children}</>
+}

catalog/config-schema.json

@@ -88,6 +88,10 @@
     "build_version": {
       "type": "string",
       "description": "Optional"
+    },
+    "gtmId": {
+      "type": "string",
+      "description": "ID for Google TagManager/Analytics service"
     }
   },
   "required": [