diff --git a/packages/documentation/.storybook/manager-head.html b/packages/documentation/.storybook/manager-head.html
index 24e633a8a5..3c7d28ef1a 100644
--- a/packages/documentation/.storybook/manager-head.html
+++ b/packages/documentation/.storybook/manager-head.html
@@ -1,16 +1,22 @@
+
+
diff --git a/packages/documentation/public/assets/scripts/analytics-events.js b/packages/documentation/public/assets/scripts/analytics-events.js
new file mode 100644
index 0000000000..9caaac4b7c
--- /dev/null
+++ b/packages/documentation/public/assets/scripts/analytics-events.js
@@ -0,0 +1,32 @@
+// Page Context
+window.addEventListener('storybook:ready', function () {
+ window.dataLayer.push({
+ event: 'page_context', // constant, required
+ spa: 'true', // constant, required
+ content_language: window.__GTM__.get('CONTENT_LANGUAGE'), // required
+ content_geo_region: window.__GTM__.get('GEO_REGION'), // required
+ source_code_version: window.__GTM__.get('SOURCE_CODE_VERSION'), // recommended
+ page_name_language_neutral: window.__GTM__.getPageTitle(), // required
+ page_url_language_neutral: window.location.href, // required
+ environment: window.__GTM__.getEnvironment(), // required
+ login_status: 'false', // required
+ platform_name: 'ms_design_system', // required
+ department_name: 'IT16.12', // required
+ business_unit: 'IT', // required
+ primary_segment: 'allgemein', // required
+ });
+});
+
+// Page Change
+window.addEventListener('storybook:routeChange', function () {
+ window.dataLayer.push({
+ event: 'page_change', // constant, required
+ content_language: window.__GTM__.get('CONTENT_LANGUAGE'), // required
+ content_geo_region: window.__GTM__.get('GEO_REGION'), // required
+ page_name_language_neutral: window.__GTM__.getPageTitle(), // required
+ page_url_language_neutral: window.location.href, // required
+ virtual_pageview: 'true', // SPA route change indicator, boolean true/false
+ virtual_page_name: window.__GTM__.getPageTitle(), // SPA route change/transition new page name/page title
+ virtual_url: window.location.href, // SPA route change new URL
+ });
+});
diff --git a/packages/documentation/public/assets/scripts/analytics-helper.js b/packages/documentation/public/assets/scripts/analytics-helper.js
index a80d86958c..8a179aa200 100644
--- a/packages/documentation/public/assets/scripts/analytics-helper.js
+++ b/packages/documentation/public/assets/scripts/analytics-helper.js
@@ -1,38 +1,45 @@
-window.onload = function () {
- new MutationObserver(function () {
- const storyAnker = document.querySelector('#storybook-preview-wrapper > a');
+class GTM {
+ constructor() {
+ this.environments = {
+ envs: null,
+ fallback: '',
+ };
+ this.constants = {};
+ }
- if (storyAnker) {
- this.disconnect();
+ set(name, value) {
+ if (!this.constants[name]) this.constants[name] = value;
+ }
- // execute on next cycle to ensure the doc-title has been updated by storybook
- setTimeout(() => {
- window.dispatchEvent(new Event('storybook:ready'));
- });
+ get(name) {
+ if (this.constants[name]) return this.constants[name];
- new MutationObserver(() => {
- // execute on next cycle to ensure the doc-title has been updated by storybook
- setTimeout(() => {
- window.dispatchEvent(new Event('storybook:routeChange'));
- });
- }).observe(storyAnker, { attributes: true });
- }
- }).observe(document.querySelector('#storybook-preview-wrapper'), { childList: true });
-};
+ console.warn(`GTM Warning: There is no such property with the name ${name}`);
+ return undefined;
+ }
-window.gtm = window.gtm || {};
-window.__GTM__ = window.__GTM__ || {};
+ setEnvironments(envs, fallback) {
+ if (typeof envs !== 'object') {
+ console.warn(
+ 'GTM Warning: Setting the environments failed. The values where not provided as an object ({ [envName]: "url1,url2", ... }).',
+ );
+ } else if (this.environments.envs) {
+ console.warn('GTM Warning: Environments already set. You can set them only once.');
+ } else {
+ this.environments.envs = { ...envs };
+ this.environments.fallback = fallback ?? Object.values(envs)[0];
+ }
+ }
-window.gtm.setConstant = function (name, value) {
- if (!window.__GTM__[name]) window.__GTM__[name] = value;
-};
+ getEnvironment() {
+ return (Object.entries(this.environments.envs).find(([_env, hosts = '']) =>
+ hosts.split(',').some(host => window.location.host.indexOf(host) === 0),
+ ) ?? [this.environments.fallback])[0];
+ }
-window.gtm.getEnvironment = function () {
- return (Object.entries(window.__GTM__.ENVIRONMENTS).find(([_env, hosts = '']) =>
- hosts.split(',').some(host => window.location.host.indexOf(host) === 0),
- ) ?? [window.__GTM__.ENVIRONMENT_FALLBACK])[0];
-};
+ getPageTitle() {
+ return document.head.querySelector('title')?.text ?? '';
+ }
+}
-window.gtm.getPageTitle = function () {
- return document.head.querySelector('title')?.text ?? '';
-};
+window.__GTM__ = new GTM();
diff --git a/packages/documentation/public/assets/scripts/storybook-events.js b/packages/documentation/public/assets/scripts/storybook-events.js
new file mode 100644
index 0000000000..531f346b2b
--- /dev/null
+++ b/packages/documentation/public/assets/scripts/storybook-events.js
@@ -0,0 +1,33 @@
+window.onload = function () {
+ const previewWrapper = document.querySelector('#storybook-preview-wrapper');
+ let storyAnchor = document.querySelector('#storybook-preview-wrapper > a');
+
+ if (storyAnchor) {
+ // if storyAnchor already exists, just emit ready event and listen for route-changes
+ ready();
+ } else {
+ // if storyAnchor does not exist yet, wait until its rendered, then emit ready event and listen for route-changes
+ new MutationObserver(function () {
+ storyAnchor = document.querySelector('#storybook-preview-wrapper > a');
+
+ if (storyAnchor) {
+ this.disconnect();
+ ready();
+ }
+ }).observe(previewWrapper, { childList: true });
+ }
+
+ function ready() {
+ // execute on next cycle to ensure the doc-title has been updated by storybook
+ setTimeout(() => {
+ window.dispatchEvent(new Event('storybook:ready'));
+ });
+
+ new MutationObserver(() => {
+ // execute on next cycle to ensure the doc-title has been updated by storybook
+ setTimeout(() => {
+ window.dispatchEvent(new Event('storybook:routeChange'));
+ });
+ }).observe(storyAnchor, { attributes: true });
+ }
+};