CMDCT-3060: Tealium Tracking (#2033)

Enterprise-CMCS · Jan 12, 2024 · 2910023 · 2910023
1 parent 894004c
commit 2910023
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 2 deletions.
diff --git a/services/ui-src/.env_example b/services/ui-src/.env_example
@@ -1,12 +1,15 @@
 BRANCH_NAME=local
 LOCAL_LOGIN=true
 PROD_URL=placeholder
+STAGE=local
 
 # AWS
+
 API_REGION=us-east-1
 API_URL=http://localhost:3030
 
 ## COGNITO
+
 COGNITO_IDENTITY_POOL_ID=us-east-1:61c849d8-f95c-45af-8131-15b75c525034
 COGNITO_REDIRECT_SIGNIN=http://localhost:3000/
 COGNITO_REDIRECT_SIGNOUT=http://localhost:3000/
@@ -17,10 +20,12 @@ COGNITO_USER_POOL_CLIENT_ID=46fh6sftchq768ab0v65cpq0cf
 POST_SIGNOUT_REDIRECT=http://localhost:3000/
 
 ## S3
+
 S3_ATTACHMENTS_BUCKET_NAME=uploads-master-attachments-024259748323
 S3_ATTACHMENTS_BUCKET_REGION=us-east-1
 S3_LOCAL_ENDPOINT=http://localhost:4569
 
 # LAUNCHDARKLY
+
 LD_PROJECT_KEY=mdct-qmr
 REACT_APP_LD_SDK_CLIENT=63581ea07a993f590567cb44 #pragma allowlist secret
diff --git a/services/ui-src/public/index.html b/services/ui-src/public/index.html
@@ -31,9 +31,40 @@
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
     />
+    <!-- Tealium Analytics Tag Manager -->
+    <script>
+      var nodeEnv = window._env_.STAGE;
+      var tealiumEnvMap = {
+        val: "qa",
+        production: "prod",
+      };
+      var tealiumEnv = tealiumEnvMap[nodeEnv] || "dev";
+      var tealiumUrl = `https://tags.tiqcdn.com/utag/cmsgov/cms-mdctqmr/${tealiumEnv}/utag.sync.js`;
+      document.write(`<script src="${tealiumUrl}" async><\/script>`);
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- Tealium Analytics Tag Manager -->
+    <script>
+      window.utag_cfg_ovrd = { noview: true };
+    </script>
+    <script>
+      (function (t, e, a, l, i, u, m) {
+        t = "cmsgov/cms-mdctqmr";
+        e = tealiumEnv;
+        a = "/" + t + "/" + e + "/utag.js";
+        l = "//tags.tiqcdn.com/utag" + a;
+        i = document;
+        u = "script";
+        m = i.createElement(u);
+        m.src = l;
+        m.type = "text/java" + u;
+        m.async = true;
+        l = i.getElementsByTagName(u)[0];
+        l.parentNode.insertBefore(m, l);
+      })();
+    </script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/services/ui-src/src/App.tsx b/services/ui-src/src/App.tsx
@@ -2,12 +2,19 @@ import { AppRoutes } from "./Routes";
 import * as QMR from "components";
 import { LocalLogins, PostLogoutRedirect } from "components";
 import { useUser } from "hooks/authHooks";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { MeasuresLoading } from "views";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { fireTealiumPageView } from "utils/tracking/tealium";
 
 const App = () => {
   const { logout, user, showLocalLogins, loginWithIDM } = useUser();
+  const { pathname, key } = useLocation();
+
+  // fire tealium page view on route change
+  useEffect(() => {
+    fireTealiumPageView(user, window.location.href, pathname);
+  }, [key, pathname, user]);
 
   const authenticatedRoutes = (
     <>

diff --git a/services/ui-src/src/utils/tracking/tealium.js b/services/ui-src/src/utils/tracking/tealium.js
@@ -0,0 +1,23 @@
+export const fireTealiumPageView = (user, url, pathname) => {
+  // TODO: this will need to be updated for the upcoming Combined Ratio page view
+  const isReportPage =
+    pathname.endsWith("-AD") ||
+    pathname.endsWith("-CH") ||
+    pathname.endsWith("-HH") ||
+    pathname.endsWith("CSQ");
+  const contentType = isReportPage ? "form" : "app";
+  const sectionName = isReportPage ? pathname.split("/")[1] : "main app";
+  const { host: siteDomain } = url ? new URL(url) : null;
+  if (window.utag) {
+    window.utag.view({
+      content_language: "en",
+      content_type: contentType,
+      page_name: sectionName + ":" + pathname,
+      page_path: pathname,
+      site_domain: siteDomain,
+      site_environment: process.env.NODE_ENV,
+      site_section: sectionName,
+      logged_in: !!user,
+    });
+  }
+};
diff --git a/services/ui/serverless.yml b/services/ui/serverless.yml
@@ -239,6 +239,7 @@ resources:
             var headers = response.headers;
             headers['strict-transport-security'] = { value: 'max-age=63072000; includeSubdomains; preload'};
             headers['x-frame-options'] = { value: 'DENY' };
+            headers["content-security-policy"] = { value: "default-src 'self'; img-src 'self' data: https://www.google-analytics.com; script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://www.googletagmanager.com tags.tiqcdn.com tags.tiqcdn.cn tags-eu.tiqcdn.com https://*.adoberesources.net 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src https://*.amazonaws.com/ https://*.amazoncognito.com https://www.google-analytics.com https://*.launchdarkly.us https://adobe-ep.cms.gov https://adobedc.demdex.net; frame-ancestors 'none'; object-src 'none'"};
             return response;
           }
         FunctionConfig: