From 2c0dbf706a9a07089962fbf352c96d010fe7f14f Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 11:23:19 -0700
Subject: [PATCH 1/6] fix(static-site): add dataLayer tool, update
 documentation

---
 .../static-site/src/pages/DataLayerGuide.tsx  | 99 ++++++++++++++-----
 packages/static-site/src/utils/baseUrl.ts     | 11 ++-
 .../src/utils/watchDataLayerBookmarklet.js    | 38 +++++++
 3 files changed, 125 insertions(+), 23 deletions(-)
 create mode 100644 packages/static-site/src/utils/watchDataLayerBookmarklet.js

diff --git a/packages/static-site/src/pages/DataLayerGuide.tsx b/packages/static-site/src/pages/DataLayerGuide.tsx
index 427d3cfae9..e52cbcd090 100644
--- a/packages/static-site/src/pages/DataLayerGuide.tsx
+++ b/packages/static-site/src/pages/DataLayerGuide.tsx
@@ -1,6 +1,15 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
 import { PagePaths } from "~/routes/config";
+import { watchDataLayer } from "~/utils/watchDataLayerBookmarklet";
+
+export const bookmarklet = `javascript:(${watchDataLayer.toString()
+  // remove line breaks
+  .replace(/\n/g,"")
+  // remove comments
+  .replace(/\/\*.*?\*\//g, "")
+  // replace multiple spaces with a single space
+  .replace(/\s+/g, " ")})();`
 
 const gtmCodes = {
   universal: "GTM-KDWN8Z",
@@ -16,13 +25,13 @@ const GtmCodeExample: FC<{ gtmCode: string }> = ({ gtmCode }) => {
    */
 
   const headScript = `
-  <!-- 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','${gtmCode}');</script>
-  <!-- End Google Tag Manager -->`;
+    <!-- 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','${gtmCode}');</script>
+    <!-- End Google Tag Manager -->`;
   const bodyScript = `
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${gtmCode}"
@@ -67,6 +76,11 @@ const DataLayerGuide = () => {
                 Adding the data layer to your site or application
               </a>
             </li>
+            <li>
+              <a href="#watchdatalayer">
+                Watching the data layer
+              </a>
+            </li>
           </ul>
 
           <a id="gtm"></a>
@@ -131,7 +145,7 @@ const DataLayerGuide = () => {
           <p>
             To implement Google Tag Manager, insert the appropriate snippets
             found below within the body tag of your HTML as close to the top of
-            the page as possible. Further details can be found in the
+            the page as possible. Further details can be found in the{" "}
             <a href="https://developers.google.com/tag-manager/quickstart">
               Google Tag Manager Quickstart Guide
             </a>
@@ -151,7 +165,7 @@ const DataLayerGuide = () => {
 
           <p>
             Some units have their own GTM IDs. When multiple GTM IDs need to be
-            used in a single site or application, follow the guidance on
+            used in a single site or application, follow the guidance on{" "}
             <a href="https://developers.google.com/tag-manager/devguide#multiple-containers">
               Multiple Containers on a Page
             </a>
@@ -184,7 +198,7 @@ const DataLayerGuide = () => {
           </p>
 
           <p>
-            Follow the instructions for
+            Follow the instructions for{" "}
             <a href="https://developers.google.com/tag-platform/tag-manager/web/datalayer">
               creating the Data Layer
             </a>{" "}
@@ -204,7 +218,7 @@ const DataLayerGuide = () => {
             Add event listeners to your code to capture click and change events
             related to your `data-ga` attributes and to push that event to the
             data layer. As a help to get you started, the
-            `unity-bootstrap-theme` package&apos;s `dist/js/data-layer.js` file can
+            `unity-bootstrap-theme` package&apos;s `src/js/data-layer.js` file can
             serve as a starting point or as a reference for implementing your
             own data layer push code.
           </p>
@@ -214,29 +228,70 @@ const DataLayerGuide = () => {
             behavior similar to the following code snippet if you implement the
             Bootstrap header: <br />
           </p>
+          <p>
+            Including the following script tag will automatically initialize the GA push events and header scroll
+            behavior and should be placed in the <strong>{`<head>`}</strong> tag of your HTML.
+            The script has event listeners to initialize on the window load event.
+          </p>
           <pre>
             <code>
               {`
-            <script type="text/javascript" src="example/path/to/@asu/unity-bootstrap-theme/js/data-layer.js"></head> </script></head>
-            <script type="text/javascript" src="./@asu/unity-bootstrap-theme/js/global-header.js"></head> </script></head>
+  <script type="text/javascript" src="example/path/to/@asu/unity-bootstrap-theme/js/unity-bootstrap.umd.js"/>
             `}
             </code>
           </pre>
           <p>
-            Then, the following code should be placed towards the bottom of your
-            html doc or deferred. This initializes the data layer and the global
-            header classes
+            If for some reason your setup includes the script after the window load event has already occurred, you can call the initialization functions directly, by using the global variable <strong>{`unityBootstrap`}</strong>.
           </p>
           <pre>
-            {" "}
             <code>
               {`
-            <script></head>
-              window.initDataLayer();
-              window.initGlobalHeader();
-            </script></head>
+  <script>
+    /* Only use if the script did not automatically initialize with the window load event */
+    unityBootstrap.initDataLayer();
+    unityBootstrap.initGlobalHeader();
+  </script>
             `}
-            </code>{" "}
+            </code>
+          </pre>
+
+          <a id="watchdatalayer"></a>
+          <h2>Watching the data layer</h2>
+          <p>
+            Drag this link to your bookmarks bar. When you are on a page with
+            data layer events, clicking the bookmarklet will execute a tiny
+            script which will output data layer events to the console.<br/><br/>
+            <a href={bookmarklet}>Watch DataLayer</a>
+          </p>
+            <h3>
+              Only Run Code You Trust
+              </h3>
+            <p>
+              As a user, always exercise caution when running code. Only click
+              or add bookmarklets if at least one of the following applies:
+                <ul>
+                  <li>
+                    The source is reputable.
+                  </li>
+                  <li>
+                    You understand JavaScript and have reviewed the code
+                    yourself.
+                  </li>
+                  <li>
+                    A trusted individual who knows JavaScript has reviewed the
+                    code for you.
+                  </li>
+                </ul>
+
+
+            </p>
+            <h3>Bookmarklet Source code</h3>
+          <pre>
+            <code>
+              {`
+${watchDataLayer.toString()}
+              `}
+            </code>
           </pre>
         </div>
       </div>
diff --git a/packages/static-site/src/utils/baseUrl.ts b/packages/static-site/src/utils/baseUrl.ts
index b54a4b5636..b611a0bad1 100644
--- a/packages/static-site/src/utils/baseUrl.ts
+++ b/packages/static-site/src/utils/baseUrl.ts
@@ -1,10 +1,19 @@
+import { PagePaths } from '../routes/config';
+
 export const getBaseUrl = () => {
 
+  const pages = Object.values(PagePaths).filter((page) => page !== '/').map((page) => page.replace(/\//g, ''));
+
   if (typeof window === 'undefined') return '/';
 
   const pathname = window.location.pathname;
 
-  const segments = pathname.split('/').filter(Boolean);
+  const segments = pathname.split('/').filter(str=> str !== 'index.html');
+
+  if (pages.includes(segments[0])) {
+    segments.shift();
+  }
+
   return segments.length > 0 ? `/${segments[0]}` : '/';
 
 };
diff --git a/packages/static-site/src/utils/watchDataLayerBookmarklet.js b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
new file mode 100644
index 0000000000..d8a6e99f94
--- /dev/null
+++ b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
@@ -0,0 +1,38 @@
+export const watchDataLayer = () => {
+  const w = window
+    , dl = w.dataLayer || []
+    /* used to provide styling in the console */
+    , styleKey = '\x1B[38;2;155;145;134;2m'
+    , styleValue = '\x1B[38;2;223;55;48;2m'
+    , styleDefault = '\x1B[0;3m'
+    , styleHeading = '\x1B[0;34;1m'
+    /* provide a global variable */
+    , tableFnName = 'dlEvents';
+  /* display all watched events as console table */
+  w[tableFnName] = () => console.table(dl.slice().filter(i =>
+    typeof i.name !== 'undefined'));
+
+  if (typeof w.onbeforeunload !== 'function') {
+    /* initial click of bookmarklet */
+    dl.push = new Proxy(dl.push,{
+      apply: (target, thisArg, args) => {
+        console.log(`${styleHeading}dataLayer event\n${styleDefault}
+          { ${(Object.entries(args[0]).map( ([k,v]) => (
+            `${styleKey}${k}${styleDefault}: ${styleValue}'${v}'${styleDefault}`
+          ))).sort().join(', ')}${styleDefault} }`);
+        return Reflect.apply(target, thisArg, args);
+      }
+    });
+    alert(`DataLayer events will be displayed in console. Rerun bookmarklet or
+call ${tableFnName}() from the console to display a table of all events.\n\n
+
+A prompt will warn you before leaving the page, this is normal and will allow
+you to inspect the dataLayer events, that would have reloaded the page.\n\n
+
+Follow the prompt to reload or leave the page if you are done watching events.`);
+    w.onbeforeunload = (e) => '';
+  } else {
+    /* if already initialized, output recorded events */
+    w[tableFnName]();
+  }
+}

From f1159167955e506e4ff1eee078d761c0abd420ef Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 11:59:24 -0700
Subject: [PATCH 2/6] fix(static-site): update baseUrl

---
 packages/static-site/src/utils/baseUrl.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/static-site/src/utils/baseUrl.ts b/packages/static-site/src/utils/baseUrl.ts
index b611a0bad1..1059b199fd 100644
--- a/packages/static-site/src/utils/baseUrl.ts
+++ b/packages/static-site/src/utils/baseUrl.ts
@@ -2,19 +2,20 @@ import { PagePaths } from '../routes/config';
 
 export const getBaseUrl = () => {
 
-  const pages = Object.values(PagePaths).filter((page) => page !== '/').map((page) => page.replace(/\//g, ''));
+  const pages = Object.values(PagePaths)
+    .filter((page) => page !== '/')
+    .map((page) => page.replace(/\//g, ''));
 
   if (typeof window === 'undefined') return '/';
 
   const pathname = window.location.pathname;
 
-  const segments = pathname.split('/').filter(str=> str !== 'index.html');
+  const segments = pathname.split('/')
+    .filter(Boolean)
+    .filter((segment) => !pages.includes(segment))
+    .filter((segment) => segment.indexOf(".") === -1);
 
-  if (pages.includes(segments[0])) {
-    segments.shift();
-  }
-
-  return segments.length > 0 ? `/${segments[0]}` : '/';
+  return `/${segments.join('/')}`;
 
 };
 

From 114b4b06337d74e8976e691a41f3adcd70ef3c27 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 12:14:35 -0700
Subject: [PATCH 3/6] fix(static-site): prevent bookmarklet minification

---
 packages/static-site/src/pages/DataLayerGuide.tsx           | 2 +-
 packages/static-site/src/utils/watchDataLayerBookmarklet.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/static-site/src/pages/DataLayerGuide.tsx b/packages/static-site/src/pages/DataLayerGuide.tsx
index e52cbcd090..8aaf5e12d5 100644
--- a/packages/static-site/src/pages/DataLayerGuide.tsx
+++ b/packages/static-site/src/pages/DataLayerGuide.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
 import { PagePaths } from "~/routes/config";
-import { watchDataLayer } from "~/utils/watchDataLayerBookmarklet";
+import { default as watchDataLayer } from "~/utils/watchDataLayerBookmarklet?raw";
 
 export const bookmarklet = `javascript:(${watchDataLayer.toString()
   // remove line breaks
diff --git a/packages/static-site/src/utils/watchDataLayerBookmarklet.js b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
index d8a6e99f94..71206d0f19 100644
--- a/packages/static-site/src/utils/watchDataLayerBookmarklet.js
+++ b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
@@ -1,4 +1,4 @@
-export const watchDataLayer = () => {
+() => {
   const w = window
     , dl = w.dataLayer || []
     /* used to provide styling in the console */

From 2bedc801d5d461dea1e1c970a2c46708eae29e3e Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 12:28:10 -0700
Subject: [PATCH 4/6] fix(static-site): link documentation to gh  data-layer.js

---
 packages/static-site/src/pages/DataLayerGuide.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/static-site/src/pages/DataLayerGuide.tsx b/packages/static-site/src/pages/DataLayerGuide.tsx
index 8aaf5e12d5..5f2f4a88b3 100644
--- a/packages/static-site/src/pages/DataLayerGuide.tsx
+++ b/packages/static-site/src/pages/DataLayerGuide.tsx
@@ -218,7 +218,11 @@ const DataLayerGuide = () => {
             Add event listeners to your code to capture click and change events
             related to your `data-ga` attributes and to push that event to the
             data layer. As a help to get you started, the
-            `unity-bootstrap-theme` package&apos;s `src/js/data-layer.js` file can
+            `unity-bootstrap-theme` package&apos;s{" "}
+            <a href="https://github.com/ASU/asu-unity-stack/blob/dev/packages/unity-bootstrap-theme/src/js/data-layer.js" target="_blank">
+              src/js/data-layer.js
+            </a>{" "}
+            file can
             serve as a starting point or as a reference for implementing your
             own data layer push code.
           </p>

From 248d715ca82d5502eddf65ff51446be1537a1c0e Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 15:25:54 -0700
Subject: [PATCH 5/6] fix lint error

---
 packages/static-site/src/pages/DataLayerGuide.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/static-site/src/pages/DataLayerGuide.tsx b/packages/static-site/src/pages/DataLayerGuide.tsx
index 5f2f4a88b3..d5ddd8b223 100644
--- a/packages/static-site/src/pages/DataLayerGuide.tsx
+++ b/packages/static-site/src/pages/DataLayerGuide.tsx
@@ -219,7 +219,7 @@ const DataLayerGuide = () => {
             related to your `data-ga` attributes and to push that event to the
             data layer. As a help to get you started, the
             `unity-bootstrap-theme` package&apos;s{" "}
-            <a href="https://github.com/ASU/asu-unity-stack/blob/dev/packages/unity-bootstrap-theme/src/js/data-layer.js" target="_blank">
+            <a href="https://github.com/ASU/asu-unity-stack/blob/dev/packages/unity-bootstrap-theme/src/js/data-layer.js" target="_blank" rel="noreferrer">
               src/js/data-layer.js
             </a>{" "}
             file can

From 0abeff216172be9df10892c8975cf41aed07763c Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 1 May 2025 15:39:49 -0700
Subject: [PATCH 6/6] minor text changes

---
 packages/static-site/src/utils/watchDataLayerBookmarklet.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/static-site/src/utils/watchDataLayerBookmarklet.js b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
index 71206d0f19..946cd9fed8 100644
--- a/packages/static-site/src/utils/watchDataLayerBookmarklet.js
+++ b/packages/static-site/src/utils/watchDataLayerBookmarklet.js
@@ -7,7 +7,7 @@
     , styleDefault = '\x1B[0;3m'
     , styleHeading = '\x1B[0;34;1m'
     /* provide a global variable */
-    , tableFnName = 'dlEvents';
+    , tableFnName = 'showDataLayerTable';
   /* display all watched events as console table */
   w[tableFnName] = () => console.table(dl.slice().filter(i =>
     typeof i.name !== 'undefined'));
@@ -24,10 +24,10 @@
       }
     });
     alert(`DataLayer events will be displayed in console. Rerun bookmarklet or
-call ${tableFnName}() from the console to display a table of all events.\n\n
+ call ${tableFnName}() from the console to display a table of all events.\n\n
 
 A prompt will warn you before leaving the page, this is normal and will allow
-you to inspect the dataLayer events, that would have reloaded the page.\n\n
+ you to inspect the dataLayer events, that would have reloaded the page.\n\n
 
 Follow the prompt to reload or leave the page if you are done watching events.`);
     w.onbeforeunload = (e) => '';