- Ensure your markup includes appropriate `data-ga` and `data-ga-*`
- attributes for your purpose. The Unity Bootstrap Theme
+ Important: Elements must have a{" "}
+ data-ga attribute to be tracked. This is the required
+ base attribute that identifies an element for tracking. You can
+ optionally include supplementary data-ga-* attributes
+ (such as data-ga-name, data-ga-event,{" "}
+ data-ga-action, 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
diff --git a/packages/unity-bootstrap-theme/src/js/data-layer.js b/packages/unity-bootstrap-theme/src/js/data-layer.js
index f68d3ad5b5..5082ef1056 100644
--- a/packages/unity-bootstrap-theme/src/js/data-layer.js
+++ b/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);
})
);
diff --git a/packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx b/packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx
index 41f6e22200..689f6bbb28 100755
--- a/packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx
+++ b/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
+
+
+
+
+
+
+
+
+```
+
+**Manual initialization** (only needed if script loads after page load or re-initialization required):
+```html
+
+```
+
+#### **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(
+