@salesforcedevs/dx-components 1.3.53 → 1.3.54

package/package.json

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

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -4,6 +4,7 @@
         body={body}
         featured={featured}
         href={href}
+        href-click={onLinkClick}
         img-alt={imgAlt}
         img-src={imgSrc}
         label={label}

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 
 export default class CardBlogPost extends LightningElement {
     @api body!: string;
@@ -18,4 +19,20 @@ export default class CardBlogPost extends LightningElement {
     private get _datetime() {
         return this.datetime || this.dateTime;
     }
+
+    private onLinkClick(event: Event) {
+        const payload = {
+            click_text: this.title,
+            click_url: this.href,
+            element_title: "dx-card-blog-post",
+            element_type: "card",
+            content_category: "link"
+        };
+        track(event.target!, "custEv_blogCardClick", {
+            ...payload,
+            blog_author: this.authors,
+            blog_title: this.title
+        });
+        track(event.target!, "custEv_linkClick", payload);
+    }
 }

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -37,5 +37,12 @@ export default class CardCallout extends LightningElement {
             elementType: "card callout",
             destinationType: "internal"
         });
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.title,
+            click_url: this.href,
+            element_title: "dx-card-callout",
+            element_type: "card",
+            content_category: "link"
+        });
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -3,6 +3,7 @@
         <a
             if:true={hasImage}
             href={href}
+            onclick={handleClick}
             onmouseenter={setLinkHovered}
             onmouseleave={setLinkInactive}
             target={target}
@@ -31,6 +32,7 @@
             <dx-card-title
                 href={href}
                 target={target}
+                onclick={handleClick}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
                 title={title}

package/src/modules/dx/cardContent/cardContent.ts

