@salesforcedevs/dx-components 1.3.44 → 1.3.46

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.44",
+    "version": "1.3.46",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "6fd47c4a90b3238225555542a33e2f10246cbc5b"
+    "gitHead": "decc9a3791a30eb8d16fb7cffb3adf7092ab863b"
 }

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -97,13 +98,26 @@ export default class CardTrial extends LightningElement {
         this._modalOpen = !this._modalOpen;
     }
 
-    private handleClick() {
+    private handleClick(e: PointerEvent) {
         // card is clickable only if it doesn't contain buttons (for accessibility reasons)
         if (!this.hasButtons) {
             window.location.assign(this.href);
+            if (this.href.includes("signup")) {
+                this.handleSignUpClick(e);
+            }
         }
     }
 
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signupStart", {
+            click_text: this.label,
+            element_title: this.title,
+            element_type: "card",
+            click_url: this.href,
+            content_category: "cta"
+        });
+    }
+
     private isExternalURL(url: string | undefined): boolean {
         if (!url) {
             return false;

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -31,6 +31,7 @@
                     class="button-cta"
                     size="large"
                     href={href}
+                    onclick={handleSignUpClick}
                     variant="primary"
                     font="sans"
                     icon-symbol={buttonIcon}

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -64,4 +65,16 @@ export default class CardTrial extends LightningElement {
     private handleModalClose() {
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.href.includes("signup")) {
+            track(e.currentTarget!, "custEv_signupStart", {
+                click_text: this.buttonCta,
+                element_title: this.title,
+                element_type: "card",
+                click_url: this.href,
+                content_category: "cta"
+            });
+        }
+    }
 }

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/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

@@ -21,11 +21,11 @@ const VALID_BRANDS = [
 ];
 
 export const ANALYTICS_INFO = {
-    clickText: "Sign Up",
-    itemTitle: "Sign Up Header Button",
+    click_text: "Sign Up",
+    element_title: "Sign Up Header Button",
     elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
+    element_type: "internal",
+    content_category: "cta"
 };
 
 export abstract class HeaderBase extends LightningElement {
@@ -201,9 +201,9 @@ export abstract class HeaderBase extends LightningElement {
     };
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_signupStart", {
+        track(e.currentTarget!, "custEv_browseTrialsClick", {
             ...ANALYTICS_INFO,
-            clickUrl: this.signupLink
+            click_url: this.signupLink
         });
     }