docs: update docs for data layer and unity custom JS

README.md

@@ -32,7 +32,7 @@
   - [\> Google Analytics integration](#-google-analytics-integration)
       - [**`src/component.js`**](#srccomponentjs)
       - [**`services/googleAnalytics.js`**](#servicesgoogleanalyticsjs)
-      - [**`src/component.html`**](#srccomponenthtml)
+      - [**`example-markup.html`**](#example-markuphtml)
       - [**`src/component.js`**](#srccomponentjs-1)
   - [Git commit guidelines:](#git-commit-guidelines)
     - [Examples](#examples)
@@ -335,23 +335,43 @@ const trackGAEvent = (event) => {
 }
 ```
 
-For the `unity-bootstrap-theme` package the events are dispatched by an `eventListener`, for the `focus`, `click` or `change` event handler, for each html element that needs to be included. For example:
+For the `unity-bootstrap-theme` package the events are dispatched by an `eventListener`, for the `click` or `change` event handler, for each HTML element that needs to be tracked.
 
-#### **`src/component.html`**
-```JS
-<a href="#" data-ga="">Anchor Text</a>
+**Important:** Elements must have the base `data-ga` attribute to be tracked. Any supplementary `data-ga-*` attributes (such as `data-ga-name`, `data-ga-event`, `data-ga-action`, etc.) are automatically collected and included in the analytics event.
+
+For example:
+
+#### **`example-markup.html`**
+```HTML
+<a href="#"
+   data-ga="Click me"
+   data-ga-name="onclick"
+   data-ga-event="link"
+   data-ga-section="hero">
+  Anchor Text
+</a>
 ```
 #### **`src/component.js`**
 ```JS
 const pushGAEvent = (event) => {
   const { dataLayer } = window;
   if (dataLayer) dataLayer.push(event);
 };
-// eventListener
+// eventListener - dynamically collects all data-ga-* attributes
 const elements = document.querySelectorAll('[data-ga]');
 elements.forEach((element) =>
-  element.addEventListener('focus', () => {
-    pushGAEvent(event);
+  element.addEventListener('click', () => {
+    const gaEvent = {};
+    // Automatically collect all data-ga-* attributes
+    Array.from(element.attributes).forEach(attr => {
+      if (attr.name.startsWith('data-ga-')) {
+        const key = attr.name.replace('data-ga-', '');
+        if (attr.value) gaEvent[key] = attr.value.toLowerCase();
+      } else if (attr.name === 'data-ga') {
+        if (attr.value) gaEvent.text = attr.value.toLowerCase();
+      }
+    });
+    pushGAEvent(gaEvent);
   })
 );
 ```

packages/static-site/src/pages/DataLayerGuide.tsx

@@ -165,8 +165,13 @@ const DataLayerGuide = () => {
           </p>
 
           <p>
-            Ensure your markup includes appropriate `data-ga` and `data-ga-*`
-            attributes for your purpose. The Unity Bootstrap Theme
+            <strong>Important:</strong> Elements must have a{" "}
+            <code>data-ga</code> attribute to be tracked. This is the required
+            base attribute that identifies an element for tracking. You can
+            optionally include supplementary <code>data-ga-*</code> attributes
+            (such as <code>data-ga-name</code>, <code>data-ga-event</code>,{" "}
+            <code>data-ga-action</code>, etc.) to provide additional context for
+            the analytics event. The Unity Bootstrap Theme
             (`unity-bootstrap-theme`) includes these attributes in its reference
             code. The values of these attributes are used when the data layer
             event is submitted for click or change events on the tag, but to

packages/unity-bootstrap-theme/src/js/data-layer.js

@@ -76,29 +76,29 @@ function initDataLayer() {
    */
   document.querySelectorAll("[data-ga]")?.forEach(element =>
     element.addEventListener("click", () => {
-      const name = element.getAttribute("data-ga-name") || "";
-      const event = element.getAttribute("data-ga-event") || "";
-      let action = element.getAttribute("data-ga-action") || "";
+      const gaEvent = {};
+
+      Array.from(element.attributes).forEach(attr => {
+        if (attr.name.startsWith("data-ga-")) {
+          const key = attr.name.replace("data-ga-", "");
+          const value = attr.value;
+          if (value) {
+            gaEvent[key] = value.toLowerCase();
+          }
+        } else if (attr.name === "data-ga") {
+          const value = attr.value;
+          if (value) {
+            gaEvent.text = value.toLowerCase();
+          }
+        }
+      });
+
       const expanded = element.getAttribute("aria-expanded");
       if (expanded) {
-        action = expanded === "false" ? "open" : "close";
+        gaEvent.action = expanded === "false" ? "open" : "close";
       }
-      const type = element.getAttribute("data-ga-type") || "";
-      const section = element.getAttribute("data-ga-section") || "";
-      const region = element.getAttribute("data-ga-region") || "";
-      const text = element.getAttribute("data-ga") || "";
-      const component = element.getAttribute("data-ga-component") || "";
 
-      pushGAEvent({
-        name: name.toLowerCase(),
-        event: event.toLowerCase(),
-        action: action.toLowerCase(),
-        type: type.toLowerCase(),
-        section: section.toLowerCase(),
-        region: region.toLowerCase(),
-        text: text.toLowerCase(),
-        component: component.toLowerCase(),
-      });
+      pushGAEvent(gaEvent);
     })
   );
 

packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx

@@ -24,32 +24,87 @@ We bundle the necessary CSS and Javascript in the `dist/` folder. There are more
 * `dist/css/unity-bootstrap-header-footer.css` (optional) - header and footer CSS only - don't use if using the Unity `component-header-footer` React component
 
 ### Javascript
-All you need to do is include the script on your page, the scripts will execute with the window load event.
-We provide 3 formats ("UMD", "CJS", "ES").
-
-* Unity File Formats
-  * `dist/js/unity-bootstrap.umd.js` (universal)
-    * creates a global variable `unityBootstrap` if you need to manaully call the init function ex: `unityBootstrap.initAnchorMenu()`
-  * `dist/js/unity-bootstrap.cjs.js` (common js)
-  * `dist/js/unity-bootstrap.es.js` (module)
-* Vendor Files
-  * `dist/js/bootstrap.bundle.min.js` (unaltered bootstrap version)
-  * `dist/js/chart.min.js` (only needed if you are using the donut chart)
-
-* Exports:
-  * `initAnchorMenu`
-  * `initBlockquoteAnimation`
-  * `initCalendar`
-  * `initChart`
-  * `initDataLayer`
-  * `initFixedTable`
-  * `initGlobalHeader`
-  * `initHeroesVideo`
-  * `initImageParallax`
-  * `initModals`
-  * `initRankingCard`
-  * `initTabbedPanels`
-  * `initVideo`
+
+Unity Bootstrap Theme includes JavaScript for interactive components and Google Analytics data layer integration. **All scripts automatically initialize on window load** - you just need to include them in your project.
+
+We provide 3 formats for different use cases:
+
+#### **For Browser/HTML Projects (UMD)**
+
+Include the UMD bundle via script tag. Everything auto-initializes on page load:
+
+```html
+<!-- Include Unity Bootstrap JS -->
+<script src="path/to/@asu/unity-bootstrap-theme/dist/js/unity-bootstrap.umd.js"></script>
+
+<!-- Optional: Bootstrap JS (if not already included) -->
+<script src="path/to/@asu/unity-bootstrap-theme/dist/js/bootstrap.bundle.min.js"></script>
+
+<!-- Optional: Chart.js (only if using donut chart component) -->
+<script src="path/to/@asu/unity-bootstrap-theme/dist/js/chart.min.js"></script>
+```
+
+**Manual initialization** (only needed if script loads after page load or re-initialization required):
+```html
+<script>
+  // Global variable `unityBootstrap` is available
+  unityBootstrap.initDataLayer();
+  unityBootstrap.initGlobalHeader();
+  // ... or any other init function
+</script>
+```
+
+#### **For React/Modern JavaScript Apps (ES Module)**
+
+Import at your app's entry point (e.g., `src/index.js` or `src/main.jsx`). Auto-initializes on window load:
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+// Import Unity Bootstrap JS - auto-initializes on window load
+import '@asu/unity-bootstrap-theme/dist/js/unity-bootstrap.es.js';
+
+// Import Unity CSS
+import '@asu/unity-bootstrap-theme/dist/css/unity-bootstrap-theme.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+#### **Available Formats**
+
+* `dist/js/unity-bootstrap.umd.js` - Universal Module Definition (browser/script tags)
+* `dist/js/unity-bootstrap.es.js` - ES Module (React/modern bundlers)
+* `dist/js/unity-bootstrap.cjs.js` - CommonJS (Node.js)
+
+#### **Vendor Files** (Included for convenience)
+* `dist/js/bootstrap.bundle.min.js` - Unaltered Bootstrap JS
+* `dist/js/chart.min.js` - Only needed for donut chart component
+
+#### **Available Initialization Functions**
+
+All functions listed below auto-initialize on window load. Manual calls are only needed for edge cases:
+
+* `initAnchorMenu`
+* `initBlockquoteAnimation`
+* `initCalendar`
+* `initChart`
+* `initDataLayer` - Required for Google Analytics tracking
+* `initFixedTable`
+* `initGlobalHeader` - Required for header functionality if using the HTML markup only. Not needed if using the React header in `@asu/component-header-footer` component.
+* `initHeroesVideo`
+* `initImageParallax`
+* `initModals`
+* `initRankingCard`
+* `initTabbedPanels`
+* `initVideo`
+* `initCardBodies`
+* `initCollapse`
 
 ## ❯ How to  use the Unity Storybook reference site