@@ -18,6 +18,7 @@ export default class CardContent extends LightningElement {
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
     @api title!: string;
+    @api hrefClick: any = null;
     @api
     get authors() {
         if (this._authors && this._authors.length) {
@@ -80,4 +81,10 @@ export default class CardContent extends LightningElement {
     private onDatetimeSlotChange(e: LightningSlotElement): void {
         this.isDatetimeEmpty = isSlotEmpty(e);
     }
+
+    private handleClick(e: Event) {
+        if (this.hrefClick) {
+            this.hrefClick(e);
+        }
+    }
 }

package/src/modules/dx/cardDocs/cardDocs.html

@@ -13,8 +13,12 @@
             "
         >
             <span class="dx-text-label-3">{label}</span>
-            <dx-card-title title={title} target={target}></dx-card-title>
-            <span class="dx-text-body-2">{body}</span>
+            <dx-card-title
+                title={title}
+                target={target}
+                onclick={handleLinkClick}
+            ></dx-card-title>
+            <span class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
         </div>
         <div class="dx-card-base_section-vertical dx-card-base_ctas">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
 import { stopPropagationOnSlotted } from "dxUtils/slot";
+import { track } from "dxUtils/analytics";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;
@@ -25,6 +26,52 @@ export default class CardDocs extends LightningElement {
     }
 
     private onSlotChange(e: LightningSlotElement) {
+        const payloadInnerButton = {
+            element_title: "dx-button",
+            element_type: "link",
+            content_category: "card"
+        };
+        // @ts-ignore
+        const slot = e.target;
+        const elements = slot.assignedElements();
+        elements.forEach((slotElement) => {
+            slotElement?.addEventListener("click", (event: Event) => {
+                track(event.currentTarget!, "custEv_cardClick", {
+                    ...payloadInnerButton,
+                    click_text: slotElement.innerText,
+                    click_url: slotElement.href
+                });
+                track(event.currentTarget!, "custEv_linkClick", {
+                    ...payloadInnerButton,
+                    click_text: slotElement.innerText,
+                    click_url: slotElement.href
+                });
+            });
+        });
         stopPropagationOnSlotted(e);
     }
+
+    private handleLinkClick(event: PointerEvent) {
+        const paylodCardInfo = {
+            click_text: this.title,
+            element_title: "dx-card-title",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_cardClick", paylodCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", paylodCardInfo);
+    }
+
+    private handleTextClick(event: PointerEvent) {
+        const payloadCardTextInfo = {
+            click_text: this.body,
+            element_title: "span",
+            click_url: this.href,
+            element_type: "tile",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_ctaTile", payloadCardTextInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardTextInfo);
+    }
 }

package/src/modules/dx/cardNews/cardNews.ts

@@ -74,5 +74,6 @@ export default class CardNews extends LightningElement {
             clickUrl: this.href
         };
         track(e.currentTarget!, "custEv_ctaLinkClick", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
     }
 }

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

@@ -109,13 +109,15 @@ export default class CardTrial extends LightningElement {
     }
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_signupStart", {
+        const payload = {
             click_text: this.label,
-            element_title: this.title,
+            element_title: "dx-button",
             element_type: "card",
             click_url: this.href,
             content_category: "cta"
-        });
+        };
+        track(e.currentTarget!, "custEv_signupStart", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
     }
 
     private isExternalURL(url: string | undefined): boolean {

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

@@ -68,13 +68,15 @@ export default class CardTrial extends LightningElement {
 
     private handleSignUpClick(e: PointerEvent) {
         if (this.href.includes("signup")) {
-            track(e.currentTarget!, "custEv_signupStart", {
+            const payload = {
                 click_text: this.buttonCta,
-                element_title: this.title,
+                element_title: "dx-button",
                 element_type: "card",
                 click_url: this.href,
                 content_category: "cta"
-            });
+            };
+            track(e.currentTarget!, "custEv_signupStart", payload);
+            track(e.currentTarget!, "custEv_linkClick", payload);
         }
     }
 }

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

@@ -174,6 +174,15 @@ export default class CodeBlock extends LightningElement {
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
+
+        gtmTrack(newLang, "custEv_ctaLinkClick", {
+            event: "custEv_ctaLinkClick",
+            click_text: newLang.detail,
+            element_title: "dx-dropdown",
+            click_url: this.selectedLanguageId,
+            element_type: "link",
+            content_category: "code block"
+        });
     }
 
     /**
@@ -181,8 +190,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", {
+            click_text: this.copyBtnText,
+            element_type: "icon",
+            element_title: "dx-icon",
+            content_category: "code block"
         });
 
         try {
@@ -206,8 +218,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", {
+            click_text: this.updateThemeBtnText,
+            element_type: "icon",
+            element_title: "dx-icon",
+            content_category: "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,
+                click_text: this.option.label,
+                click_url: this.option.link?.href,
+                element_type: this.analyticsPayload?.element_type || "dropdown",
+                ...(this.analyticsPayload?.nav_type
+                    ? { nav_item: this.option.label }
+                    : {})
+            });
         }
     }
 }

package/src/modules/dx/feature/feature.html

@@ -12,6 +12,7 @@
                 target={target}
                 icon-symbol={iconSymbol}
                 href={buttonHref}
+                onclick={handleClick}
             >
                 {buttonLabel}
             </dx-button>

package/src/modules/dx/feature/feature.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 
 export default class Feature extends LightningElement {
     @api label!: string;
@@ -31,4 +32,16 @@ export default class Feature extends LightningElement {
     get iconSymbol(): string {
         return this.isExternalLink ? "new_window" : "";
     }
+
+    handleClick(event: Event) {
+        const payload = {
+            click_text: this.buttonLabel,
+            element_title: "dx-button",
+            click_url: this.buttonHref,
+            element_type: "button",
+            content_category: "cta"
+        };
+        track(event.target!, "custEv_ctaButtonClick", payload);
+        track(event.target!, "custEv_linkClick", payload);
+    }
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -4,6 +4,7 @@ import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toJson } from "dxUtils/normalizers";
 import { ImageAndLabel } from "../imageAndLabel";
+import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
 
 export default class FeaturedContentHeader extends LightningElement {
@@ -32,7 +33,12 @@ export default class FeaturedContentHeader extends LightningElement {
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
     private isLinkHovered: boolean = false;
-
+    private progressPodcastPlayed = {
+        percent25: false,
+        percent50: false,
+        percent75: false,
+        percent100: false
+    };
     // ! Move this map away from the component and probably the filter too.
     @api
     get authors() {
@@ -103,6 +109,57 @@ export default class FeaturedContentHeader extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement): void {
         this.isSlotEmpty = isSlotEmpty(e);
+        const slot = e.target;
+        const slotElements = slot.assignedElements();
+
+        if (slotElements.length) {
+            const slotContentElement = slotElements[0];
+            const playerElement = slotContentElement.shadowRoot.querySelector(
+                "audio"
+            ) as HTMLAudioElement;
+            if (playerElement) {
+                playerElement.addEventListener("play", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "play",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("pause", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "pause",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("timeupdate", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    if (
+                        (playerState.percentagePlayed === 25 &&
+                            !this.progressPodcastPlayed.percent25) ||
+                        (playerState.percentagePlayed === 50 &&
+                            !this.progressPodcastPlayed.percent50) ||
+                        (playerState.percentagePlayed === 75 &&
+                            !this.progressPodcastPlayed.percent75) ||
+                        (playerState.percentagePlayed === 100 &&
+                            !this.progressPodcastPlayed.percent100)
+                    ) {
+                        this.trackAnalytics(
+                            event,
+                            "progress",
+                            playerState.timePlayed,
+                            playerState.percentagePlayed
+                        );
+                    }
+                });
+            }
+        }
     }
 
     renderedCallback(): void {
@@ -119,4 +176,61 @@ export default class FeaturedContentHeader extends LightningElement {
             }
         }
     }
+
+    private trackAnalytics(
+        event: Event,
+        action: "play" | "pause" | "progress",
+        timePlayed: number,
+        percentagePlayed: number
+    ) {
+        let trackEvent = null;
+        switch (action) {
+            case "play":
+                trackEvent = "custEv_podcastPlay";
+                break;
+            case "pause":
+                trackEvent = "custEv_podcastPause";
+                break;
+            case "progress":
+                trackEvent = "custEv_podcastProgress";
+                break;
+            default:
+                trackEvent = null;
+        }
+
+        if (!trackEvent) {
+            return;
+        }
+
+        track(event.target!, trackEvent, {
+            media_name: this.title,
+            media_action: action,
+            media_episode: this.href,
+            media_percentage_played: percentagePlayed,
+            media_seconds_played: timePlayed,
+            media_type: "podcast"
+        });
+
+        if (Math.trunc(percentagePlayed) === 25) {
+            this.progressPodcastPlayed.percent25 = true;
+        } else if (Math.trunc(percentagePlayed) === 50) {
+            this.progressPodcastPlayed.percent50 = true;
+        } else if (Math.trunc(percentagePlayed) === 75) {
+            this.progressPodcastPlayed.percent75 = true;
+        } else if (Math.trunc(percentagePlayed) === 100) {
+            this.progressPodcastPlayed.percent100 = true;
+        }
+    }
+
+    private handlePlayerState(player: HTMLAudioElement) {
+        let timePlayed = 0;
+        let percentagePlayed = 0;
+        if (player) {
+            timePlayed = player.currentTime / 1000;
+            percentagePlayed = Math.trunc(
+                (player.currentTime * 100) / player.duration
+            );
+        }
+        return { timePlayed, percentagePlayed };
+    }
 }

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
+            click_text: this.inputSubmitLabel,
+            click_url: PATH,
+            element_type: "button",
+            element_title: "dx-footer",
+            content_category: "cta"
         });
 
         window.location.assign(href);

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

@@ -10,10 +10,18 @@ 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
+            click_text: this.label || undefined,
+            click_url: this.href || undefined,
+            nav_item: this.label || undefined,
+            element_type: "link",
+            nav_type: "footer"
+        });
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.label,
+            element_title: "dx-button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

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,
-            clickText: event.currentTarget.innerText,
-            itemTitle: event.currentTarget.innerText,
-            clickUrl: event.currentTarget.href
-        };
-
-        track(event.target!, "custEv_ctaButtonClick", payload);
+        track(event.target!, "custEv_ctaButtonClick", {
+            click_text: event.currentTarget.innerText,
+            item_title: event.currentTarget.innerText,
+            click_url: event.currentTarget.href,
+            element_type: "button",
+            element_title: "dx-group-text",
+            content_category: "cta"
+        });
     }
 }

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -16,5 +16,13 @@ export default class HeaderMobileNavMenuOption extends LightningElement {
             clickText: this.href || undefined,
             pageLocation: window.location.pathname || undefined
         });
+
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.itemLabel,
+            element_title: "dx-button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "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 = {
+        nav_level: "2",
+        nav_type: "global"
+    };
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

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

@@ -23,12 +23,18 @@ export default class MainContentHeader extends LightningElement {
     private onCtaClick(e: Event) {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {
-                clickText: this.ctaLabel,
-                itemTitle: this.title,
-                clickUrl: this.ctaHref,
-                elementType: "button",
-                destinationType: "internal",
-                ctaClick: true
+                click_text: this.ctaLabel,
+                click_url: this.ctaHref,
+                element_type: "button",
+                element_title: "dx-button",
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabel,
+                element_title: "dx-button",
+                click_url: this.ctaHref,
+                element_type: "link",
+                content_category: "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,
@@ -99,9 +92,11 @@ export default class Pagination extends LightningElement {
                 : (e.target as HTMLElement).dataset.partId;
 
         track(e.currentTarget!, "custEv_pagination", {
-            ...ANALYTICS_INFO,
-            clickText,
-            itemTitle: clickText
+            click_text: clickText,
+            click_url: window.location.href,
+            element_type: "button",
+            nav_type: "pagination",
+            nav_item: clickText
         });
 
         this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
+import { track as trackGTM } from "dxUtils/analytics";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -151,6 +152,7 @@ export default class SearchResults extends LightningElement {
                     return cv.state === "selected";
                 });
             });
+            this.trackSearchResults(event, this.query, this.totalResults);
         });
     }
 
@@ -184,4 +186,13 @@ export default class SearchResults extends LightningElement {
             }
         }
     }
+
+    private trackSearchResults(event: Event, term: string, resultCount: any) {
+        trackGTM(event.target!, "custEv_search", {
+            search_term: term,
+            search_category: "",
+            search_type: "site search",
+            search_result_count: resultCount
+        });
+    }
 }

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

@@ -32,9 +32,20 @@ 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
+            click_text: this.label || undefined,
+            click_url: this.href || undefined,
+            nav_level: "1",
+            nav_item: this.label || undefined,
+            element_type: "link",
+            nav_type: "global"
+        });
+
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.label,
+            element_title: "button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 

package/src/modules/dx/toc/toc.ts

@@ -75,16 +75,33 @@ export default class Toc extends LightningElement {
 
         this._value = id!;
 
-        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
-            clickText: text,
-            clickUrl: href,
-            elementType: "link",
-            locationOnPage: "table of contents",
-            itemTitle: this.title
+        sendGtm(e.currentTarget!, "custEv_tableOfContents", {
+            click_text: text,
+            clickAction: "click",
+            click_url: href,
+            element_title: "a",
+            element_type: "link",
+            content_category: "cta"
         });
     }
 
-    private toggleShowContent() {
+    private toggleShowContent(e: Event) {
         this.showContent = !this.showContent;
+        this.trackShowContent(e);
+    }
+
+    private trackShowContent(event: Event) {
+        let action = "collapse";
+        if (this.showContent) {
+            action = "expand";
+        }
+        sendGtm(event.target!, "custEv_tableOfContents", {
+            click_text: this.toggleButtonAriaLabel,
+            clickAction: action,
+            click_url: "",
+            element_title: "dx-button",
+            element_type: "button",
+            content_category: "cta"
+        });
     }
 }

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

@@ -146,11 +146,20 @@ export default class TreeItem extends LightningElement {
     }
 
     private sendGtm(event: Event) {
-        track(event.currentTarget!, "custEv_leftNavClick", {
-            navType: "left nav bar",
-            clickText: this._treeNode.label,
-            clickUrl: this.href,
-            navItem: this.parentName
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            click_text: this._treeNode.label,
+            click_url: this.href,
+            nav_item: this.parentName,
+            nav_type: "left nav bar",
+            element_type: "link"
+        });
+
+        track(event.currentTarget!, "custEv_linkClick", {
+            click_text: this._treeNode.label,
+            element_title: "dx-tree-item",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

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

@@ -21,10 +21,9 @@ const VALID_BRANDS = [
 ];
 
 export const ANALYTICS_INFO = {
-    click_text: "Sign Up",
-    element_title: "Sign Up Header Button",
-    elementType: "button",
-    element_type: "internal",
+    click_text: "browse trials",
+    element_title: "dx-button",
+    element_type: "button",
     content_category: "cta"
 };
 
@@ -201,10 +200,13 @@ export abstract class HeaderBase extends LightningElement {
     };
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_browseTrialsClick", {
+        const payload = {
             ...ANALYTICS_INFO,
             click_url: this.signupLink
-        });
+        };
+
+        track(e.currentTarget!, "custEv_browseTrialsClick", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
     }
 
     protected additionalClasses(): string {