Add google tag manager based on config variable

opentargets-archive · Jun 23, 2021 · f715b11 · f715b11
1 parent 6f97945
commit f715b11
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react-apollo": "^2.1.9",
     "react-dom": "^16.14.0",
     "react-ga": "^2.5.3",
+    "react-gtm-module": "^2.0.11",
     "react-helmet": "^5.2.0",
     "react-measure": "^2.1.0",
     "react-router-dom": "^5.0.1",

diff --git a/public/config.template b/public/config.template
@@ -1,2 +1,3 @@
 // DevOps context
-var configApiUrl = DEVOPS_CONTEXT_PLATFORM_APP_CONFIG_API_URL
+var configApiUrl = DEVOPS_CONTEXT_PLATFORM_APP_CONFIG_API_URL
+var configGoogleTagManagerID = DEVOPS_CONTEXT_PLATFORM_APP_CONFIG_GOOGLE_TAG_MANAGER_ID
diff --git a/public/index.html b/public/index.html
@@ -1,31 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <% if (process.env.REACT_APP_GTMID) { %>
-    <!-- Google Tag Manager -->
-    <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', '%REACT_APP_GTMID%');</script>
-    <!-- End Google Tag Manager -->
-    <% } %>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-      <meta name="theme-color" content="#000000">
-      <meta name="description"
-        content="Open Targets Genetics explores associations between traits, variants, and genes with a focus on multi-trait analysis and gene to variant scoring." />
-      <!--
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <meta name="description" content="Open Targets Genetics explores associations between traits, variants, and genes with a focus on multi-trait analysis and gene to variant scoring." />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-      <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-      <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -34,31 +20,23 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-      <title>Open Targets Genetics</title>
-
-      <!-- info for social media sharing -->
-      <meta property="og:title" content="Open Targets Genetics" />
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content="%PUBLIC_URL%/" />
-      <meta property="og:description"
-        content="Open Targets Genetics explores associations between traits, variants, and genes with a focus on multi-trait analysis and gene to variant scoring." />
-      <meta property="og:image" content="%PUBLIC_URL%/splash.png" />
-      <!-- meta tag for Google Search Console verification -->
-      <meta name="google-site-verification" content="yriKJyxp0olp1EINy6E1LLIiXuH_qcnqBVcrSy9UkAo" />
-</head>
-
-<body>
-  <% if (process.env.REACT_APP_GTMID) { %>
-    <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=%REACT_APP_GTMID%" height="0" width="0"
-        style="display:none;visibility:hidden"></iframe></noscript>
-    <!-- End Google Tag Manager (noscript) -->
-    <% } %>
-      <noscript>
-        You need to enable JavaScript to run this app.
-      </noscript>
-      <div id="root"></div>
-      <!--
+    <title>Open Targets Genetics</title>
+    <!-- info for social media sharing -->
+    <meta property="og:title" content="Open Targets Genetics" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="%PUBLIC_URL%/" />
+    <meta property="og:description"
+      content="Open Targets Genetics explores associations between traits, variants, and genes with a focus on multi-trait analysis and gene to variant scoring." />
+    <meta property="og:image" content="%PUBLIC_URL%/splash.png" />
+    <!-- meta tag for Google Search Console verification -->
+    <meta name="google-site-verification" content="yriKJyxp0olp1EINy6E1LLIiXuH_qcnqBVcrSy9UkAo" />
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -70,6 +48,5 @@
     -->
     <!--- Deployment Context -->
     <script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
-</body>
-
+  </body>
 </html>
diff --git a/src/config.js b/src/config.js
@@ -1,7 +1,6 @@
 const config = {
-  apiUrl: window.configApiUrl
-    ? window.configApiUrl
-    : 'https://genetics-api.opentargets.io/graphql',
+  apiUrl: window.configApiUrl ?? 'https://genetics-api.opentargets.io/graphql',
+  googleTagManagerID: window.configGoogleTagManagerID ?? null,
 };
 
 export default config;
diff --git a/src/index.js b/src/index.js
@@ -8,6 +8,7 @@ import { ApolloClient } from 'apollo-client';
 import { ApolloProvider } from 'react-apollo';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { HttpLink } from 'apollo-link-http';
+import TagManager from 'react-gtm-module';
 
 import App from './App';
 import { unregister } from './registerServiceWorker';
@@ -20,6 +21,10 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
+if (config.googleTagManagerID) {
+  TagManager.initialize({ gtmId: config.googleTagManagerID });
+}
+
 ReactDOM.render(
   <ApolloProvider client={client}>
     <App />

diff --git a/yarn.lock b/yarn.lock
@@ -11232,6 +11232,11 @@ react-ga@^2.5.3:
     prop-types "^15.6.0"
     react "^15.6.2 || ^16.0"
 
+react-gtm-module@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
+  integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
+
 react-helmet@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"