[WNMGDS-3344] Add Utag data object (#3559)

* Add ssr helper

* Make HTML dangerous

* Seems like it works

* Use ref for variable storage and remove unneeded function

Author: jack-ryan-nava-pbc

packages/docs/gatsby-ssr.tsx

@@ -0,0 +1,20 @@
+const proc = require('process');
+
+const HeadComponentsJs = (content) => (
+  <script type="text/javascript" dangerouslySetInnerHTML={content}></script>
+);
+
+exports.onRenderBody = ({ setPreBodyComponents }) => {
+  const env = proc.env.NODE_ENV == 'production' ? 'prod' : 'dev';
+
+  const dangerousTealiumSnippet = {
+    __html: `
+    (function(a,b,c,d){
+        a='https://tealium-tags.cms.gov/cms-design/${env}/utag.js';
+        b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/javascript';d.async=true;
+        a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
+    })();`,
+  };
+
+  setPreBodyComponents(HeadComponentsJs(dangerousTealiumSnippet));
+};

packages/docs/src/components/layout/Layout.tsx

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import { useEffect, useRef } from 'react';
 import Footer from './DocSiteFooter';
 import SideNav from './SideNav/SideNav';
 import PageHeader from './PageHeader';
@@ -13,6 +14,8 @@ import {
   TableOfContentsItem,
 } from '../../helpers/graphQLTypes';
 import { withPrefix } from 'gatsby';
+import { UtagContainer } from '@cmsgov/design-system';
+import { sendViewEvent } from '@cmsgov/design-system';
 
 import '../../styles/index.scss';
 import { getThemeData } from './SideNav/themeVersionData';
@@ -66,12 +69,45 @@ const Layout = ({
   theme,
   tableOfContentsData,
 }: LayoutProps) => {
-  const env = 'prod';
+  // Using a ref here because this value shouldn't change after the initial render.
+  const env = useRef('' as 'dev' | 'github-demo' | 'prod');
   const baseTitle = theme === 'core' ? 'CMS Design System' : getThemeData(theme).longName;
   const tabTitle = frontmatter?.title ? `${frontmatter.title} - ${baseTitle}` : baseTitle;
 
   const pageId = slug ? `page--${slug.replace('/', '_')}` : null;
 
+  useEffect(() => {
+    if (window && (window as UtagContainer)?.utag) {
+      // We can define environment names as we wish
+      // github-demo is a demo deployment off of a specific branch.
+      switch (location.hostname) {
+        case 'localhost':
+          env.current = 'dev';
+          break;
+        case 'cmsgov.github.io':
+          env.current = 'github-demo';
+          break;
+        case 'design.cms.gov':
+          env.current = 'prod';
+          break;
+        default:
+          env.current = 'prod';
+      }
+
+      const analyticsPayload = {
+        content_language: 'en',
+        content_type: 'html',
+        logged_in: 'false',
+        page_name: tabTitle,
+        page_type: tabTitle.includes('Page not found') ? 'true' : 'false', //If page is a 404 (error page) this is set to true, otherwise it is false
+        site_environment: env.current, //Used to include or exclude traffic from different testing environments. Ex: test, test0, imp, production
+        site_section: location.pathname == '/' ? 'index' : location.pathname, // Set the section to the pathname, except in the case of the index.
+      } as any;
+
+      sendViewEvent(analyticsPayload);
+    }
+  }, []);
+
   return (
     <div data-theme={theme} id={pageId}>
       <Helmet
@@ -99,8 +135,13 @@ const Layout = ({
               : 'The CMS Design System is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.'
           }
         />
-        <script>{`window.tealiumEnvironment = "${env}";`}</script>
-        <script src="//tags.tiqcdn.com/utag/cmsgov/cms-design/prod/utag.sync.js"></script>
+        <script>{`window.tealiumEnvironment = "${env.current}";`}</script>
+        <script
+          src={`https://tealium-tags.cms.gov/cms-design/${env.current}/utag.sync.js`}
+        ></script>
+        <script type="text/javascript">
+          {'window.utag_cfg_ovrd = window.utag_cfg_ovrd || {}; window.utag_cfg_ovrd.noview = true;'}
+        </script>
         <link
           rel="stylesheet"
           type="text/css"

packages/docs/src/pages/404.tsx

@@ -1,48 +1,10 @@
 import { graphql } from 'gatsby';
-
 import Layout from '../components/layout/Layout';
 import { MdxQuery } from '../helpers/graphQLTypes';
 import useTheme from '../helpers/useTheme';
 import ContentRenderer from '../components/content/ContentRenderer';
-import { useEffect } from 'react';
-import { UtagContainer } from '@cmsgov/design-system';
-import { sendViewEvent } from '@cmsgov/design-system';
 
 const NotFoundPage = ({ data, location }: MdxQuery) => {
-  useEffect(() => {
-    if (window && (window as UtagContainer)?.utag) {
-      let env = 'prod';
-
-      // We can define environment names as we wish
-      // github-demo is a demo deployment off of a specific branch.
-      switch (location.hostname) {
-        case 'localhost':
-          env = 'dev';
-          break;
-        case 'cmsgov.github.io':
-          env = 'github-demo';
-          break;
-        case 'design.cms.gov':
-          env = 'prod';
-          break;
-        default:
-          env = 'prod';
-      }
-
-      const analyticsPayload = {
-        content_language: 'en',
-        content_type: 'html',
-        logged_in: 'false',
-        page_name: 'Page not found - CMS Design System',
-        page_type: 'true', //If page is a 404 (error page) this is set to true, otherwise it is false
-        site_environment: env, //Used to include or exclude traffic from different testing environments. Ex: test, test0, imp, production
-        site_section: 'Page not found - CMS Design System',
-      } as any;
-
-      sendViewEvent(analyticsPayload);
-    }
-  }, []);
-
   const theme = useTheme();
   return (
     <Layout frontmatter={data.mdx.frontmatter} location={location} theme={theme}>