@salesforcedevs/dx-components 1.3.50 → 1.3.51

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.50",
+    "version": "1.3.51",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

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

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

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

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

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

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

@@ -9,11 +9,12 @@ 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 analyticsPayload?: AnalyticsPayload | undefined;
+    @api analyticsBasePayload!: AnalyticsPayload;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
 
@@ -42,16 +43,25 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        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 }
-                    : {})
-            });
+        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);
         }
     }
 }

package/src/modules/dx/footer/footer.css

@@ -44,6 +44,11 @@ footer.signup-variant-no-signup {
     color: var(--dx-g-blue-vibrant-20);
 }
 
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
 /* TOP */
 
 .content-container_top {
@@ -402,4 +407,8 @@ footer.signup-variant-no-signup {
     .subscription dx-input {
         width: 100%;
     }
+
+    .term-icon {
+        margin-left: 0;
+    }
 }

package/src/modules/dx/footer/footer.html

@@ -139,6 +139,12 @@
                         </template>
                         <template if:false={term.onclick}>
                             <a href={term.href} key={term.label} rel={term.rel}>
+                                <img
+                                    if:true={term.img}
+                                    class="term-icon"
+                                    src={term.img}
+                                    alt="Footer Term Icon"
+                                />
                                 {term.label}
                             </a>
                         </template>

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

@@ -18,6 +18,12 @@ 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
@@ -101,11 +107,9 @@ export default class Footer extends LightningElement {
         const href = createNewsletterSignupHref(e.detail);
 
         track(e.currentTarget, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
             clickText: this.inputSubmitLabel,
-            clickUrl: PATH,
-            elementType: "button",
-            elementTitle: "dx-footer",
-            contentCategory: "cta"
+            clickUrl: PATH
         });
 
         window.location.assign(href);

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

@@ -167,6 +167,11 @@ export const termsLinks = [
         rel: "nofollow",
         label: "Cookie Preferences",
         onclick: openOneTrustInfoDisplay
+    },
+    {
+        href: "https://www.salesforce.com/form/other/privacy-request/",
+        label: "Your Privacy Choices",
+        img: "/assets/svg/privacyicon.png"
     }
 ];
 

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

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

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

@@ -20,6 +20,12 @@ 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;
@@ -93,13 +99,13 @@ export default class GroupText extends LightningElement {
     }
 
     private trackClick(event: Event) {
-        track(event.target!, "custEv_ctaButtonClick", {
+        const payload = {
+            ...ANALYTICS_INFO,
             clickText: event.currentTarget.innerText,
             itemTitle: event.currentTarget.innerText,
-            clickUrl: event.currentTarget.href,
-            elementType: "button",
-            elementTitle: "dx-group-text",
-            contentCategory: "cta"
-        });
+            clickUrl: event.currentTarget.href
+        };
+
+        track(event.target!, "custEv_ctaButtonClick", payload);
     }
 }

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

@@ -14,7 +14,6 @@
                     <!-- 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,10 +46,6 @@ 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,10 +24,11 @@ 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",
-                elementTitle: "dx-button",
-                contentCategory: "cta"
+                destinationType: "internal",
+                ctaClick: true
             });
         }
     }

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

@@ -2,6 +2,13 @@ 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,
@@ -91,14 +98,10 @@ 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,
-            clickUrl: window.location.href,
-            elementType: "button",
-            navType: "pagination",
-            navItem: clickText
+            itemTitle: clickText
         });
 
         this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));

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

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

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

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