@salesforcedevs/dx-components 1.3.43 → 1.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.43",
+    "version": "1.3.45",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "de82bbf2fd1ea6664ceed1233ccf4aed43ac19ec"
+    "gitHead": "b2340b9de4e809097ee2f5c5d1bff87b5bc3aab6"
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -181,8 +181,11 @@ export default class CodeBlock extends LightningElement {
      * https://github.com/storybookjs/storybook/issues/13529
      */
     async copySource(event: any) {
-        gtmTrack(event.target, "custEv_codeBlock", {
-            codeBlockAction: "copy"
+        gtmTrack(event.target, "custEv_iconClick", {
+            clickText: this.copyBtnText,
+            elementType: "icon",
+            elementTitle: "dx-icon",
+            contentCategory: "code block"
         });
 
         try {
@@ -206,8 +209,11 @@ export default class CodeBlock extends LightningElement {
         this.theme = this.theme === DARK ? LIGHT : DARK;
         setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
 
-        gtmTrack(event.target, "custEv_codeBlock", {
-            codeBlockAction: this.theme === DARK ? "darkmode" : "lightmode"
+        gtmTrack(event.target, "custEv_iconClick", {
+            clickText: this.updateThemeBtnText,
+            elementType: "icon",
+            elementTitle: "dx-icon",
+            contentCategory: "code block"
         });
     }
 

package/src/modules/dx/dropdown/dropdown.html

@@ -21,9 +21,8 @@
         >
             <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
-                    suppress-gtm-nav-headings={suppressGtmNavHeadings}
                     analytics-event={analyticsEvent}
-                    analytics-base-payload={analyticsBasePayload}
+                    analytics-payload={analyticsPayload}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
@@ -44,9 +43,8 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
-                            suppress-gtm-nav-headings={suppressGTMNavHeadings}
                             analytics-event={analyticsEvent}
-                            analytics-base-payload={analyticsBasePayload}
+                            analytics-payload={analyticsPayload}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -38,13 +38,8 @@ export default class Dropdown extends LightningElement {
     @api variant: DropdownVariant = "base";
 
     // props forwarded to dropdown option
-    @api analyticsEvent: string | null = null;
-    @api analyticsBasePayload: AnalyticsPayload = {
-        elementType: "dropdown",
-        destinationType: "internal",
-        ctaClick: true
-    };
-    @api suppressGtmNavHeadings?: boolean = false;
+    @api analyticsEvent?: string;
+    @api analyticsPayload?: AnalyticsPayload;
 
     @api
     get options() {

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -9,12 +9,11 @@ import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
     @api option!: OptionWithNested;
-    @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
     @api analyticsEvent: string | null = null;
-    @api analyticsBasePayload!: AnalyticsPayload;
+    @api analyticsPayload?: AnalyticsPayload | undefined;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
 
@@ -43,25 +42,16 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        const payload: any = {
-            ...this.analyticsBasePayload,
-            clickText: this.keyValue || undefined,
-            itemTitle: this.option.label || undefined,
-            clickUrl: this.option.link?.href || undefined
-        };
-
-        const navHeading = this.navItemLabel || this.option.label || undefined;
-        const navSubHeading =
-            (this.navItemLabel ? this.option.label : undefined) || undefined;
-
-        if (!this.suppressGtmNavHeadings) {
-            payload.navHeading = navHeading;
-            payload.navSubHeading = navSubHeading;
-            payload.pageLocation = window.location.pathname;
-        }
-
-        if (this.analyticsEvent && e.currentTarget) {
-            track(e.currentTarget, this.analyticsEvent, payload);
+        if (this.analyticsEvent && this.analyticsPayload && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                ...this.analyticsPayload,
+                clickText: this.option.label,
+                clickUrl: this.option.link?.href,
+                elementType: this.analyticsPayload?.elementType || "dropdown",
+                ...(this.analyticsPayload?.navType
+                    ? { navItem: this.option.label }
+                    : {})
+            });
         }
     }
 }

package/src/modules/dx/footer/footer.ts

@@ -18,12 +18,6 @@ const createNewsletterSignupHref = (email: string): string => {
     return PATH;
 };
 
-const ANALYTICS_INFO = {
-    itemTitle: "Newsletter Sign Up Footer",
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
-};
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
     @api
@@ -107,9 +101,11 @@ export default class Footer extends LightningElement {
         const href = createNewsletterSignupHref(e.detail);
 
         track(e.currentTarget, "custEv_ctaButtonClick", {
-            ...ANALYTICS_INFO,
             clickText: this.inputSubmitLabel,
-            clickUrl: PATH
+            clickUrl: PATH,
+            elementType: "button",
+            elementTitle: "dx-footer",
+            contentCategory: "cta"
         });
 
         window.location.assign(href);

package/src/modules/dx/footerOption/footerOption.ts

@@ -10,10 +10,11 @@ export default class FooterOption extends LightningElement {
 
     sendGtm(e: PointerEvent) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
-            navHeading: this.generalLabel || undefined,
-            navSubHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
+            clickText: this.label || undefined,
+            clickUrl: this.href || undefined,
+            navItem: this.label || undefined,
+            elementType: "link",
+            navType: "footer"
         });
     }
 }

package/src/modules/dx/groupText/groupText.ts

@@ -20,12 +20,6 @@ const subtitleClasses = {
     [MEDIUM]: "dx-text-heading-7"
 };
 
-const ANALYTICS_INFO = {
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
-};
-
 export default class GroupText extends LightningElement {
     @api title!: string;
     @api body?: string;
@@ -99,13 +93,13 @@ export default class GroupText extends LightningElement {
     }
 
     private trackClick(event: Event) {
-        const payload = {
-            ...ANALYTICS_INFO,
+        track(event.target!, "custEv_ctaButtonClick", {
             clickText: event.currentTarget.innerText,
             itemTitle: event.currentTarget.innerText,
-            clickUrl: event.currentTarget.href
-        };
-
-        track(event.target!, "custEv_ctaButtonClick", payload);
+            clickUrl: event.currentTarget.href,
+            elementType: "button",
+            elementTitle: "dx-group-text",
+            contentCategory: "cta"
+        });
     }
 }

package/src/modules/dx/headerNav/headerNav.html

@@ -14,6 +14,7 @@
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
                         analytics-event="custEv_topNavLinkClick"
+                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

package/src/modules/dx/headerNav/headerNav.ts

@@ -46,6 +46,10 @@ export default class HeaderNav extends LightningElement {
     }
 
     private _navItems: OptionWithNested[] = [];
+    private ANALYTICS_PAYLOAD = {
+        navLevel: "2",
+        navType: "global"
+    };
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -24,11 +24,10 @@ export default class MainContentHeader extends LightningElement {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
                 clickText: this.ctaLabel,
-                itemTitle: this.title,
                 clickUrl: this.ctaHref,
                 elementType: "button",
-                destinationType: "internal",
-                ctaClick: true
+                elementTitle: "dx-button",
+                contentCategory: "cta"
             });
         }
     }

package/src/modules/dx/pagination/pagination.ts

@@ -2,13 +2,6 @@ import classNames from "classnames";
 import { LightningElement, api } from "lwc";
 import { track } from "dxUtils/analytics";
 
-const ANALYTICS_INFO = {
-    clickUrl: window.location.href,
-    ctaClick: false,
-    elementType: "button",
-    destinationType: "internal"
-};
-
 enum PaginationClickType {
     Number,
     Next,
@@ -98,10 +91,14 @@ export default class Pagination extends LightningElement {
                 ? page
                 : (e.target as HTMLElement).dataset.partId;
 
+        console.log("clickURL", e.target.href);
+
         track(e.currentTarget!, "custEv_pagination", {
-            ...ANALYTICS_INFO,
             clickText,
-            itemTitle: clickText
+            clickUrl: window.location.href,
+            elementType: "button",
+            navType: "pagination",
+            navItem: clickText
         });
 
         this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -9,7 +9,13 @@ declare module globalThis {
     let singletonScrollManagerConnected: boolean;
 }
 // mostly components shouldn't be using this, but there are a few exceptions such as amfReference
+
+let scrollUnlocked: boolean = false;
+
 export const restoreScroll = () => {
+    if (scrollUnlocked) {
+        return;
+    }
     document.body.scrollTop = document.documentElement.scrollTop =
         window.history.state?.scroll.value;
 };
@@ -33,10 +39,10 @@ export default class ScrollManager extends LightningElement {
     */
 
     protected scrollCount = 0; // this is for dark magic, basically we lock the user out of scrolling in the first quarter second, unless they really mean it. We do this because load timings mean that the scroll can get messed up in that period
-    protected scrollUnlocked = false;
 
     renderedCallback() {
-        if (!globalThis.singletonScrollManagerRendered) {
+        scrollUnlocked = window.location.hash !== ""; // if we have anchor links, skip the entire scroll restore
+        if (!globalThis.singletonScrollManagerRendered && !scrollUnlocked) {
             globalThis.singletonScrollManagerRendered = true;
             if (
                 window.history.state?.scroll?.docSize ===
@@ -50,10 +56,8 @@ export default class ScrollManager extends LightningElement {
                     // sometimes loading is slow, so we may want to reset the scroll to
                     // the correct position after loading is complete, to avoid weird behavior
                     // but only if the user hasn't scrolled around in the meantime
-                    if (!this.scrollUnlocked) {
-                        restoreScroll();
-                        this.scrollUnlocked = true;
-                    }
+                    restoreScroll();
+                    scrollUnlocked = true;
                 }, LOAD_TIME_SCROLL_RESTORE_DELAY);
             }
         } else {

package/src/modules/dx/tab/tab.ts

@@ -32,9 +32,12 @@ export default class Tab extends LightningElement {
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_topNavLinkClick", {
-            navHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname
+            clickText: this.label || undefined,
+            clickUrl: this.href || undefined,
+            navLevel: "1",
+            navItem: this.label || undefined,
+            elementType: "link",
+            navType: "global"
         });
     }
 

package/src/modules/dx/treeItem/treeItem.ts

@@ -146,11 +146,12 @@ export default class TreeItem extends LightningElement {
     }
 
     private sendGtm(event: Event) {
-        track(event.currentTarget!, "custEv_leftNavClick", {
-            navType: "left nav bar",
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
             clickText: this._treeNode.label,
             clickUrl: this.href,
-            navItem: this.parentName
+            navItem: this.parentName,
+            navType: "left nav bar",
+            elementType: "link"
         });
     }
 }

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -20,14 +20,6 @@ const VALID_BRANDS = [
     "success"
 ];
 
-export const ANALYTICS_INFO = {
-    clickText: "Sign Up",
-    itemTitle: "Sign Up Header Button",
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
-};
-
 export abstract class HeaderBase extends LightningElement {
     @api bailHref?: string | null = null;
     @api bailLabel?: string | null = null;
@@ -201,9 +193,12 @@ export abstract class HeaderBase extends LightningElement {
     };
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_signupStart", {
-            ...ANALYTICS_INFO,
-            clickUrl: this.signupLink
+        track(e.currentTarget!, "custEv_browseTrialsClick", {
+            clickText: "browse trials",
+            clickUrl: this.signupLink,
+            elementTitle: "dx-button",
+            elementType: "button",
+            contentCategory: "cta"
         });
     }