Merge pull request #5437 from novuhq/feature/add-gtag

feat: add google analytics script tag
novuhq · Apr 26, 2024 · c89dce5 · c89dce5
2 parents 8d07372 + 6c8fc29
commit c89dce5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/.github/workflows/reusable-web-deploy.yml b/.github/workflows/reusable-web-deploy.yml
@@ -86,7 +86,7 @@ jobs:
           echo REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID=${{ secrets.LAUNCH_DARKLY_CLIENT_SIDE_ID }} >> .env
           echo REACT_APP_HUBSPOT_EMBED=${{ inputs.react_app_hubspot_embed }} >> .env
           echo REACT_APP_STRIPE_CLIENT_KEY=${{ secrets.STRIPE_CLIENT_KEY }} >> .env
-
+          echo REACT_APP_NOVU_GTM_ID=${{ secrets.REACT_APP_NOVU_GTM_ID }} >> .env
       - name: Envsetup
         working-directory: apps/web
         run: npm run envsetup

diff --git a/apps/web/.env b/apps/web/.env
@@ -16,3 +16,4 @@ REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID=
 IS_TEMPLATE_STORE_ENABLED=
 IS_MULTI_PROVIDER_CONFIGURATION_ENABLED=
 IS_MULTI_TENANCY_ENABLED=
+REACT_APP_NOVU_GTM_ID=
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
@@ -1,6 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Google Tag Manager -->
+    <% if ( process.env.REACT_APP_NOVU_GTM_ID ) { %>
+    <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_NOVU_GTM_ID%');
+    </script>
+    <% } %>
+    <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon-gradient.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -28,6 +44,18 @@
     <script src="%PUBLIC_URL%/env-config.js"></script>
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <% if ( process.env.REACT_APP_NOVU_GTM_ID ) { %>
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=%REACT_APP_NOVU_GTM_ID%"
+        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>
     <% if ( process.env.REACT_APP_DOCKER_HOSTED_ENV === 'false' ) { %>
@@ -37,9 +65,7 @@
       async="async"
       type="text/javascript"
     ></script>
-    <% } %>
-
-    <% if ( process.env.REACT_APP_HUBSPOT_EMBED ) { %>
+    <% } %> <% if ( process.env.REACT_APP_HUBSPOT_EMBED ) { %>
     <!-- Start of HubSpot Embed Code -->
     <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<%= process.env.REACT_APP_HUBSPOT_EMBED %>.js"></script>
     <!-- End of HubSpot Embed Code -->